let limit = 15;

​

function setup() {

  createCanvas(400, 400);

  // Speed of motion

  let ampl = 100;

  // Randomise the color

  let colour = random(360);

​

  for (let j = 0; j <= limit; j++) {

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

      // Calculate the position of the circles on a grid

      let pos_x = floor(width / limit) * i;

      let pos_y = floor(height / limit) * j;

​

      // Create a varying period for periodic movement

      let period = 0.01 + i / 100;

      // let period = 0.05;

​

      // Map the angle based on the grid

      let ang = map(i, 0, limit, 0, TWO_PI);

​

      // Create a new Particle instance with the given parameters

      particles.push(

        new Particle(

          pos_x,

          pos_y,

          pos_x,

          pos_y,

          period,

          period,

          ang,

          0,

          ampl,

          ampl,

          colour

        )

      );

    }

  }

  background(220);

}

​

function draw() {

  background(220);

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

    noFill();

    for (let particle of particles) {

      particle.update();

      particle.show(); // Display the particles

    }

  }

}

​

class Particle {

  constructor(

    o_x,

    o_y,

    pos_x,

    pos_y,

    period_x,

    period_y,

    ang_x,

    ang_y,

    ampl_x,

    ampl_y,

    colour

  ) {

    this.origin = createVector(o_x, o_y);

    this.pos = createVector(pos_x, pos_y);

    this.angle = createVector(ang_x, ang_y);

    this.period = createVector(period_x, period_y);

    this.ampl = createVector(ampl_x, ampl_y);

    this.r = 15;

    this.colour = colour; // Particle's color

  }

​

  update() {

    let y = map(sin(this.angle.y), -1, 1, -this.ampl.y, this.ampl.y);

    let x = map(cos(this.angle.x), -1, 1, -this.ampl.x, this.ampl.x);

​

    this.pos.x = x + this.origin.x;

    this.angle.add(this.period); // Update the movement

  }

​

  show() {

    noStroke();

    // Set the fill color based on particle's color, and position on the grid

    fill(0);

    circle(this.pos.x, this.pos.y, this.r);

  }

}

​