var ctx, cells; const cellsWidth = 80; const cellsHeight = 80; const dt = 1 / 60; const shadeAmount = 6; class CellularAutomata { constructor(width, height, boundary = [0], floatsAmount = 1) { this.width = width; this.height = height; this.floatsAmount = floatsAmount; let size = this.size = width * height * floatsAmount; this.data = new Float32Array(size); this.newData = new Float32Array(size); this.boundary = boundary; } getAt(xi, yi, offset) { if (0 <= xi && xi < this.width && 0 <= yi && yi < this.height && 0 <= offset && offset < this.floatsAmount) return this.data[(yi * this.width + xi) * this.floatsAmount + offset]; else return this.boundary[offset]; } setAt(xi, yi, offset, value) { if (0 <= xi && xi < this.width && 0 <= yi && yi < this.height && 0 <= offset && offset < this.floatsAmount) this.newData[(yi * this.width + xi) * this.floatsAmount + offset] = value; } adjAt(xi, yi, offset, value) { if (0 <= xi && xi < this.width && 0 <= yi && yi < this.height && 0 <= offset && offset < this.floatsAmount) this.newData[(yi * this.width + xi) * this.floatsAmount + offset] += value; } // calls callback(xi, yi) forEach(callback) { let xi, yi; for (yi = 0; yi < this.height; yi++) for (xi = 0; xi < this.width; xi++) callback(xi, yi); } swapBuffers() { this.data.set(this.newData); } } function init() { // initialize cells cells = new CellularAutomata(cellsWidth, cellsHeight); for (let i = 0; i < 20; i++) { let xi = Math.floor(Math.random() * ctx.w); let yi = Math.floor(Math.random() * 0.5 * ctx.h); cells.setAt(xi, yi, 0, 50); } cells.swapBuffers(); } function update() { let value, under, dv; const maxWaterCapacity = 1; const fallSpeed = 10; const flowSpeed = 40; function waterCallback(xi, yi) { value = cells.getAt(xi, yi, 0); if (yi + 1 != ctx.h) { under = cells.getAt(xi, yi + 1, 0); if (under < maxWaterCapacity * (1 + 0.1 * (ctx.h - yi))) { // simulate gravity dv = fallSpeed * value * dt; cells.adjAt(xi, yi, 0, -dv); cells.adjAt(xi, yi + 1, 0, dv); } { // simulate flow in horizontal directions dv = 0.5 * flowSpeed * value * dt; if (xi - 1 >= 0) { cells.adjAt(xi, yi, 0, -dv); cells.adjAt(xi - 1, yi, 0, dv); } if (xi + 1 < ctx.w) { cells.adjAt(xi, yi, 0, -dv); cells.adjAt(xi + 1, yi, 0, dv); } } } else { // sligtly decrease water level cells.adjAt(xi, yi, 0, -0.02 * fallSpeed * dt); } } for (let i = 0; i < 5; i++) { cells.forEach(waterCallback); cells.swapBuffers(); } } function clampInt(value, min, max, steps) { value = Math.max(min, Math.min(max, value)); return Math.floor(steps * value / (max - min)); } function render() { ctx.fillStyle = "black"; ctx.fillRect(0, 0, ctx.w, ctx.h); cells.forEach((xi, yi) => { // actual colors are stored in array let v = cells.getAt(xi, yi, 0); v = clampInt(v, 0, 1, shadeAmount) / shadeAmount; v = clampInt(v, 0, 1, 255); ctx.fillStyle = `rgb(${255-v}, ${255-0.25*v}, 255)`; ctx.fillRect(xi, yi, 1, 1); }); } function mainloop() { update(); render(); window.requestAnimationFrame(mainloop); } window.onload = function() { let cvs = document.querySelector("canvas"); ctx = cvs.getContext("2d"); ctx.w = cvs.width = cellsWidth; ctx.h = cvs.height = cellsHeight; let v = Math.min(ctx.w, ctx.h); cvs.style.width = Math.round(innerWidth * v / ctx.w) + "px"; cvs.style.height = Math.round(innerHeight * v / ctx.h) + "px"; // add interactivity cvs.ontouchmove = function(e) { let xt = e.touches[0].pageX - cvs.offsetLeft; let yt = e.touches[0].pageY - cvs.offsetTop; let xi = Math.floor(xt * ctx.w / innerWidth); let yi = Math.floor(yt * ctx.h / innerHeight); cells.adjAt(xi, yi, 0, 10); } cvs.onmousemove = function(e) { let xm = e.pageX - cvs.offsetLeft; let ym = e.pageY - cvs.offsetTop; let xi = Math.floor(xm * ctx.w / innerWidth); let yi = Math.floor(ym * ctx.h / innerHeight); cells.adjAt(xi, yi, 0, 10); } init(); mainloop(); }

second emulation (Cellular Automata)