https://saikrishnareddyk.github.io/script/animation.js

1// this class describes the properties of a single particle.
2class Particle {
3  // setting the co-ordinates, radius and the
4  // speed of a particle in both the co-ordinates axes.
5  constructor() {
6    this.x = random(0, width);
7    this.y = random(0, height);
8    this.r = random(1, 8);
9    this.xSpeed = random(-2, 2);
10    this.ySpeed = random(-1, 1.5);
11  }
12
13  // creation of a particle.
14  createParticle() {
15    noStroke();
16    // fill("rgba(0, 0, 0, 0.4)");
17    fill("#2b2d42");
18    circle(this.x, this.y, this.r);
19  }
20
21  // setting the particle in motion.
22  moveParticle() {
23    if (this.x < 0 || this.x > width) this.xSpeed *= -1;
24    if (this.y < 0 || this.y > height) this.ySpeed *= -1;
25    this.x += this.xSpeed;
26    this.y += this.ySpeed;
27  }
28
29  // this function creates the connections(lines)
30  // between particles which are less than a certain distance apart
31  joinParticles(particles) {
32    particles.forEach((element) => {
33      let dis = dist(this.x, this.y, element.x, element.y);
34      if (dis < 85) {
35        stroke("rgba(0,0,0,0.4)");
36        line(this.x, this.y, element.x, element.y);
37      }
38    });
39  }
40}
41
42// an array to add multiple particles
43let particles = [];
44
45function setup() {
46  createCanvas(window.innerWidth, window.innerHeight);
47  for (let i = 0; i < width / 10; i++) {
48    particles.push(new Particle());
49  }
50}
51
52function draw() {
53  background("#fff");
54  for (let i = 0; i < particles.length; i++) {
55    particles[i].createParticle();
56    particles[i].moveParticle();
57    particles[i].joinParticles(particles.slice(i));
58  }
59}