Skip to content

Commit 3e54b55

Browse files
VincentGarreauVincentGarreau
committed
new: line linked between particles
1 parent 40ed0e2 commit 3e54b55

File tree

2 files changed

+90
-26
lines changed

2 files changed

+90
-26
lines changed

‎particles.js

Lines changed: 65 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -15,16 +15,24 @@ function launchParticlesJS(tag_id, params){
1515
h: document.querySelector('#'+tag_id+' > canvas').offsetHeight
1616
},
1717
particles: {
18-
color_hex: '#fff',
18+
color: '#fff',
1919
shape: 'circle',
2020
opacity: 1,
2121
size: 2.5,
2222
size_random: true,
2323
nb: 200,
24-
array: [],
24+
line_linked: {
25+
enable: true,
26+
distance: 100,
27+
color: '#fff',
28+
opacity: 1,
29+
width: 1
30+
},
2531
anim: {
32+
enable: false,
2633
speed: 1
27-
}
34+
},
35+
array: []
2836
},
2937
retina_detect: true,
3038
interactivity: {},
@@ -34,12 +42,19 @@ function launchParticlesJS(tag_id, params){
3442
/* params settings */
3543
if(params){
3644
if(params.particles){
37-
if(params.particles.color_hex) pJS.particles.color_hex = params.particles.color_hex;
45+
if(params.particles.color) pJS.particles.color = params.particles.color;
3846
if(params.particles.shape) pJS.particles.shape = params.particles.shape;
3947
if(params.particles.opacity) pJS.particles.opacity = params.particles.opacity;
4048
if(params.particles.size) pJS.particles.size = params.particles.size;
4149
if(params.particles.size_random == false) pJS.particles.size_random = params.particles.size_random;
4250
if(params.particles.nb) pJS.particles.nb = params.particles.nb;
51+
if(params.particles.line_linked){
52+
if(params.particles.line_linked.enable == false) pJS.particles.line_linked.enable = params.particles.line_linked.enable;
53+
if(params.particles.line_linked.distance) pJS.particles.line_linked.distance = params.particles.line_linked.distance;
54+
if(params.particles.line_linked.color) pJS.particles.line_linked.color = params.particles.line_linked.color;
55+
if(params.particles.line_linked.opacity) pJS.particles.line_linked.opacity = params.particles.line_linked.opacity;
56+
if(params.particles.line_linked.width) pJS.particles.line_linked.width = params.particles.line_linked.width;
57+
}
4358
if(params.particles.anim){
4459
if(params.particles.anim.speed) pJS.particles.anim.speed = params.particles.anim.speed;
4560
}
@@ -48,7 +63,8 @@ function launchParticlesJS(tag_id, params){
4863
}
4964

5065
/* convert hex colors to rgb */
51-
pJS.particles.color_rgb = hexToRgb(pJS.particles.color_hex);
66+
pJS.particles.color_rgb = hexToRgb(pJS.particles.color);
67+
pJS.particles.line_linked.color_rgb_line = hexToRgb(pJS.particles.line_linked.color);
5268

5369
/* detect retina */
5470
if(pJS.retina_detect){
@@ -57,6 +73,8 @@ function launchParticlesJS(tag_id, params){
5773
pJS.canvas.w = pJS.canvas.el.offsetWidth*2;
5874
pJS.canvas.h = pJS.canvas.el.offsetHeight*2;
5975
pJS.particles.anim.speed = pJS.particles.anim.speed*2;
76+
pJS.particles.line_linked.distance = pJS.particles.line_linked.distance*2;
77+
pJS.particles.line_linked.width = pJS.particles.line_linked.width*2;
6078
}
6179
};
6280

@@ -173,21 +191,31 @@ function launchParticlesJS(tag_id, params){
173191
else if(p.x - p.radius < 0) p.x = pJS.canvas.w - p.radius;
174192
if(p.y + p.radius > pJS.canvas.h) p.y = p.radius;
175193
else if(p.y - p.radius < 0) p.y = pJS.canvas.h - p.radius;
194+
195+
/* Check distance between each particle and mouse position */
196+
for(var j = i + 1; j < pJS.particles.array.length; j++){
197+
var p2 = pJS.particles.array[j];
198+
//distanceParticleMouse(p, p2);
199+
if(pJS.particles.line_linked.enable){
200+
distanceParticles(p, p2);
201+
}
202+
}
176203
}
177204
};
178205

179206
pJS.fn.particlesDraw = function(){
180207
/* clear canvas */
181208
pJS.canvas.ctx.clearRect(0, 0, pJS.canvas.w, pJS.canvas.h);
182209

210+
/* move particles */
211+
pJS.fn.particlesAnimate();
212+
183213
/* draw each particle */
184214
for(var i = 0; i < pJS.particles.array.length; i++){
185215
var p = pJS.particles.array[i];
186216
p.draw('rgba('+p.color.r+','+p.color.g+','+p.color.b+','+p.opacity+')');
187217
}
188-
189-
/* move particles */
190-
pJS.fn.particlesAnimate();
218+
191219
};
192220

193221

@@ -224,6 +252,35 @@ window.requestAnimFrame = (function(){
224252
};
225253
})();
226254

255+
function distanceParticles(p1, p2) {
256+
257+
var dist,
258+
dx = p1.x - p2.x;
259+
dy = p1.y - p2.y;
260+
dist = Math.sqrt(dx*dx + dy*dy);
261+
262+
/* Check distance between particle and mouse mos */
263+
if(dist <= pJS.particles.line_linked.distance) {
264+
// Draw the line
265+
var color_line = pJS.particles.line_linked.color_rgb_line;
266+
pJS.canvas.ctx.beginPath();
267+
pJS.canvas.ctx.strokeStyle = 'rgba('+color_line.r+','+color_line.g+','+color_line.b+','+ (pJS.particles.line_linked.opacity-dist/pJS.particles.line_linked.distance) +')';
268+
pJS.canvas.ctx.moveTo(p1.x, p1.y);
269+
pJS.canvas.ctx.lineTo(p2.x, p2.y);
270+
pJS.canvas.ctx.lineWidth = pJS.particles.line_linked.width;
271+
pJS.canvas.ctx.stroke();
272+
pJS.canvas.ctx.closePath();
273+
274+
// Acceleration
275+
/* var ax = dx/65000,
276+
ay = dy/65000;
277+
p1.vx -= ax;
278+
p1.vy -= ay;
279+
p2.vx += ax;
280+
p2.vy += ay; */
281+
}
282+
}
283+
227284
function hexToRgb(hex){
228285
// By Tim Down - http://stackoverflow.com/a/5624139/3493650
229286
// Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")

‎particles.min.js

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

0 commit comments

Comments
 (0)