Particles
There is a light-weight JavaScript library named particle.js which creates a very pleasing particle system. This is an attempt to recreate that particle system using p5.js. Inspired by Particle.js, contributed by Sagar Arora.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
// this class describes the properties of a single particle.
class Particle {
// setting the co-ordinates, radius and the
// speed of a particle in both the co-ordinates axes.
constructor(){
this.x = random(0,width);
this.y = random(0,height);
this.r = random(1,8);
this.xSpeed = random(-2,2);
this.ySpeed = random(-1,1.5);
}
// creation of a particle.
createParticle() {
noStroke();
fill('rgba(200,169,169,0.5)');
circle(this.x,this.y,this.r);
}
// setting the particle in motion.
moveParticle() {
if(this.x < 0 || this.x > width)
this.xSpeed*=-1;
if(this.y < 0 || this.y > height)
this.ySpeed*=-1;
this.x+=this.xSpeed;
this.y+=this.ySpeed;
}
// this function creates the connections(lines)
// between particles which are less than a certain distance apart
joinParticles(particles) {
particles.forEach(element =>{
let dis = dist(this.x,this.y,element.x,element.y);
if(dis<85) {
stroke('rgba(255,255,255,0.04)');
line(this.x,this.y,element.x,element.y);
}
});
}
}
// an array to add multiple particles
let particles = [];
function setup() {
createCanvas(720, 400);
for(let i = 0;i<width/10;i++){
particles.push(new Particle());
}
}
function draw() {
background('#0f0f0f');
for(let i = 0;i<particles.length;i++) {
particles[i].createParticle();
particles[i].moveParticle();
particles[i].joinParticles(particles.slice(i));
}
}
