2d:null 2e:["$","title",null,{"children":"WebGL Game of Life | Ondřej Žára | Observable"}] 33: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; } }34: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()35:[] 31:{"id":"b77389f8e197f2ca","slug":"webgl-game-of-life","title":"WebGL Game of Life","thumbnail":"69bc269d28d872be5964f7bfbcaecb8cccb917b18323f5cb0d290853f9eee7cd","access_level":"public","create_time":"$D2018-07-27T08:13:40.891Z","update_time":"$D2018-09-21T12:32:24.383Z","view_time":null,"first_public_time":"$D2018-07-27T08:57:43.416Z","has_unpublished_edits":null,"fork":false,"stars":9,"starred":false,"owner":{"type":"team","id":"684af9aa3582e037","login":"ondras","name":"Ondřej Žára","avatar_url":"https://avatars-next.observableusercontent.com/e16e55e1b9bec7e9364e0c9e0f11636f268397300d09d92a82c9f18d75d3a69a","tier":"starter_2024"},"version":191,"publish_version":191,"role":null,"authored":false,"authors":[{"type":"individual","id":"e816d8f021aae566","login":"ondras","name":"Ondřej Žára","avatar_url":"https://avatars-next.observableusercontent.com/e16e55e1b9bec7e9364e0c9e0f11636f268397300d09d92a82c9f18d75d3a69a","tier":null}],"members":[{"type":"individual","id":"e816d8f021aae566","login":"ondras","name":"Ondřej Žára","avatar_url":"https://avatars-next.observableusercontent.com/e16e55e1b9bec7e9364e0c9e0f11636f268397300d09d92a82c9f18d75d3a69a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"71f9e740f3834095","slug":"webgl","title":"WebGL","owner":{"id":"684af9aa3582e037","login":"ondras","name":"Ondřej Žára"}},"type":"notebook","body":{"title":"WebGL Game of Life","cells":[{"id":0,"value":"md`# WebGL Game of Life`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"W = width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"H = 768","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"canvas = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"import { createProgram, createTexture, createQuad, createFramebuffer } from \"@ondras/webgl-utils\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"gl = canvas.getContext(\"webgl2\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"