2e:null 2f:["$","title",null,{"children":"Clifford Attractor II | Mike Bostock | Observable"}] 34:T48a,viewof settings = { const form = html``; form.value = {}; form.oninput = () => { form.oa.value = (form.value.a = form.a.valueAsNumber).toFixed(4); form.ob.value = (form.value.b = form.b.valueAsNumber).toFixed(4); form.oc.value = (form.value.c = form.c.valueAsNumber).toFixed(4); form.od.value = (form.value.d = form.d.valueAsNumber).toFixed(4); }; form.oninput(); return form; }35:[] 32:{"id":"b64b3c297f15a1b4","slug":"clifford-attractor-ii","title":"Clifford Attractor II","thumbnail":"98cfdecd8bbd7c619d08b342c4ba908f5ecd801d73ffb35987f951771a8c0ca7","access_level":"public","create_time":"$D2017-12-27T22:11:32.683Z","update_time":"$D2021-09-26T18:47:12.753Z","view_time":null,"first_public_time":"$D2017-12-28T06:03:48.987Z","has_unpublished_edits":null,"fork":{"id":"ac9c79d1b2b1312e","slug":"fitzhugh-nagumo-maze","title":"FitzHugh–Nagumo Maze","owner":{"id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock"}},"stars":5,"starred":false,"owner":{"type":"team","id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":"pro_2026"},"version":784,"publish_version":784,"role":null,"authored":false,"authors":[{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null}],"members":[{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":9,"collection":null,"type":"notebook","body":{"title":"Clifford Attractor II","cells":[{"id":0,"value":"md`# Clifford Attractor II\n\nUsing WebGL to simulate ${(K * K).toLocaleString()} particles in realtime!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":782,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"viewof gl = {\n const height = width;\n const canvas = document.createElement(\"canvas\");\n canvas.width = width * devicePixelRatio;\n canvas.height = height * devicePixelRatio;\n canvas.style = `width: ${width}px; height: ${height}px`;\n const gl = canvas.value = canvas.getContext(\"webgl\", {antialias: false, depth: false});\n gl.getExtension(\"OES_texture_float\");\n return canvas;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"{\n gl.enableVertexAttribArray(timestepPosition);\n gl.enableVertexAttribArray(renderPosition);\n for (let i = 0; true; ++i) {\n gl.useProgram(timestepProgram);\n gl.viewport(0, 0, K, K);\n if (i & 1) {\n gl.bindFramebuffer(gl.FRAMEBUFFER, fb1);\n gl.bindTexture(gl.TEXTURE_2D, t2);\n } else {\n gl.bindFramebuffer(gl.FRAMEBUFFER, fb2);\n gl.bindTexture(gl.TEXTURE_2D, t1);\n }\n gl.bindBuffer(gl.ARRAY_BUFFER, qb);\n gl.vertexAttribPointer(timestepPosition, 2, gl.FLOAT, false, 0, 0);\n gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);\n if (i < 8) continue;\n gl.useProgram(renderProgram);\n gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);\n gl.bindFramebuffer(gl.FRAMEBUFFER, null);\n gl.bindBuffer(gl.ARRAY_BUFFER, ib);\n gl.vertexAttribPointer(renderPosition, 2, gl.UNSIGNED_SHORT, false, 0, 0);\n gl.drawArrays(gl.POINTS, 0, K * K);\n yield;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"timestepFragmentShader = {\n const shader = gl.createShader(gl.FRAGMENT_SHADER);\n gl.shaderSource(shader, `\nprecision mediump float;\nuniform sampler2D u_image;\nuniform vec2 u_size;\nuniform float u_a;\nuniform float u_b;\nuniform float u_c;\nuniform float u_d;\nvoid main() {\n vec2 v = texture2D(u_image, gl_FragCoord.xy / u_size).xy;\n gl_FragColor = vec4(\n sin(u_a * v.y) + u_c * cos(u_a * v.x),\n sin(u_b * v.x) + u_d * cos(u_b * v.y),\n 0.0,\n 0.0\n );\n}\n`);\n gl.compileShader(shader);\n return shader;\n} ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"timestepVertexShader = {\n const shader = gl.createShader(gl.VERTEX_SHADER);\n gl.shaderSource(shader, `\nattribute vec2 a_position;\nvoid main() {\n gl_Position = vec4(a_position, 0.0, 1.0);\n}\n`);\n gl.compileShader(shader);\n return shader;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"renderFragmentShader = {\n const shader = gl.createShader(gl.FRAGMENT_SHADER);\n gl.shaderSource(shader, `\nvoid main() {\n gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);\n}\n`);\n gl.compileShader(shader);\n return shader;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":351,"value":"renderVertexShader = {\n const shader = gl.createShader(gl.VERTEX_SHADER);\n gl.shaderSource(shader, `\nuniform sampler2D u_image;\nuniform vec2 u_size;\nattribute vec2 a_position;\nvoid main() {\n gl_Position = vec4(texture2D(u_image, a_position / u_size).xy, 0.0, ${Math.PI});\n gl_PointSize = 1.0;\n}\n`);\n gl.compileShader(shader);\n return shader;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"K = 512 * (devicePixelRatio > 1 ? 2 : 1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"qb = {\n const buffer = gl.createBuffer();\n gl.bindBuffer(gl.ARRAY_BUFFER, buffer);\n gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]), gl.STATIC_DRAW);\n gl.bindBuffer(gl.ARRAY_BUFFER, null);\n return buffer;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"ib = {\n const array = new Uint16Array(2 * K * K);\n for (let i = -1, y = 0; y < K; ++y) {\n for (let x = 0; x < K; ++x) {\n array[++i] = x;\n array[++i] = y;\n }\n }\n const buffer = gl.createBuffer();\n gl.bindBuffer(gl.ARRAY_BUFFER, buffer);\n gl.bufferData(gl.ARRAY_BUFFER, array, gl.STATIC_DRAW);\n gl.bindBuffer(gl.ARRAY_BUFFER, null);\n return buffer;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":780,"value":"a1 = {\n const array = new Float32Array(4 * K * K);\n for (let y = 0, i = 0; y < K; ++y) {\n for (let x = 0; x < K; ++x, i += 4) {\n array[i + 0] = Math.random();\n array[i + 1] = Math.random();\n }\n }\n return array;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"t1 = {\n settings; // Reinitialize on interaction.\n const texture = gl.createTexture();\n gl.bindTexture(gl.TEXTURE_2D, texture);\n gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);\n gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);\n gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);\n gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);\n gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, K, K, 0, gl.RGBA, gl.FLOAT, a1);\n gl.bindTexture(gl.TEXTURE_2D, null);\n return texture;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"t2 = {\n const texture = gl.createTexture();\n gl.bindTexture(gl.TEXTURE_2D, texture);\n gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);\n gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);\n gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);\n gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);\n gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, K, K, 0, gl.RGBA, gl.FLOAT, null);\n gl.bindTexture(gl.TEXTURE_2D, null);\n return texture;\n} ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"fb1 = {\n const framebuffer = gl.createFramebuffer();\n gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);\n gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, t1, 0);\n gl.bindFramebuffer(gl.FRAMEBUFFER, null);\n return framebuffer;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"fb2 = {\n const framebuffer = gl.createFramebuffer();\n gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);\n gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, t2, 0);\n gl.bindFramebuffer(gl.FRAMEBUFFER, null);\n return framebuffer;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"renderProgram = {\n const program = gl.createProgram();\n gl.attachShader(program, renderVertexShader);\n gl.attachShader(program, renderFragmentShader);\n gl.linkProgram(program);\n gl.useProgram(program);\n gl.uniform2f(gl.getUniformLocation(program, \"u_size\"), K, K);\n gl.useProgram(null);\n return program;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":572,"value":"renderPosition = gl.getAttribLocation(renderProgram, \"a_position\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"timestepProgram = {\n const program = gl.createProgram();\n gl.attachShader(program, timestepVertexShader);\n gl.attachShader(program, timestepFragmentShader);\n gl.linkProgram(program);\n gl.useProgram(program);\n gl.uniform2f(gl.getUniformLocation(program, \"u_size\"), K, K);\n gl.uniform1f(gl.getUniformLocation(program, \"u_a\"), settings.a);\n gl.uniform1f(gl.getUniformLocation(program, \"u_b\"), settings.b);\n gl.uniform1f(gl.getUniformLocation(program, \"u_c\"), settings.c);\n gl.uniform1f(gl.getUniformLocation(program, \"u_d\"), settings.d);\n gl.useProgram(null);\n return program;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":563,"value":"timestepPosition = gl.getAttribLocation(timestepProgram, \"a_position\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"