Falling still

const NB = 500;

let points = [];

const coeff = 1.032;

const maxR = 2.1;

let bgColor = '#121212';

​

const colors = [

  [51, 92, 103],

  [255, 243, 176],

  [224, 159, 62],

  [158, 42, 43],

  [84, 11, 14],

];

​

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  pixelDensity(1);

  noStroke();

}

​

function initValues(){

  points = [new Part(width / 2, height / 2, Math.max(width, height) / 2)];

}

​

function draw() {

  background(bgColor)

​

  points.forEach((point) => point.updateAndDisplay());

​

  for (let i = points.length - 1; i > -1; i--) {

    const { x, y, w, hasChildren, colorIdx } = points[i];

    if (x < -w / 2 || x > width + w / 2 || y < -w / 2 || y > height + w / 2) {

      points.splice(i, 1);

    } else if (

      x - w / 2 < 0 &&

      x + w / 2 > width &&

      y - w / 2 < 0 &&

      y + w / 2 > height

    ) {

      const color = colors[colorIdx];

      bgColor = `rgb(${color[0]}, ${color[1]}, ${color[2]})`;

      points.splice(i, 1);

    } else if (

      !hasChildren &&

      w > maxR &&

      points.length < 1500 &&

      (points.length < 100 || Math.random() < 0.06)

    ) {

      const qqq = 0.499;

      const newR = w * qqq;

      const dxy = w / 4 - (w / 2 - newR) / 3;

      const nextColorIdx = (colorIdx + 1) % colors.length;

      points.push(new Part(x - dxy, y - dxy, newR, nextColorIdx));

      points.push(new Part(x - dxy, y + dxy, newR, nextColorIdx));

      points.push(new Part(x + dxy, y - dxy, newR, nextColorIdx));

      points.push(new Part(x + dxy, y + dxy, newR, nextColorIdx));

      points[i].hasChildren = true;

    }

  }

​

  if (points.length === 0) {

    initValues();

  }

}

​

class Part {

  constructor(x, y, w, colorIdx = 0) {

    this.x = x;

    this.y = y;

​

    this.w = w;

    this.minW = w;

​

    this.hasChildren = false;

    this.colorIdx = colorIdx;

​

    this.r = colors[colorIdx][0];

    this.g = colors[colorIdx][1];

    this.b = colors[colorIdx][2];

  }

​

  updateAndDisplay() {

    this.w *= coeff;

    const mx = mouseX || width/2;

    const my = mouseY || height/2;

    this.x = mx + (this.x - mx) * coeff;

    this.y = my + (this.y - my) * coeff;

    const alpha = map(this.w, this.minW, this.minW * 1.2, 0, 255);

    fill(this.r, this.g, this.b, alpha);

    rect(this.x - this.w / 2, this.y - this.w / 2, this.w, this.w);

  };

}