Fallin'

const NB = 400;

let points = [];

const coeff = 1.025;

let inverted = false;

const c1 = 'rgba(18,18,18,';

const c2 = 'rgba(255,20,100,';

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  pixelDensity(1);

  noStroke();

  points = new Array(NB)

    .fill(0)

    .map((_) => new Part());

}

​

function draw() {

  background((inverted ? c2 : c1) + '1)');

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

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

  let doInvert = false;

  for (let i = 0; i < points.length; i++) {

    const { x, y, r } = points[i];

    if (x < -r || x > width + r || y < -r || y > height + r) {

      points[i] = new Part();

    }

​

    if (r > Math.max(height, width) / 2) {

      const r2 = r ** 2;

      const d1 = x ** 2 + y ** 2; // top left

      const d2 = (x - width) ** 2 + y ** 2; // top right

      const d3 = x ** 2 + (y - height) ** 2; // bottom left

      const d4 = (x - width) ** 2 + (y - height) ** 2; // bottom right

      if (d1 < r2 && d2 < r2 && d3 < r2 && d4 < r2) {

        doInvert = true;

        break;

      }

    }

  }

​

  if (doInvert) {

    inverted = !inverted;

    points = new Array(NB)

      .fill(0)

      .map((_) => new Part());

  }

}

​

class Part {

  constructor() {

    this.x = random(width);

    this.y = random(height);

​

    this.minR = random(0.8, 3);

    this.r = this.minR;

  }

​

  update() {

    const mx = mouseX || width/2;

    const my = mouseY || height/2;

    if (this.r > 10000) {

      const d = Math.sqrt((this.x - mx) ** 2 + (this.y - my) ** 2);

      const qqqx = this.x - ((this.x - mx) / d) * this.r;

      const qqqy = this.y - ((this.y - my) / d) * this.r;

      this.x -= (mx - qqqx) * (coeff - 1);

      this.y -= (my - qqqy) * (coeff - 1);

    } else {

      this.r *= coeff;

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

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

    }

  };

​

  display() {

    const alpha = map(this.r, this.minR, this.minR * 1.5, 0, 1);

    fill((inverted ? c1 : c2) + alpha + ')');

    circle(this.x, this.y, this.r * 2);

  };

}