Vanishing Dots

const sketch = {

  fps: 30, // frames per second

  fpp: () => sketch.fps * sketch.duration, // frames per period

  duration: 12 // seconds

};

​

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 g = createGraphics(width, height);

  drawGraphics(g);

  image(g, 0, 0);

}

​

function drawGraphics(g) {

  push();

  const size = g.width;

  const scale = size / 20;

  const rows = g.height / scale;

  const cols = g.width / scale;

  const bg = [0, 0, 30];

  const fg = color([280, 45, 80]);

  g.colorMode(HSB);

  g.background(bg);

  g.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(constrain(clock.tan(clock.time() + rp * cp * 10), 0, 1), 0, 1, hue(fg) - 50, hue(fg) + 50);

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

​

      let s = constrain(clock.tan(clock.time() - rp * cp * 250), 0, 0.75) * scale * cd / (g.width / 2);

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

      g.ellipse(x, y, s, s);

    }

  }

}