var ctx, w, h; const cellsWidth = 50; const cellsHeight = 50; var cells; class CellularAutomata { constructor(width, height, boundary = 0) { this.width = width; this.height = height; let size = this.size = width * height; this.data = new Float32Array(size); this.newData = new Float32Array(size); this.boundary = boundary; } getAt(xi, yi) { if (0 <= xi && xi < this.width && 0 <= yi && yi < this.height) return this.data[yi * this.width + xi]; else return this.boundary; } setAt(xi, yi, value) { if (0 <= xi && xi < this.width && 0 <= yi && yi < this.height) this.newData[yi * this.width + xi] = value; } adjAt(xi, yi, value) { if (0 <= xi && xi < this.width && 0 <= yi && yi < this.height) this.newData[yi * this.width + xi] += value; } // calls callback(value, xi, yi) forEach(callback) { let xi, yi, index, value; for (yi = 0; yi < this.height; yi++) for (xi = 0; xi < this.width; xi++) { index = yi * this.width + xi; value = this.data[index]; callback(value, xi, yi); } } swapBuffers() { this.data.set(this.newData); } } function init() { // initialize cells cells = new CellularAutomata(cellsWidth, cellsHeight); setInterval(() => { let xi = Math.floor(Math.random() * cellsWidth); let yi = Math.floor(Math.random() * cellsHeight); cells.setAt(xi, yi, 15); }, 300); } function update() { let viscosity = 5 * 1 / 60; cells.forEach((value, xi, yi) => { let dpx = value - cells.getAt(xi + 1, yi); let dpy = value - cells.getAt(xi, yi + 1); let dmx = dpx * viscosity; let dmy = dpy * viscosity; cells.adjAt(xi, yi, -dmx -dmy); cells.adjAt(xi + 1, yi, dmx); cells.adjAt(xi, yi + 1, dmy); }); 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, w, h); cells.forEach((value, xi, yi) => { // actual colors are stored in array let c = clampInt(value, 0, 1, 255); ctx.fillStyle = `rgb(${c}, ${c}, ${c})`; ctx.fillRect(xi, yi, 1, 1); }); } function mainloop() { update(); render(); window.requestAnimationFrame(mainloop); } window.onload = function() { let cvs = document.querySelector("canvas"); w = cvs.width = cellsWidth; h = cvs.height = cellsHeight; v = Math.min(w, h); cvs.style.width = Math.round(innerWidth * v / w) + "px"; cvs.style.height = Math.round(innerHeight * v / h) + "px"; ctx = cvs.getContext("2d"); init(); mainloop(); }

first emulation (Cellular Automata)