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); } foldAt(xi, yi, offset, matrix) { let g = this.getAt.bind(this); return g(xi - 1, yi - 1, offset) * matrix[0] + g(xi, yi - 1, offset) * matrix[1] + g(xi + 1, yi - 1, offset) * matrix[2] + g(xi - 1, yi, offset) * matrix[3] + g(xi, yi, offset) * matrix[4] + g(xi + 1, yi, offset) * matrix[5] + g(xi - 1, yi + 1, offset) * matrix[6] + g(xi, yi + 1, offset) * matrix[7] + g(xi + 1, yi + 1, offset) * matrix[8]; } fold(matrix) { let xi, yi, data = this.data; let val; for (yi = 0; yi < this.height; yi++) { for (xi = 0; xi < this.width; xi++) { val = this.foldAt(xi, yi, 0, matrix); this.setAt(xi, yi, 0, val); } } } swapBuffers() { this.data.set(this.newData); } } function init() { cells = new CellularAutomata ( cellsWidth, cellsHeight, [0], 1 ); cells.forEach((xi, yi) => { // init here if ((xi == 8) || (yi == 12)) cells.setAt(xi, yi, 0, 10); }); cells.swapBuffers(); } function update() { const k = 4 * dt; cells.fold([ -k, 0.1*k, 0, 0.1*k, 1 - 2*k, k, 0, k, -k ]); 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() { let v; ctx.fillStyle = "gray"; ctx.fillRect(0, 0, ctx.w, ctx.h); cells.forEach((xi, yi) => { v = cells.getAt(xi, yi, 0); v = Math.tanh(v); v = (v + 1) / 2 * 256; ctx.fillStyle = `rgb(${v}, ${v}, ${v})`; 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(); }

third emulation (Cellular Automata)