const canvasY = 400;

const baseR = 30;

​

const canvasXhalf = canvasX / 2;

const canvasYhalf = canvasY / 2;

const baseRhalf = baseR / 2;

​

const rgbMax = 255;

const rgbHalf1 = rgbMax / 2;

const rgbHalf2 = rgbMax - rgbHalf1;

​

function setup() {

  createCanvas(canvasX, canvasY);

  noStroke();

}

​

function draw() {

  background(0, 0, 0, 10);

  for (let y = -baseR; y < canvasY + baseR; y++) {

    let cr = rgbHalf1 + rgbHalf2 * sin(y / 20);

    let cg = rgbHalf1 + rgbHalf2 * sin(y / 15);

    let cb = rgbHalf1 + rgbHalf2 * sin(y / 10);

    fill(cr, cg, cb);

    let x = canvasXhalf + (sin(frameCount / 100 + y / 50) * 0.9 + cos(frameCount / 100) * 0.1) * canvasXhalf;

    let r = baseRhalf + baseRhalf * sin(frameCount / 100 + y / 50) * 0.5;

    circle(x, y, r);

  }

}

​