30:T499,{ let rules_b = createRules(3); // let rules_s = createRules(2, 3); let rules_s = createRules(4, 5, 6, 7, 8); let computeProgram = createProgram(gl, vs, fs_compute); createQuad(gl); let renderProgram = createProgram(gl, vs, fs_render); createQuad(gl); let oldState = createTexture(gl, initialState()); let newState = createTexture(gl, new ImageData(W, H)); let oldFb = createFramebuffer(gl, oldState); let newFb = createFramebuffer(gl, newState); let age = 0; while (true) { age++; gl.useProgram(computeProgram); gl.uniform1i(gl.getUniformLocation(computeProgram, "rules_b"), rules_b); gl.uniform1i(gl.getUniformLocation(computeProgram, "rules_s"), rules_s); gl.bindTexture(gl.TEXTURE_2D, oldState); gl.bindFramebuffer(gl.FRAMEBUFFER, newFb); gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); gl.useProgram(renderProgram); gl.uniform1i(gl.getUniformLocation(renderProgram, "age"), age); gl.bindTexture(gl.TEXTURE_2D, newState); gl.bindFramebuffer(gl.FRAMEBUFFER, null); gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); [oldState, oldFb, newState, newFb] = [newState, newFb, oldState, oldFb]; yield; } }31:T45b,fs_compute = ` #version 300 es precision mediump float; uniform sampler2D image; uniform int rules_b; uniform int rules_s; out vec4 fragColor; int unpack(vec4 val) { float lo = round(val.r * 255.0); float hi = round(val.g * 255.0); return int(lo + 256.0*hi); } vec4 pack(int val) { int hi = val / 256; int lo = val % 256; return vec4(float(lo)/255.0, float(hi)/255.0, 0, 0); } int fetch(ivec2 px) { ivec2 size = textureSize(image, 0); // texelFetch does not support wrapping, must be done manually vec4 color = texelFetch(image, (px+size)%size, 0); return unpack(color); } int neighbors(ivec2 px) { int n = 0; for (int dx = -1; dx <= 1; dx++) { for (int dy = -1; dy <= 1; dy++) { if (dx == 0 && dy == 0) { continue; } if (fetch(px + ivec2(dx, dy)) > 0) { n++; } } } return n; } void main() { ivec2 px = ivec2(gl_FragCoord.xy); int alive = fetch(px); int n = neighbors(px); int mask = 1 << n; if (alive > 0) { alive = (rules_s & mask) > 0 ? alive+1 : 0; } else { alive = (rules_b & mask) > 0 ? 1 : 0; } fragColor = pack(alive); }`.trim()32:[] 2e:{"title":"WebGL Game of Life","cells":[{"id":0,"value":"md`# WebGL Game of Life`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"W = width","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"H = 768","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"canvas = html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"function initialState() {\n const array = new Uint8ClampedArray(4 * W * H);\n const CX = W/2, CY = H/2;\n for (let y = 0; y < H; ++y) {\n for (let x = 0; x < W; ++x) {\n let idx = W * y + x << 2;\n// array[idx] = Math.random() > 0.5 ? 255 : 0;\n \t\tlet dx = (x-CX)/CX; \n\t\t\tlet dy = (y-CY)/CY;\n\t\t\tlet dist = Math.sqrt(dx*dx + dy*dy); // 0 - center, 1 - distant\n array[idx] = Math.random() > dist*2 ? 1 : 0;\n }\n }\n return new ImageData(array, W, H);\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"import { createProgram, createTexture, createQuad, createFramebuffer } from \"@ondras/webgl-utils\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"gl = canvas.getContext(\"webgl2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"function createRules(...args) {\n let rules = 0;\n args.forEach(num => rules += 1< 0) {\n vec3 hsv = vec3(float(value) / float(age) * 0.8, 1, 0.8);\n vec3 rgb = hsv2rgb(hsv);\n fragColor = vec4(rgb, 1);\n } else {\n fragColor = vec4(1, 1, 1, 1);\n }\n}\n`.trim()","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}