Ripples of Raindrops

const color0 = new Uint8Array([255,255,255,255]);

const color1 = new Uint8Array([0,0,0,255]);

const r = 300;

const brushRadius = 20;

let grid = new Uint8Array(r * r);

let zoom;

​

function setup() {

  const m = min(windowWidth, windowHeight);

  createCanvas(m, m);

  background(255);

  pixelDensity(zoom = r / m);

  loadPixels();

  grid = grid.map(e => random(256));

}

​

function draw() {

  const newGrid = new Uint8Array(grid);

  for (let y = 1; y < r - 1; y++) {

    for (let x = 1; x < r - 1; x++) {

      const i = x + y * r;

      const oldValue = grid[i];

      const sum =

        + grid[i - r] 

        + grid[i - 1] 

        + grid[i + 1] 

        + grid[i + r] 

        + grid[i - 1 - r] 

        + grid[i + 1 - r] 

        + grid[i - 1 + r] 

        + grid[i + 1 + r];

      const average = floor(sum / 8);

      const newValue = (average + 1) & 0xff;

      newGrid[i] = newValue;

      const col = sin(1 + newValue / 4) > sin(oldValue / 4) ? color0 : color1;

      pixels.set(col, i * 4);

    }

  }

  grid = newGrid;

  updatePixels();

}

​

function mouseDragged() {

  for (let dy = -brushRadius; dy <= brushRadius; dy++) {

    for (let dx = -brushRadius; dx <= brushRadius; dx++) {

      if (dx ** 2 + dy ** 2 > brushRadius ** 2) continue;

      const x = floor(mouseX * zoom + dx);

      const y = floor(mouseY * zoom + dy);

      if (0 <= x && x < r && 0 <= y && y < r) grid[x + y * r] = random(256);

    }

  }

}

​