Skip to content

Commit 25185e8

Browse files
author
thechunsik
committed
added an event for removing particles
- added an option for onclick event - push or remove(i thought that it needs controllers but if that, it might not lightweight library anymore) - created variables for multiple comparisons when getting params(you dont have to adopt it if it doesnt need those variables)
1 parent df1d2a6 commit 25185e8

File tree

2 files changed

+90
-76
lines changed

2 files changed

+90
-76
lines changed

‎demo/js/app.js

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -42,13 +42,12 @@ particlesJS('particles-js', {
4242
},
4343
events: {
4444
onclick: {
45-
push_particles: {
46-
enable: true,
47-
nb: 4
48-
}
45+
enable: true,
46+
mode: 'push', // "push" or "remove"
47+
nb: 4
4948
}
5049
}
5150
},
5251
/* Retina Display Support */
5352
retina_detect: true
54-
});
53+
});

‎particles.js

Lines changed: 86 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/* -----------------------------------------------
2-
/* Author : Vincent Garreau - vincentgarreau.com
2+
/* Author : Vincent Garreau - vincentgarreau.com
33
/* MIT license: http://opensource.org/licenses/MIT
44
/* GitHub : https://github.com/VincentGarreau/particles.js
55
/* How to use? : Check the GitHub README
@@ -54,10 +54,9 @@ function launchParticlesJS(tag_id, params){
5454
},
5555
events: {
5656
onclick: {
57-
push_particles: {
58-
enable: true,
59-
nb: 1
60-
}
57+
enable: true,
58+
mode: 'push',
59+
nb: 4
6160
}
6261
}
6362
},
@@ -72,45 +71,51 @@ function launchParticlesJS(tag_id, params){
7271
/* params settings */
7372
if(params){
7473
if(params.particles){
75-
if(params.particles.color) pJS.particles.color = params.particles.color;
76-
if(params.particles.shape) pJS.particles.shape = params.particles.shape;
77-
if(params.particles.opacity) pJS.particles.opacity = params.particles.opacity;
78-
if(params.particles.size) pJS.particles.size = params.particles.size;
79-
if(params.particles.size_random == false) pJS.particles.size_random = params.particles.size_random;
80-
if(params.particles.nb) pJS.particles.nb = params.particles.nb;
81-
if(params.particles.line_linked){
82-
if(params.particles.line_linked.enable_auto == false) pJS.particles.line_linked.enable_auto = params.particles.line_linked.enable_auto;
83-
if(params.particles.line_linked.distance) pJS.particles.line_linked.distance = params.particles.line_linked.distance;
84-
if(params.particles.line_linked.color) pJS.particles.line_linked.color = params.particles.line_linked.color;
85-
if(params.particles.line_linked.opacity) pJS.particles.line_linked.opacity = params.particles.line_linked.opacity;
86-
if(params.particles.line_linked.width) pJS.particles.line_linked.width = params.particles.line_linked.width;
87-
if(params.particles.line_linked.condensed_mode){
88-
if(params.particles.line_linked.condensed_mode.enable == false) pJS.particles.line_linked.condensed_mode.enable = params.particles.line_linked.condensed_mode.enable;
89-
if(params.particles.line_linked.condensed_mode.rotateX) pJS.particles.line_linked.condensed_mode.rotateX = params.particles.line_linked.condensed_mode.rotateX;
90-
if(params.particles.line_linked.condensed_mode.rotateY) pJS.particles.line_linked.condensed_mode.rotateY = params.particles.line_linked.condensed_mode.rotateY;
74+
var paramsForParticles = params.particles;
75+
if(paramsForParticles.color) pJS.particles.color = paramsForParticles.color;
76+
if(paramsForParticles.shape) pJS.particles.shape = paramsForParticles.shape;
77+
if(paramsForParticles.opacity) pJS.particles.opacity = paramsForParticles.opacity;
78+
if(paramsForParticles.size) pJS.particles.size = paramsForParticles.size;
79+
if(paramsForParticles.size_random == false) pJS.particles.size_random = paramsForParticles.size_random;
80+
if(paramsForParticles.nb) pJS.particles.nb = paramsForParticles.nb;
81+
if(paramsForParticles.line_linked){
82+
var paramsForLineLinked = paramsForParticles.line_linked;
83+
if(paramsForLineLinked.enable_auto == false) pJS.particles.line_linked.enable_auto = paramsForLineLinked.enable_auto;
84+
if(paramsForLineLinked.distance) pJS.particles.line_linked.distance = paramsForLineLinked.distance;
85+
if(paramsForLineLinked.color) pJS.particles.line_linked.color = paramsForLineLinked.color;
86+
if(paramsForLineLinked.opacity) pJS.particles.line_linked.opacity = paramsForLineLinked.opacity;
87+
if(paramsForLineLinked.width) pJS.particles.line_linked.width = paramsForLineLinked.width;
88+
if(paramsForLineLinked.condensed_mode){
89+
var paramsForCondensedMode = paramsForLineLinked.condensed_mode;
90+
if(paramsForCondensedMode.enable == false) pJS.particles.line_linked.condensed_mode.enable = paramsForCondensedMode.enable;
91+
if(paramsForCondensedMode.rotateX) pJS.particles.line_linked.condensed_mode.rotateX = paramsForCondensedMode.rotateX;
92+
if(paramsForCondensedMode.rotateY) pJS.particles.line_linked.condensed_mode.rotateY = paramsForCondensedMode.rotateY;
9193
}
9294
}
93-
if(params.particles.anim){
94-
if(params.particles.anim.enable == false) pJS.particles.anim.enable = params.particles.anim.enable;
95-
if(params.particles.anim.speed) pJS.particles.anim.speed = params.particles.anim.speed;
95+
if(paramsForParticles.anim){
96+
var paramsForAnim = paramsForParticles.anim;
97+
if(paramsForAnim.enable == false) pJS.particles.anim.enable = paramsForAnim.enable;
98+
if(paramsForAnim.speed) pJS.particles.anim.speed = paramsForAnim.speed;
9699
}
97100
}
98101
if(params.interactivity){
99-
if(params.interactivity.enable == false) pJS.interactivity.enable = params.interactivity.enable;
100-
if(params.interactivity.mouse){
101-
if(params.interactivity.mouse.distance) pJS.interactivity.mouse.distance = params.interactivity.mouse.distance;
102+
var paramsForInteractivity = params.interactivity;
103+
if(paramsForInteractivity.enable == false) pJS.interactivity.enable = paramsForInteractivity.enable;
104+
if(paramsForInteractivity.mouse){
105+
if(paramsForInteractivity.mouse.distance) pJS.interactivity.mouse.distance = paramsForInteractivity.mouse.distance;
102106
}
103-
if(params.interactivity.detect_on) pJS.interactivity.detect_on = params.interactivity.detect_on;
104-
if(params.interactivity.mode) pJS.interactivity.mode = params.interactivity.mode;
105-
if(params.interactivity.line_linked){
106-
if(params.interactivity.line_linked.opacity) pJS.interactivity.line_linked.opacity = params.interactivity.line_linked.opacity;
107+
if(paramsForInteractivity.detect_on) pJS.interactivity.detect_on = paramsForInteractivity.detect_on;
108+
if(paramsForInteractivity.mode) pJS.interactivity.mode = paramsForInteractivity.mode;
109+
if(paramsForInteractivity.line_linked){
110+
if(paramsForInteractivity.line_linked.opacity) pJS.interactivity.line_linked.opacity = paramsForInteractivity.line_linked.opacity;
107111
}
108-
if(params.interactivity.events){
109-
if(params.interactivity.events.onclick){
110-
if(params.interactivity.events.onclick.push_particles){
111-
if(params.interactivity.events.onclick.push_particles.enable == false) pJS.interactivity.events.onclick.push_particles.enable = params.interactivity.events.onclick.push_particles.enable;
112-
if(params.interactivity.events.onclick.push_particles.nb) pJS.interactivity.events.onclick.push_particles.nb = params.interactivity.events.onclick.push_particles.nb;
113-
}
112+
if(paramsForInteractivity.events){
113+
var paramsForEvents = paramsForInteractivity.events;
114+
if(paramsForEvents.onclick){
115+
var paramsForOnclick = paramsForEvents.onclick;
116+
if(paramsForOnclick.enable == false) pJS.interactivity.events.onclick.enable = false;
117+
if(paramsForOnclick.mode != 'push') pJS.interactivity.events.onclick.mode = paramsForOnclick.mode;
118+
if(typeof paramsForOnclick.nb === 'number') pJS.interactivity.events.onclick.nb = paramsForOnclick.nb;
114119
}
115120
}
116121
}
@@ -126,15 +131,15 @@ function launchParticlesJS(tag_id, params){
126131
pJS.retina = true;
127132
pJS.canvas.w = pJS.canvas.el.offsetWidth*2;
128133
pJS.canvas.h = pJS.canvas.el.offsetHeight*2;
129-
pJS.particles.anim.speed = pJS.particles.anim.speed*2;
134+
pJS.particles.anim.speed = pJS.particles.anim.speed*2;
130135
pJS.particles.line_linked.distance = pJS.particles.line_linked.distance*2;
131136
pJS.particles.line_linked.width = pJS.particles.line_linked.width*2;
132-
pJS.interactivity.mouse.distance = pJS.interactivity.mouse.distance*2;
137+
pJS.interactivity.mouse.distance = pJS.interactivity.mouse.distance*2;
133138
}
134139

135140

136141
/* ---------- CANVAS functions ------------ */
137-
142+
138143
pJS.fn.canvasInit = function(){
139144
pJS.canvas.ctx = pJS.canvas.el.getContext('2d');
140145
};
@@ -186,7 +191,7 @@ function launchParticlesJS(tag_id, params){
186191
/* size */
187192
this.radius = (pJS.particles.size_random ? Math.random() : 1) * pJS.particles.size;
188193
if (pJS.retina) this.radius *= 2;
189-
194+
190195
/* color */
191196
this.color = color;
192197

@@ -218,7 +223,7 @@ function launchParticlesJS(tag_id, params){
218223
pJS.canvas.ctx.closePath();
219224
break;
220225
}
221-
226+
222227
pJS.canvas.ctx.fill();
223228
}
224229

@@ -265,7 +270,7 @@ function launchParticlesJS(tag_id, params){
265270
}
266271

267272
}
268-
273+
269274

270275
}
271276
}
@@ -283,7 +288,7 @@ function launchParticlesJS(tag_id, params){
283288
var p = pJS.particles.array[i];
284289
p.draw('rgba('+p.color.r+','+p.color.g+','+p.color.b+','+p.opacity+')');
285290
}
286-
291+
287292
};
288293

289294
pJS.fn.particlesRemove = function(){
@@ -298,10 +303,10 @@ function launchParticlesJS(tag_id, params){
298303
var dx = p1.x - p2.x,
299304
dy = p1.y - p2.y,
300305
dist = Math.sqrt(dx*dx + dy*dy);
301-
306+
302307
/* Check distance between particle and mouse mos */
303308
if(dist <= pJS.particles.line_linked.distance) {
304-
309+
305310
/* draw the line */
306311
var color_line = pJS.particles.line_linked.color_rgb_line;
307312
pJS.canvas.ctx.beginPath();
@@ -319,7 +324,7 @@ function launchParticlesJS(tag_id, params){
319324
ax = dx/(pJS.particles.line_linked.condensed_mode.rotateX*1000),
320325
ay = dy/(pJS.particles.line_linked.condensed_mode.rotateY*1000);
321326
p2.vx += ax;
322-
p2.vy += ay;
327+
p2.vy += ay;
323328
}
324329

325330
}
@@ -331,7 +336,7 @@ function launchParticlesJS(tag_id, params){
331336
}else{
332337
var detect_el = pJS.canvas.el
333338
}
334-
339+
335340
detect_el.onmousemove = function(e){
336341
pJS.interactivity.mouse.pos_x = e.pageX;
337342
pJS.interactivity.mouse.pos_y = e.pageY;
@@ -350,21 +355,31 @@ function launchParticlesJS(tag_id, params){
350355
pJS.interactivity.status = 'mouseleave';
351356
};
352357

353-
if(pJS.interactivity.events.onclick.push_particles.enable){
354-
detect_el.onclick = function(e){
355-
for(var i = 0; i < pJS.interactivity.events.onclick.push_particles.nb; i++){
356-
pJS.particles.array.push(
357-
new pJS.fn.particle(
358-
pJS.particles.color_rgb,
359-
pJS.particles.opacity,
360-
{
361-
'x': pJS.interactivity.mouse.pos_x,
362-
'y': pJS.interactivity.mouse.pos_y
363-
}
364-
)
365-
)
366-
}
367-
};
358+
if(pJS.interactivity.events.onclick.enable){
359+
switch(pJS.interactivity.events.onclick.mode){
360+
case 'push':
361+
detect_el.onclick = function(e){
362+
for(var i = 0; i < pJS.interactivity.events.onclick.nb; i++){
363+
pJS.particles.array.push(
364+
new pJS.fn.particle(
365+
pJS.particles.color_rgb,
366+
pJS.particles.opacity,
367+
{
368+
'x': pJS.interactivity.mouse.pos_x,
369+
'y': pJS.interactivity.mouse.pos_y
370+
}
371+
)
372+
)
373+
};
374+
}
375+
break;
376+
377+
case 'remove':
378+
detect_el.onclick = function(e){
379+
pJS.particles.array.splice(0, pJS.interactivity.events.onclick.nb);
380+
}
381+
break;
382+
}
368383
}
369384

370385
};
@@ -416,7 +431,7 @@ function launchParticlesJS(tag_id, params){
416431
pJS.fn.requestAnimFrame = requestAnimFrame(launchAnimation);
417432
};
418433

419-
434+
420435
launchParticles();
421436

422437
if(pJS.particles.anim.enable){
@@ -433,11 +448,11 @@ function launchParticlesJS(tag_id, params){
433448
/* --- VENDORS --- */
434449

435450
window.requestAnimFrame = (function(){
436-
return window.requestAnimationFrame ||
437-
window.webkitRequestAnimationFrame ||
438-
window.mozRequestAnimationFrame ||
439-
window.oRequestAnimationFrame ||
440-
window.msRequestAnimationFrame ||
451+
return window.requestAnimationFrame ||
452+
window.webkitRequestAnimationFrame ||
453+
window.mozRequestAnimationFrame ||
454+
window.oRequestAnimationFrame ||
455+
window.msRequestAnimationFrame ||
441456
function(callback){
442457
window.setTimeout(callback, 1000 / 60);
443458
};
@@ -482,7 +497,7 @@ window.particlesJS = function(tag_id, params){
482497
if(!tag_id){
483498
tag_id = 'particles-js';
484499
}
485-
500+
486501
/* create canvas element */
487502
var canvas_el = document.createElement('canvas');
488503

@@ -498,4 +513,4 @@ window.particlesJS = function(tag_id, params){
498513
launchParticlesJS(tag_id, params);
499514
}
500515

501-
};
516+
};

0 commit comments

Comments
 (0)