* @name Particles

 * @arialabel Small light grey circles connected by thin lines floating around a black background

 * @description 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.

 */

​

// 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(4, 12);

    this.xSpeed = random(-2, 2);

    this.ySpeed = random(-1, 1.5);

    this.color = [random(0, 255), random(0, 255), random(0, 255)];

  }

​

  // creation of a particle.

  createParticle() {

    stroke("white");

    fill(this.color);

    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 < 185) {

        stroke("rgb(155,202,246)");

        line(this.x, this.y, element.x, element.y);

        line(this.x, this.y, element.x, this.y)

        line(this.x, this.y, this.x, element.y)

        line(this.x, element.y, element.x, element.y)

        line(element.x, this.y, element.x, element.y)

        //circle(this.x, this.y, this.r*3)

        noStroke()

        arc(this.x, this.y, this.r*2, this.r*2, PI + QUARTER_PI, TWO_PI)

        arc(this.x, this.y, this.r*2, this.r*2, QUARTER_PI, PI)

      }

    });

  }

}

​

// an array to add multiple particles

let particles = [];

​

function setup() {

  createCanvas(720, 720);

  for (let i = 0; i < 20; i++) {

    particles.push(new Particle());

  }

}

​

function draw() {

  background("#202235");

  for (let i = 0; i < particles.length; i++) {

    particles[i].joinParticles(particles.slice(i));

    particles[i].createParticle();

    particles[i].moveParticle();

  }

}

​

function keyPressed() {

  if (key === "s") {

    saveGif("mySketch", 10, {

    });

  }

}

​