let t = 0; // time variable

​

function setup() {

  createCanvas(600, 600);

  c2 = color(63,94,251);

  c1 = color(252,70,107);

  // noStroke();

  // fill(40, 200, 40);

}

​

function draw() {

  background(10, 10); // translucent background (creates trails)

​

  // make a x and y grid of ellipses

  for (let x = 0; x <= width; x = x + 400) {

    for (let y = 0; y <= height; y = y +400) {

      // starting point of each circle depends on mouse position

      const xAngle = map(mouseX, 0, width, -4 * PI, 4 * PI, true);

      const yAngle = map(mouseY, 0, height, -4 * PI, 4 * PI, true);

      // and also varies based on the particle's location

      const angle = xAngle * (x / width) + yAngle * (y / height);

      const distance = (mouseX-x)*(mouseX-x) + (mouseY-y)*(mouseY-y);

      const r = map(distance, 0,width*width+height*height, 800,0);

​

      // each particle moves in a circle

      const myX = x + 20 * cos(2 * PI * t + angle);

      const myY = y + 20 * sin(2 * PI * t + angle);

​

      ellipse(myX, myY, r); // draw particle

      strokeWeight(2);

      var inter = map(distance, 0, width*width+height*height,0,1);

      var colorCircle = lerpColor(c1,c2,inter);

      stroke(colorCircle);

      fill(colorCircle);

      // noFill();

    }

  }

​

  t = t + 0.01; // update time

}

​

​