31: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; }32:[] 2f:{"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"},{"id":782,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"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"},{"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"},{"id":7,"value":"K = 512 * (devicePixelRatio > 1 ? 2 : 1)","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"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"},{"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"},{"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"},{"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"},{"id":572,"value":"renderPosition = gl.getAttribLocation(renderProgram, \"a_position\")","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":563,"value":"timestepPosition = gl.getAttribLocation(timestepProgram, \"a_position\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}