28:null 29:["$","title",null,{"children":"WebGL Game of Life | Jeff Baumes | Observable"}] 2e:T442,{ let rules_b = createRules(3); // let rules_s = createRules(2, 3); let rules_s = createRules(0, 1, 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); while (true) { 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.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; } }2f:T44e,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) { // return (val.r > 0.0 ? 1 : 0); return int(round((1.0 - val.r) * 255.0)); } vec4 pack(int val) { // return vec4(val > 0 ? 1 : 0, 0, 0, 0); return vec4(1.0 - float(val)/255.0, 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)) == 255) { 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 == 255) { alive = (rules_s & mask) > 0 ? alive-1 : 255; } else { alive = (rules_b & mask) > 0 ? 255 : alive-1; } fragColor = pack(alive); }`.trim()30:[] 2c:{"id":"0fdb8ae9c07660e0","slug":"webgl-game-of-life","title":"WebGL Game of Life","thumbnail":"a39b70afc25253196e323db84ee2076d1ef2f747c24af6df986e0e6f626eab70","access_level":"public","create_time":"$D2018-07-27T14:00:04.544Z","update_time":"$D2018-09-01T18:31:10.306Z","view_time":null,"first_public_time":"$D2018-07-27T14:02:04.672Z","has_unpublished_edits":null,"fork":{"id":"b77389f8e197f2ca","slug":"webgl-game-of-life","title":"WebGL Game of Life","owner":{"id":"684af9aa3582e037","login":"ondras","name":"Ondřej Žára"}},"stars":1,"starred":false,"owner":{"type":"team","id":"e2d656a3355b8613","login":"jeffbaumes","name":"Jeff Baumes","avatar_url":"https://avatars-next.observableusercontent.com/d6a8e1a24059997c2c6b6b13f9e886f9c8b779b2eef91ecb0ea60d93ce69518e","tier":"starter_2024"},"version":223,"publish_version":223,"role":null,"authored":false,"authors":[{"type":"individual","id":"431f4e2db5423400","login":"jeffbaumes","name":"Jeff Baumes","avatar_url":"https://avatars-next.observableusercontent.com/d6a8e1a24059997c2c6b6b13f9e886f9c8b779b2eef91ecb0ea60d93ce69518e","tier":null}],"members":[{"type":"individual","id":"431f4e2db5423400","login":"jeffbaumes","name":"Jeff Baumes","avatar_url":"https://avatars-next.observableusercontent.com/d6a8e1a24059997c2c6b6b13f9e886f9c8b779b2eef91ecb0ea60d93ce69518e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"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 = W","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":"$2e","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)/Math.min(CX, CY); \n\t\t\tlet dy = (y-CY)/Math.min(CX, CY);\n\t\t\tlet dist = Math.sqrt(dx*dx + dy*dy); // 0 - center, 1 - distant\n array[idx] = x === W/2 || y === H/2 ? 0 : 255;\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.0 ? 0 : 1);\n float col = value;\n fragColor = vec4(col, col, col, 1);\n}\n`.trim()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2d:"$2c:body"