JSFiddle - React, Tailwind, and code Playground

Water

by schrodingers

CSS

body {
  margin: 0;
  overflow: hidden;
}

JavaScript

// Water, ripples on mouseClick

var quality = 4;

var container, canvas, context, imageData;
var buffer1, buffer2, tempbuffer;
var WIDTH, HEIGHT;

var isMouseDown, mouseX, mouseY;

init();
setInterval(loop, 1000 / 60);

function init() {
  container = document.getElementById('container');

  WIDTH = Math.floor(window.innerWidth / quality);
  HEIGHT = Math.floor(window.innerHeight / quality);

  buffer1 = new Array();
  buffer2 = new Array();

  for (var i = 0; i < WIDTH * HEIGHT; i++) {
    buffer1[i] = 0;
    buffer2[i] = i > WIDTH && i < (WIDTH * HEIGHT) - WIDTH && Math.random() > 0.995 ? 255 : 0;
  }

  canvas = document.createElement("canvas");
  canvas.width = WIDTH;
  canvas.height = HEIGHT;
  canvas.style.width = window.innerWidth + "px";
  canvas.style.height = window.innerHeight + "px";
  document.body.appendChild(canvas);

  context = canvas.getContext("2d");
  context.fillStyle = "rgb(0, 0, 0)";
  context.fillRect(0, 0, WIDTH, HEIGHT);
  imageData = context.getImageData(0, 0, WIDTH, HEIGHT);

  branches = new Array();

  window.addEventListener('mousedown', onMouseDown, false);
  window.addEventListener('mouseup', onMouseUp, false);
  window.addEventListener('mousemove', onMouseMove, false);
  window.addEventListener('keyup', onKeyUp, false);
}

//

function onMouseDown(e) {

  isMouseDown = true;
}

function onMouseUp(e) {
  isMouseDown = false;
}

function onMouseMove(e) {
  if (!e) var e = window.event;
  mouseX = Math.floor(e.clientX / quality);
  mouseY = Math.floor(e.clientY / quality);
}

function onKeyUp(e) {
  emit(Math.floor(Math.random() * WIDTH), Math.floor(Math.random() * HEIGHT));
}

//

function emit(x, y) {
  buffer1[x + (y * WIDTH)] = 255;
}

function loop() {
  if (isMouseDown)
    emit(mouseX, mouseY);


  for (var i = WIDTH; i < (WIDTH * HEIGHT) - WIDTH; i++) {
    buffer2[i] = ((buffer1[i - 1] + buffer1[i + 1] + buffer1[i - WIDTH] + buffer1[i + WIDTH]) >> 1) - buffer2[i];
    buffer2[i] -= buffer2[i] >> 20;

    imageData.data[(i...