Skip to content

Commit 6e67e77

Browse files
VincentGarreauVincentGarreau
committed
new: interactivity mouse
1 parent 8a00601 commit 6e67e77

File tree

2 files changed

+119
-35
lines changed

2 files changed

+119
-35
lines changed

‎particles.js

Lines changed: 90 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ function launchParticlesJS(tag_id, params){
2222
size_random: true,
2323
nb: 200,
2424
line_linked: {
25-
enable: true,
25+
enable_auto: true,
2626
distance: 100,
2727
color: '#fff',
2828
opacity: 1,
@@ -39,10 +39,18 @@ function launchParticlesJS(tag_id, params){
3939
},
4040
array: []
4141
},
42-
retina_detect: true,
43-
interactivity: {},
42+
interactivity: {
43+
enable: true,
44+
mouse: {
45+
distance: 100
46+
},
47+
mode: 'grab'
48+
},
49+
retina_detect: false,
4450
fn: {
45-
vendors:{}
51+
vendors:{
52+
interactivity: {}
53+
}
4654
}
4755
};
4856

@@ -56,7 +64,7 @@ function launchParticlesJS(tag_id, params){
5664
if(params.particles.size_random == false) pJS.particles.size_random = params.particles.size_random;
5765
if(params.particles.nb) pJS.particles.nb = params.particles.nb;
5866
if(params.particles.line_linked){
59-
if(params.particles.line_linked.enable == false) pJS.particles.line_linked.enable = params.particles.line_linked.enable;
67+
if(params.particles.line_linked.enable_auto == false) pJS.particles.line_linked.enable_auto = params.particles.line_linked.enable_auto;
6068
if(params.particles.line_linked.distance) pJS.particles.line_linked.distance = params.particles.line_linked.distance;
6169
if(params.particles.line_linked.color) pJS.particles.line_linked.color = params.particles.line_linked.color;
6270
if(params.particles.line_linked.opacity) pJS.particles.line_linked.opacity = params.particles.line_linked.opacity;
@@ -73,7 +81,14 @@ function launchParticlesJS(tag_id, params){
7381
if(params.particles.anim.speed) pJS.particles.anim.speed = params.particles.anim.speed;
7482
}
7583
}
76-
if(params.retina_detect == false) pJS.retina_detect = params.retina_detect;
84+
if(params.interactivity){
85+
if(params.interactivity.enable == false) pJS.interactivity.enable = params.interactivity.enable;
86+
if(params.interactivity.mouse){
87+
if(params.interactivity.mouse.distance) pJS.interactivity.mouse.distance = params.interactivity.mouse.distance;
88+
if(params.interactivity.mode) pJS.interactivity.mode = params.interactivity.mode;
89+
}
90+
}
91+
pJS.retina_detect = params.retina_detect;
7792
}
7893

7994
/* convert hex colors to rgb */
@@ -89,6 +104,7 @@ function launchParticlesJS(tag_id, params){
89104
pJS.particles.anim.speed = pJS.particles.anim.speed*2;
90105
pJS.particles.line_linked.distance = pJS.particles.line_linked.distance*2;
91106
pJS.particles.line_linked.width = pJS.particles.line_linked.width*2;
107+
pJS.interactivity.mouse.distance = pJS.interactivity.mouse.distance*2;
92108
}
93109
};
94110

@@ -155,8 +171,8 @@ function launchParticlesJS(tag_id, params){
155171
this.opacity = opacity;
156172

157173
/* animation - velocity for speed */
158-
this.vx = -.5 + Math.random() * 1;
159-
this.vy = -.5 + Math.random() * 1;
174+
this.vx = -.5 + Math.random();
175+
this.vy = -.5 + Math.random();
160176

161177
/* draw function */
162178
this.draw = function(){
@@ -197,10 +213,10 @@ function launchParticlesJS(tag_id, params){
197213
var p = pJS.particles.array[i];
198214

199215
/* move the particle */
200-
p.x += p.vx * pJS.particles.anim.speed;
201-
p.y += p.vy * pJS.particles.anim.speed;
216+
p.x += p.vx * (pJS.particles.anim.speed/2);
217+
p.y += p.vy * (pJS.particles.anim.speed/2);
202218

203-
/* change particle position if it is out of window */
219+
/* change particle position if it is out of canvas */
204220
if(p.x + p.radius > pJS.canvas.w) p.x = p.radius;
205221
else if(p.x - p.radius < 0) p.x = pJS.canvas.w - p.radius;
206222
if(p.y + p.radius > pJS.canvas.h) p.y = p.radius;
@@ -209,12 +225,25 @@ function launchParticlesJS(tag_id, params){
209225
/* Check distance between each particle and mouse position */
210226
for(var j = i + 1; j < pJS.particles.array.length; j++){
211227
var p2 = pJS.particles.array[j];
212-
//distanceParticleMouse(p, p2);
213-
if(pJS.particles.line_linked.enable){
214-
//distanceParticles(p, p2);
228+
229+
/* link particles if enable */
230+
if(pJS.particles.line_linked.enable_auto){
215231
pJS.fn.vendors.distanceParticles(p,p2);
216232
}
217-
//acceleration(p, p2);
233+
234+
/* set interactivity if enable */
235+
if(pJS.interactivity.enable){
236+
237+
/* interactivity mode */
238+
switch(pJS.interactivity.mode){
239+
case 'grab':
240+
pJS.fn.vendors.interactivity.grabParticles(p,p2);
241+
break;
242+
}
243+
244+
}
245+
246+
218247
}
219248
}
220249
};
@@ -237,7 +266,7 @@ function launchParticlesJS(tag_id, params){
237266

238267
/* ---------- VENDORS functions ------------ */
239268

240-
pJS.fn.vendors.distanceParticles = function(p1, p2) {
269+
pJS.fn.vendors.distanceParticles = function(p1, p2){
241270

242271
var dx = p1.x - p2.x,
243272
dy = p1.y - p2.y,
@@ -271,6 +300,47 @@ function launchParticlesJS(tag_id, params){
271300
}
272301
}
273302

303+
pJS.fn.vendors.interactivity.listeners = function(){
304+
pJS.canvas.el.onmousemove = function(e){
305+
if(pJS.retina){
306+
pJS.interactivity.mouse.pos_x = e.pageX*2;
307+
pJS.interactivity.mouse.pos_y = e.pageY*2;
308+
}else{
309+
pJS.interactivity.mouse.pos_x = e.pageX;
310+
pJS.interactivity.mouse.pos_y = e.pageY;
311+
}
312+
pJS.interactivity.status = 'mousemove';
313+
}
314+
pJS.canvas.el.onmouseleave = function(e){
315+
pJS.interactivity.mouse.pos_x = 0;
316+
pJS.interactivity.mouse.pos_y = 0;
317+
pJS.interactivity.status = 'mouseleave';
318+
}
319+
}
320+
321+
pJS.fn.vendors.interactivity.grabParticles = function(p1, p2){
322+
var dx = p1.x - p2.x,
323+
dy = p1.y - p2.y,
324+
dist = Math.sqrt(dx*dx + dy*dy);
325+
326+
var dx_mouse = p1.x - pJS.interactivity.mouse.pos_x,
327+
dy_mouse = p1.y - pJS.interactivity.mouse.pos_y,
328+
dist_mouse = Math.sqrt(dx_mouse*dx_mouse + dy_mouse*dy_mouse);
329+
330+
/* Check distace between 2 particles + Check distance between 1 particle and mouse position */
331+
if(dist <= pJS.particles.line_linked.distance && dist_mouse <= pJS.interactivity.mouse.distance && pJS.interactivity.status == 'mousemove'){
332+
/* Draw the line */
333+
var color_line = pJS.particles.line_linked.color_rgb_line;
334+
pJS.canvas.ctx.beginPath();
335+
pJS.canvas.ctx.strokeStyle = 'rgba('+color_line.r+','+color_line.g+','+color_line.b+','+ (pJS.particles.line_linked.opacity-dist_mouse/pJS.interactivity.mouse.distance) +')';
336+
pJS.canvas.ctx.moveTo(p1.x, p1.y);
337+
pJS.canvas.ctx.lineTo(pJS.interactivity.mouse.pos_x, pJS.interactivity.mouse.pos_y);
338+
pJS.canvas.ctx.lineWidth = pJS.particles.line_linked.width;
339+
pJS.canvas.ctx.stroke();
340+
pJS.canvas.ctx.closePath();
341+
}
342+
}
343+
274344

275345
/* --------- LAUNCH ----------- */
276346

@@ -295,6 +365,10 @@ function launchParticlesJS(tag_id, params){
295365
launchAnimation();
296366
}
297367

368+
if(pJS.interactivity.enable){
369+
pJS.fn.vendors.interactivity.listeners();
370+
}
371+
298372

299373
};
300374

‎particles.min.js

Lines changed: 29 additions & 19 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)