Dancing Dots

const sketch = {

  fps: 30, // frames per second

  fpp: () => 30 * 5, // frames per period

};

​

let clock;

let noiseloop;

let rows, cols, scale;

function setup() {

  const size = 600;

  createCanvas(size, size);

  colorMode(HSB);

  frameRate(sketch.fps);

  clock = new PeriodicFrameClock(sketch.fpp());

  noiseloop = clock.createNoiseLoop("main", 0.5);

  scale = size/20;

  rows = height / scale;

  cols = width / scale;

}

function draw() {

  const bg = [0,0,30];

  const fg = color([212,58,60]);

  background(bg);

  noStroke();

  const inc = 20;

  for (let c = 1; c < cols; c++) {

    const cp = c/cols;

    for (let r = 1; r < rows; r++) {

      const rp = r/cols;

      const x = c * scale;

      const y = r * scale;

​

      const h = map(clock.sin(clock.time()), -1, 1, hue(fg) - 30, hue(fg) + 30);

      const cd = dist(width/2,height/2,x,y);

      const td = dist(width/2,0,x,y);

      const bd = dist(width/2,height,x,y);

      const s = map(clock.cos(clock.time(cd/(3*scale))) + 

                    clock.sin(clock.time(bd/(5*scale))) +

                    clock.cos(clock.time(td/(8*scale))), 

                    -3, 3, scale*0.01, scale);

      fill([cp*h, rp*saturation(fg), brightness(fg)]);

      ellipse(x, y, s, s);

    }

  }

}