function setup() {

  let vaporwave = [

    // (220, 220, 220),

    "#ff71ce",

    "#01cdfe",

    "#05ffa1",

    "#b967ff",

    "#fffb96",

  ];

​

  createCanvas(800, 1000);

  background(20);

  // stroke(220);

  noFill();

  noStroke();

​

   d = width * 0.05;

   r = d / 2;

​

  circles = [];

​

  for (let y = r; y < height; y += d) {

    let idx = map(y, r, height, 0, vaporwave.length);

    idx = int(constrain(idx, 0, vaporwave.length - 1));

    let c = color(vaporwave[idx]);

    for (let x = r; x < width; x += d) {

      // circle(x, y, d);

      let t = int(random(100, 500));

      circles.push({

        timeout: t,

        timestart: t,

        x: x,

        y: y,

        c: c,

        c2: color(random(vaporwave)),

        dir:false,

      });

    }

  }

  // noLoop();

}

​

function draw() {

  background(20);

  for (let c of circles) {

    let _c = lerpColor(c.c, c.c2, map(c.timeout, c.timestart, 0, 0.0, 1.0));

    fill(_c);

    let x = c.x;

    let y = c.y;

    if (random(0,1000) > 995) {

      x += random(-2,2);

      y += random(-2,2);

    }

    circle(x, y, r);

    if (c.dir) c.timeout++;

    else c.timeout--;

    if (c.timeout < 0) {

      c.timeout = 0;

      c.dir = !c.dir;

    }

    if (c.timeout > c.timestart) {

      c.timeout = c.timestart;

      c.dir = !c.dir;

    }

  }

}

​