2c:null 2d:["$","title",null,{"children":"Clifford Attractor III | K Lindberg | Observable"}] 32:[] 30:{"id":"8c937486571b95d4","slug":null,"title":"Clifford Attractor III","thumbnail":"c74dbd0b54c7a91aa06c5c24cef265d149420d176774f9a997389d3f71864b9b","access_level":"public","create_time":"$D2018-05-20T19:54:50.699Z","update_time":"$D2018-05-20T19:54:50.699Z","view_time":null,"first_public_time":"$D2025-05-05T20:23:10.439Z","has_unpublished_edits":null,"fork":{"id":"e2e973a3f1f4488b","slug":"clifford-attractor-iii","title":"Clifford Attractor III","owner":{"id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock"}},"stars":0,"starred":false,"owner":{"type":"team","id":"63f5a83fdb550e46","login":"essingen123","name":"K Lindberg","avatar_url":"https://avatars-next.observableusercontent.com/f32fa345052e3b48114aa58703cb58d8886d6a48bd89a61b2892d012f73b0b53","tier":"starter_2024"},"version":690,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"dca00f83ab125ba4","login":"essingen123","name":"K Lindberg","avatar_url":"https://avatars-next.observableusercontent.com/f32fa345052e3b48114aa58703cb58d8886d6a48bd89a61b2892d012f73b0b53","tier":null}],"members":[{"type":"individual","id":"dca00f83ab125ba4","login":"essingen123","name":"K Lindberg","avatar_url":"https://avatars-next.observableusercontent.com/f32fa345052e3b48114aa58703cb58d8886d6a48bd89a61b2892d012f73b0b53","tier":null,"role":"editor"},{"type":"team","id":"63f5a83fdb550e46","login":"essingen123","name":"K Lindberg","avatar_url":"https://avatars-next.observableusercontent.com/f32fa345052e3b48114aa58703cb58d8886d6a48bd89a61b2892d012f73b0b53","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Clifford Attractor III","cells":[{"id":0,"value":"md`# Clifford Attractor III\n\nA variant with additive blending.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"canvas = {\n const height = width;\n const canvas = DOM.canvas(width * devicePixelRatio, height * devicePixelRatio);\n canvas.style.width = `${width}px`;\n canvas.style.height = `${height}px`;\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":597,"value":"viewof a = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":599,"value":"viewof b = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":601,"value":"viewof c = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":603,"value":"viewof d = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"W = 1024","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"H = W","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"{\n gl.clear(gl.COLOR_BUFFER_BIT);\n gl.enableVertexAttribArray(timestepPosition);\n gl.enableVertexAttribArray(renderPosition);\n for (let i = 0; i < 64; ++i) {\n gl.useProgram(timestepProgram);\n gl.viewport(0, 0, W, H);\n gl.disable(gl.BLEND);\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; // Skip the first few.\n gl.useProgram(renderProgram);\n gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);\n gl.enable(gl.BLEND);\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, W * H);\n yield i;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"gl = {\n const gl = canvas.getContext(\"webgl\", {antialias: false, depth: false, preserveDrawingBuffer: true});\n gl.blendFunc(gl.ONE, gl.ONE);\n gl.getExtension(\"OES_texture_float\");\n return gl;\n}","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 * W * H);\n for (let i = -1, y = 0; y < H; ++y) {\n for (let x = 0; x < W; ++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":18,"value":"t1 = {\n a, b, c, d; // Reinitialize on interaction.\n const array = new Float32Array(4 * W * H);\n for (let y = 0; y < H; ++y) {\n for (let x = 0; x < W; ++x) {\n const i = W * y + x << 2;\n array[i + 0] = Math.random();\n array[i + 1] = Math.random();\n }\n }\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, W, H, 0, gl.RGBA, gl.FLOAT, array);\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, W, H, 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":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, 0.01);\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, 3.0);\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":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\"), W, H);\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\"), W, H);\n gl.uniform1f(gl.getUniformLocation(program, \"u_a\"), a);\n gl.uniform1f(gl.getUniformLocation(program, \"u_b\"), b);\n gl.uniform1f(gl.getUniformLocation(program, \"u_c\"), c);\n gl.uniform1f(gl.getUniformLocation(program, \"u_d\"), 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":"$W32","stdlib":"1","titling":"auto"}} 31:"$30:body"