2d:null 2e:["$","title",null,{"children":"Buddhabrot Playground | Donghao Ren | Observable"}] 33:T590,md` Many people are familiar with the [Mandelbrot set](https://en.wikipedia.org/wiki/Mandelbrot_set) which is the set of complex numbers ${tex`c`} for which the iterative equation ${tex`z_{n+1}=z_n^2+c`} does not diverge when iterated from ${tex`z_0=0`}. The Mandelbrot set is usually visualized by plotting the complex plane of ${tex`c`} with some color scheme to encode the speed of divergence. The [Buddhabrot](https://en.wikipedia.org/wiki/Buddhabrot) is another way to visualize the same iterative equation. To produce the Buddhabrot visualization, we take a uniform sample of ${tex`c`} points on the complex plane, find those that lead to divergent ${tex`\{z_n\}`} sequences. We then take all the ${tex`z`} points of the divergent sequences and accumulate them into a histogram (each bin correspond to a pixel) on the ${tex`z`} plane. The histogram is then colormapped for a better visual effect. This interactive notebook allows you to play with a Buddhabrot rendering program implemented in JavaScript with WebGL 2. You can create interesting visualizations by changing the iterative equation, projection method, and other parameters. This notebook is ported from my Buddhabrot renderer program at . The program offers more presets to play with, while this notebook allows you to manipulate the code directly. Source code: . `34:T4c5,shader_mandelbrot = compileShader( ` precision highp float; attribute vec2 a_position; void main () { gl_Position = vec4(a_position, 0, 1); } `, ` precision highp float; uniform vec2 u_resolution; uniform int u_maxIterations; ${fractal_code()} ${fractal_projection_code()} void main() { vec2 uv = gl_FragCoord.xy / u_resolution; vec2 c = uv * 4.0 - vec2(2.0); vec2 z = vec2(0.0); vec2 pw; vec2 z1; bool escaped = false; int number_iterations = 0; int num_contain = 0; for (int i = 0; i < 256; i++) { if (i >= u_maxIterations) { number_iterations = i; break; } z1 = fractal(z, c); if(z.x == z1.x && z.y == z1.y) { number_iterations = u_maxIterations; break; } z = z1; pw = fractal_projection(z, c); if(pw.x >= -2.0 && pw.x <= 2.0 && pw.y >= -2.0 && pw.y <= 2.0) { num_contain++; } if (length(z) > 4.0) { escaped = true; number_iterations = i; break; } } float v = float(number_iterations >= 16 ? num_contain : 0) / 255.0; gl_FragColor = escaped && num_contain > 0 ? vec4(vec3(v), 1.0) : vec4(0, 0, 0, 1); } ` )35:T59e,sampler = { let mipmapLevel = sampler_params.mipmapLevel; let size = sampler_params.size; let mipmapSize = sampler_params.mipmapSize; let scaler = 256 * 256 / (mipmapSize * mipmapSize); // Create a texture to render the importance map to let framebufferTexture = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, framebufferTexture); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); gl.texImage2D(gl.TEXTURE_2D, 0, gl.R8, size, size, 0, gl.RED, gl.UNSIGNED_BYTE, null); gl.bindTexture(gl.TEXTURE_2D, null); // Create framebuffer and assign the texture let framebuffer = gl.createFramebuffer(); gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, framebufferTexture, 0); gl.bindFramebuffer(gl.FRAMEBUFFER, null); // Create a quad primitive to render the importance map let quadVertices = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, quadVertices); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, -1, 1, 1, -1, 1, 1]), gl.STATIC_DRAW); return { sampledBuffer: gl.createBuffer(), mipmapLevel, size, mipmapSize, scaler, framebufferTexture, framebuffer, quadVertices }; }36:T584,importance_map = { let buffer = new Uint8Array(sampler.mipmapSize * sampler.mipmapSize); gl.disable(gl.DEPTH_TEST); gl.disable(gl.BLEND); gl.bindFramebuffer(gl.FRAMEBUFFER, sampler.framebuffer); gl.viewport(0, 0, sampler.size, sampler.size); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, sampler.framebufferTexture, 0); // Render mandelbrot gl.useProgram(shader_mandelbrot); gl.uniform2f(gl.getUniformLocation(shader_mandelbrot, "u_resolution"), sampler.size, sampler.size); gl.uniform1i(gl.getUniformLocation(shader_mandelbrot, "u_maxIterations"), 512); gl.bindBuffer(gl.ARRAY_BUFFER, sampler.quadVertices); gl.enableVertexAttribArray(gl.getAttribLocation(shader_mandelbrot, "a_position")); gl.vertexAttribPointer(gl.getAttribLocation(shader_mandelbrot, "a_position"), 2, gl.FLOAT, false, 8, 0); gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); // Generate mipmap and read pixels at desired level gl.bindTexture(gl.TEXTURE_2D, sampler.framebufferTexture); if (sampler.mipmapLevel != 0) { gl.generateMipmap(gl.TEXTURE_2D); } gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, sampler.framebufferTexture, sampler.mipmapLevel); gl.readPixels(0, 0, sampler.mipmapSize, sampler.mipmapSize, gl.RED, gl.UNSIGNED_BYTE, buffer); // Reset the framebuffer gl.bindFramebuffer(gl.FRAMEBUFFER, null); return { buffer }; }37:T4a7,function importance_sample() { let buffer = importance_map.buffer; let total_value = 0; for (let i = 0; i < buffer.length; i++) { let v = buffer[i]; total_value += v; } let multipler = total_value > 0 ? 1 + Math.floor(10000 / total_value) : 1; total_value *= multipler; let samplesData = new Float32Array(total_value * 3); let i_sample = 0; let ix = 0; let iy = 0; let scale = 1.0 / sampler.mipmapSize * 4; for (let i = 0; i < buffer.length; i++) { let v = (buffer[i]) * multipler; let x = ix * scale - 2; let y = iy * scale - 2; for (let j = 0; j < v; j++) { let dx = (random_uniform() + 0.5) * scale; let dy = (random_uniform() + 0.5) * scale; samplesData[i_sample++] = x + dx; samplesData[i_sample++] = y + dy; samplesData[i_sample++] = 1.0 / v; } ix++; if (ix >= sampler.mipmapSize) { ix = 0; iy++; } } // Upload the samples to the buffer gl.bindBuffer(gl.ARRAY_BUFFER, sampler.sampledBuffer); gl.bufferData(gl.ARRAY_BUFFER, samplesData, gl.STATIC_DRAW); gl.bindBuffer(gl.ARRAY_BUFFER, null); return { samples: sampler.sampledBuffer, count: total_value }; }38:T487,renderer = { let renderWidth = canvas.width * 2; let renderHeight = canvas.height * 2; let feedbackBuffer1 = gl.createBuffer(); let feedbackBuffer2 = gl.createBuffer(); let transformFeedback = gl.createTransformFeedback(); let framebufferTexture = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, framebufferTexture); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA32F, renderWidth, renderHeight, 0, gl.RGBA, gl.FLOAT, null); gl.bindTexture(gl.TEXTURE_2D, null); let framebuffer = gl.createFramebuffer(); gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, framebufferTexture, 0); gl.bindFramebuffer(gl.FRAMEBUFFER, null); return { renderWidth, renderHeight, feedbackBuffer1, feedbackBuffer2, transformFeedback, framebufferTexture, framebuffer }; }39:T427,colormap = { let color2xyz = (c) => lab2xyz(...chroma(c).lab()); let colormap = [ chroma.scale(["#000000", input_color1]).correctLightness().colors(100).map(color2xyz), chroma.scale(["#000000", input_color2]).correctLightness().colors(100).map(color2xyz), chroma.scale(["#000000", input_color3]).correctLightness().colors(100).map(color2xyz) ]; gl.bindTexture(gl.TEXTURE_2D, texture_color); let textureData = new Float32Array(colormap[0].length * 4 * 6); let p = 0; for (let k = 0; k < 3; k++) { for (let m = 0; m < 2; m++) { for (let i = 0; i < colormap[0].length; i++) { textureData[p++] = colormap[k][i][0]; textureData[p++] = colormap[k][i][1]; textureData[p++] = colormap[k][i][2]; textureData[p++] = colormap[k][i][3]; } } } let colormapSize = colormap[0].length; gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA32F, colormap[0].length, 6, 0, gl.RGBA, gl.FLOAT, textureData); gl.bindTexture(gl.TEXTURE_2D, null); return { textureColor: texture_color, colormapSize } }3a:T5a6,shader_color = compileShader( ` precision highp float; attribute vec2 a_position; varying vec2 vo_position; void main () { vo_position = (vec2(-a_position.y, a_position.x) + 1.0) / 2.0; gl_Position = vec4(a_position, 0, 1); } `, ` precision highp float; uniform sampler2D texture; uniform sampler2D textureColor; uniform float colormapSize; uniform float colormapScaler; varying vec2 vo_position; float xyz_rgb_curve(float r) { if(r <= 0.00304) { return 12.92 * r; } else { return 1.055 * pow(r, 1.0 / 2.4) - 0.055; } } vec3 xyz2rgb(vec3 xyz) { return vec3( xyz_rgb_curve(3.2404542 * xyz.x - 1.5371385 * xyz.y - 0.4985314 * xyz.z), xyz_rgb_curve(-0.9692660 * xyz.x + 1.8760108 * xyz.y + 0.0415560 * xyz.z), xyz_rgb_curve(0.0556434 * xyz.x - 0.2040259 * xyz.y + 1.0572252 * xyz.z) ); } void main() { float scale = colormapScaler * 4.0; vec4 color = texture2D(texture, vo_position); vec3 v = min(vec3(1.0), sqrt(color.rgb / scale)); vec3 cx = texture2D(textureColor, vec2((v.x * (colormapSize - 0.5) + 0.5) / colormapSize, 1.0 / 6.0)).xyz; vec3 cy = texture2D(textureColor, vec2((v.y * (colormapSize - 0.5) + 0.5) / colormapSize, 0.5)).xyz; vec3 cz = texture2D(textureColor, vec2((v.z * (colormapSize - 0.5) + 0.5) / colormapSize, 5.0 / 6.0)).xyz; vec3 xyz = cx + cy + cz; gl_FragColor = vec4(xyz2rgb(xyz), 1.0); } ` )3b:T15b5,{ if(renderer.timerNextFrame) { clearTimeout(renderer.timerNextFrame); renderer.timerNextFrame = undefined; } let spectrumScaler = input_spectrum / 40; let renderIterations = 256; let accumulate = false; let exposure = input_exposure / 50; let accumulateScaler = 1; let doRenderNextFrame = (accumulate) => { let sampled = importance_sample(); let samplesCount = sampled.count; let cBuffer = sampled.samples; gl.disable(gl.DEPTH_TEST); // Sample the mandelbrot to get a set of "c" points for buddhabrot. gl.bindFramebuffer(gl.FRAMEBUFFER, renderer.framebuffer); gl.viewport(0, 0, renderer.renderWidth, renderer.renderHeight); gl.clearColor(0, 0, 0, 1); if (!accumulate) { gl.clear(gl.COLOR_BUFFER_BIT); } gl.enable(gl.BLEND); gl.blendFunc(gl.ONE, gl.ONE); // Initialize the feedback buffer to zero gl.bindBuffer(gl.ARRAY_BUFFER, renderer.feedbackBuffer1); gl.bufferData(gl.ARRAY_BUFFER, 12 * samplesCount, gl.STATIC_DRAW); gl.bindBuffer(gl.ARRAY_BUFFER, null); gl.bindBuffer(gl.ARRAY_BUFFER, renderer.feedbackBuffer2); gl.bufferData(gl.ARRAY_BUFFER, 12 * samplesCount, gl.STATIC_DRAW); gl.bindBuffer(gl.ARRAY_BUFFER, null); // Determine the number of iterations and coloring of the samples gl.useProgram(shader_buddhabrot_escape); gl.uniform1f(gl.getUniformLocation(shader_buddhabrot_escape, "u_spectrum_scaler"), spectrumScaler); gl.bindBuffer(gl.ARRAY_BUFFER, cBuffer); gl.enableVertexAttribArray(gl.getAttribLocation(shader_buddhabrot_escape, "a_position")); gl.vertexAttribPointer(gl.getAttribLocation(shader_buddhabrot_escape, "a_position"), 3, gl.FLOAT, false, 12, 0); gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, renderer.transformFeedback); gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 0, renderer.feedbackBuffer1); gl.bindBuffer(gl.ARRAY_BUFFER, renderer.feedbackBuffer2); gl.beginTransformFeedback(gl.POINTS); gl.enable(gl.RASTERIZER_DISCARD); gl.drawArrays(gl.POINTS, 0, samplesCount); gl.disable(gl.RASTERIZER_DISCARD); gl.endTransformFeedback(); gl.bindBuffer(gl.ARRAY_BUFFER, null); gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 0, null); gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, null); // Iteratively render using transform feedback gl.useProgram(shader_buddhabrot); gl.uniform1f(gl.getUniformLocation(shader_buddhabrot, "u_aspect_ratio"), renderer.renderWidth / renderer.renderHeight); gl.bindBuffer(gl.ARRAY_BUFFER, cBuffer); gl.enableVertexAttribArray(gl.getAttribLocation(shader_buddhabrot, "a_position")); gl.vertexAttribPointer(gl.getAttribLocation(shader_buddhabrot, "a_position"), 3, gl.FLOAT, false, 12, 0); gl.enable(gl.BLEND); gl.blendFunc(gl.ONE, gl.ONE); gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, renderer.transformFeedback); for (let i = 0; i < renderIterations; i++) { gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 0, renderer.feedbackBuffer2); gl.bindBuffer(gl.ARRAY_BUFFER, renderer.feedbackBuffer1); gl.enableVertexAttribArray(gl.getAttribLocation(shader_buddhabrot, "i_position")); gl.vertexAttribPointer(gl.getAttribLocation(shader_buddhabrot, "i_position"), 3, gl.FLOAT, false, 12, 0); gl.beginTransformFeedback(gl.POINTS); if (i < 4) { gl.enable(gl.RASTERIZER_DISCARD); } gl.drawArrays(gl.POINTS, 0, samplesCount); gl.disable(gl.RASTERIZER_DISCARD); gl.endTransformFeedback(); gl.bindBuffer(gl.ARRAY_BUFFER, null); gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 0, null); let t = renderer.feedbackBuffer1; renderer.feedbackBuffer1 = renderer.feedbackBuffer2; renderer.feedbackBuffer2 = t; } gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, null); gl.bindFramebuffer(gl.FRAMEBUFFER, null); // Generate the colored fractal gl.viewport(0, 0, canvas.width, canvas.height); gl.clearColor(0, 0, 0, 1); gl.clear(gl.COLOR_BUFFER_BIT); gl.disable(gl.BLEND); let vbo = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vbo); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, -1, 1, 1, -1, 1, 1]), gl.STATIC_DRAW); gl.useProgram(shader_color); gl.bindBuffer(gl.ARRAY_BUFFER, vbo); gl.enableVertexAttribArray(gl.getAttribLocation(shader_color, "a_position")); gl.vertexAttribPointer(gl.getAttribLocation(shader_color, "a_position"), 2, gl.FLOAT, false, 8, 0); gl.uniform1i(gl.getUniformLocation(shader_color, "texture"), 0); gl.uniform1i(gl.getUniformLocation(shader_color, "textureColor"), 1); gl.uniform1f(gl.getUniformLocation(shader_color, "colormapSize"), colormap.colormapSize); gl.uniform1f(gl.getUniformLocation(shader_color, "colormapScaler"), Math.pow(2, -exposure) * (renderIterations - 4) / 6000 * accumulateScaler / sampler.scaler / 1 / 4); gl.activeTexture(gl.TEXTURE1); gl.bindTexture(gl.TEXTURE_2D, colormap.textureColor); gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, renderer.framebufferTexture); gl.generateMipmap(gl.TEXTURE_2D); gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); gl.activeTexture(gl.TEXTURE1); gl.bindTexture(gl.TEXTURE_2D, null); gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, null); accumulateScaler += 1; if(accumulateScaler < 1000) { renderer.timerNextFrame = setTimeout(() => { doRenderNextFrame(true); }, 100); } } doRenderNextFrame(false); }3c:[] 31:{"id":"0b4257b485bd1886","slug":"buddhabrot-playground","title":"Buddhabrot Playground","thumbnail":"94ef1d2c20fc6acdc0a276be62cb05b70653290b78a82f455cfa34a41cbc4628","access_level":"public","create_time":"$D2018-08-17T04:14:23.025Z","update_time":"$D2019-02-13T05:48:42.791Z","view_time":null,"first_public_time":"$D2018-08-19T23:33:45.181Z","has_unpublished_edits":null,"fork":false,"stars":54,"starred":false,"owner":{"type":"team","id":"a8e7db9812b73248","login":"donghaoren","name":"Donghao Ren","avatar_url":"https://avatars-next.observableusercontent.com/c11ad2d47982d844c242c5bae66d760b74f1473d134d65bcc2524a79407337c6","tier":"starter_2024"},"version":692,"publish_version":692,"role":null,"authored":false,"authors":[{"type":"individual","id":"54c72ff94db1febe","login":"donghaoren","name":"Donghao Ren","avatar_url":"https://avatars-next.observableusercontent.com/c11ad2d47982d844c242c5bae66d760b74f1473d134d65bcc2524a79407337c6","tier":null}],"members":[{"type":"individual","id":"54c72ff94db1febe","login":"donghaoren","name":"Donghao Ren","avatar_url":"https://avatars-next.observableusercontent.com/c11ad2d47982d844c242c5bae66d760b74f1473d134d65bcc2524a79407337c6","tier":null,"role":"editor"}],"comments":[{"id":"99f71b84fa7e1ace","reply_to_id":null,"content":"I notice this doesn't work in the latest version of Safari. Is there an easy fix for that?","create_time":"$D2020-12-09T23:29:38.382Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"c07159641cb246d6","login":"dunstan","name":"Dunstan Orchard","avatar_url":"https://avatars-next.observableusercontent.com/a6df95de5f8238993d112347a8772215ce2fdb0ffbbe6d6d6770138aa0c7a1f8","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":17,"collection":{"id":"271f3b6493ae60a5","slug":"webgl","title":"WebGL","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"type":"notebook","body":{"title":"Buddhabrot Playground","cells":[{"id":496,"value":"md`# Buddhabrot Playground`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"canvas = {\n let canvas = DOM.canvas(width * 2, 1200);\n canvas.style.width = width + \"px\";\n canvas.style.height = \"600px\";\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":402,"value":"md`Adjust the brightness (exposure) of the fractal`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"viewof input_exposure = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":619,"value":"md`Adjust the colormap of the fractal. Lower, medium, and high number of escape iterations are mapped to the three colors below. The spectrum parameter modulates the separation of colors.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":582,"value":"viewof input_spectrum = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":506,"value":"viewof input_color1 = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":512,"value":"viewof input_color2 = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":514,"value":"viewof input_color3 = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":504,"value":"md`## Introduction`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":407,"value":"md`## Equations`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":296,"value":"md`\nThe following GLSL (WebGL's shader language) function defines the iterative function of Mandelbrot\n\n${tex.block`z_{n+1} = z_n^2 + c`}\n\nIn the program, complex numbers are represented using \\`vec2\\` types. The x component is the real part, and the y component is the imaginary part. For example, ${tex`z = 2 + 3i`} is represented as \\`z = vec2(2.0, 3.0)\\`.\n\nYou can modify this function to use other equations to produce different fractals. Below are some examples that you can try:\n\n # Tricorn equation:\n return vec2(z.x * z.x - z.y * z.y + c.x, -z.x * z.y * 2.0 + c.y);\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"fractal_code = () => `vec2 fractal(vec2 z, vec2 c) {\n return vec2(z.x * z.x - z.y * z.y + c.x, z.x * z.y * 2.0 + c.y);\n}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"md`\nThe following GLSL function defines how a fractal state ${tex`(z, c)`} is projected to the 2D plane for visualization. The default behavior is to just show ${tex`z`}, which produces the default Buddhabrot.\n\nYou can modify this function to produce alternative projections. Here are some to try:\n\n # Show the c values instead of z (this produces the Mandelbrot):\n return c;\n\n # Show the real parts of z and c (this produces a logistic map):\n return vec2(z.x, c.x);\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"fractal_projection_code = () => `vec2 fractal_projection(vec2 z, vec2 c) {\n return z;\n}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":389,"value":"md`## Rendering the Buddhabrot Fractal\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":419,"value":"md`\nIt's not easy to render the Buddhabrot fractal efficiently. If you just take a uniform sample of ${tex`c`} points, most of them will diverge very quickly, wasting the computation time. It turns out that the most useful points are those close but not inside the Mandelbrot set. In this program, we follow an importance sampling method to speed up rendering.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"md`### Importance Sampling\nImportance sampling is completed in two steps:\n1. Generate an importance map by looking for ${tex`c`} points that leads to long divergent ${tex`\\{z_n\\}`} sequences. We do this in the GPU using a WebGL shader.\n2. Sample the importance map to produce a set of ${tex`c`}. This is completed in the CPU in JavaScript.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"sampler_params = ({\n mipmapLevel: 1,\n size: 512,\n mipmapSize: 256\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"md`### Produce the Image\nNow we have a bunch of importance sampled ${tex`c`} values, we can render the fractal.\nRendering is completed using a sequence of TransformFeedback passes, each pass complete one iteration of all points in parallel.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"$38","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":521,"value":"texture_color = {\n let textureColor = gl.createTexture();\n gl.bindTexture(gl.TEXTURE_2D, textureColor);\n gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);\n gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);\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.bindTexture(gl.TEXTURE_2D, null);\n return textureColor;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":516,"value":"$39","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"shader_buddhabrot = compileShader(\n `#version 300 es\n precision highp float;\n in vec3 a_position;\n in vec3 i_position;\n out vec3 o_position;\n out vec3 vo_accum;\n uniform float u_aspect_ratio;\n ${fractal_code()}\n ${fractal_projection_code()}\n void main () {\n o_position = vec3(fractal(i_position.xy, a_position.xy), i_position.z);\n vec2 proj = fractal_projection(o_position.xy, a_position.xy);\n proj.y /= u_aspect_ratio;\n gl_Position = vec4(proj / 2.0, 0, 1);\n if(i_position.z < 0.3333) {\n vo_accum = vec3(a_position.z) * vec3(1, 0, 0);\n } else if(i_position.z < 0.6666) {\n vo_accum = vec3(a_position.z) * vec3(0, 1, 0);\n } else {\n vo_accum = vec3(a_position.z) * vec3(0, 0, 1);\n }\n }\n `,\n `#version 300 es\n precision highp float;\n in vec3 vo_accum;\n out vec4 v_color;\n void main() {\n v_color = vec4(vec3(vo_accum), 1);\n }\n `,\n (p) => {\n gl.transformFeedbackVaryings(p, [\"o_position\"], gl.SEPARATE_ATTRIBS);\n }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"shader_buddhabrot_escape = compileShader(\n `#version 300 es\n precision highp float;\n in vec3 a_position;\n out vec3 o_position;\n out vec3 vo_accum;\n uniform float u_spectrum_scaler;\n ${fractal_code()}\n void main () {\n vec2 z = vec2(0);\n o_position = vec3(100.0, 100.0, 100.0);\n for(int i = 0; i < 256; i++) {\n z = fractal(z, a_position.xy);\n if(z.x * z.x + z.y * z.y > 16.0) {\n o_position = vec3(0, 0, float(i) / 160.0 * u_spectrum_scaler);\n break;\n }\n }\n }\n `,\n `#version 300 es\n precision highp float;\n in vec3 vo_accum;\n out vec4 v_color;\n void main() {\n v_color = vec4(vec3(vo_accum), 1);\n }\n `,\n (p) => {\n gl.transformFeedbackVaryings(p, [\"o_position\"], gl.SEPARATE_ATTRIBS);\n }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"$3a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"$3b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"md`### Prepare WebGL 2 Context\nWe create a WebGL2RenderingContext, and then get two necessary extension: \\`OES_texture_float_linear\\` and \\`EXT_color_buffer_float\\`.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"gl = {\n let gl = canvas.getContext(\"webgl2\");\n gl.getExtension(\"OES_texture_float\");\n gl.getExtension(\"OES_texture_float_linear\");\n gl.getExtension(\"EXT_color_buffer_float\");\n return gl;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":636,"value":"md`### Utility Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"function compileShader(vs_code, fs_code, options) {\n let vs = gl.createShader(gl.VERTEX_SHADER);\n let fs = gl.createShader(gl.FRAGMENT_SHADER);\n gl.shaderSource(vs, vs_code);\n gl.compileShader(vs);\n let isValid = gl.getShaderParameter(vs, gl.COMPILE_STATUS);\n if (!isValid) {\n console.info(\"vertex shader error: \" + gl.getShaderInfoLog(vs));\n throw new Error(\"vertex shader compilation failure\");\n }\n gl.shaderSource(fs, fs_code);\n gl.compileShader(fs);\n isValid = gl.getShaderParameter(fs, gl.COMPILE_STATUS);\n if (!isValid) {\n console.info(\"fragment shader error: \" + gl.getShaderInfoLog(fs));\n throw new Error(\"fragment shader compilation failure\");\n }\n let p = gl.createProgram();\n gl.attachShader(p, vs);\n gl.attachShader(p, fs);\n if (options) {\n options(p);\n }\n gl.linkProgram(p);\n isValid = gl.getProgramParameter(p, gl.LINK_STATUS);\n if (!isValid) {\n console.info(\"program link error: \" + gl.getProgramInfoLog(p));\n throw new Error(\"program link failure\");\n }\n return p;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":534,"value":"chroma = require(\"chroma-js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":558,"value":"lab2xyz = {\n let LAB_CONSTANTS = {\n Kn: 18,\n Xn: 0.950470,\n Yn: 1,\n Zn: 1.088830,\n t0: 0.137931034,\n t1: 0.206896552,\n t2: 0.12841855,\n t3: 0.008856452\n };\n\n function lab_xyzf(t) {\n if (t > LAB_CONSTANTS.t1) {\n return t * t * t\n } else {\n return LAB_CONSTANTS.t2 * (t - LAB_CONSTANTS.t0)\n }\n }\n\n function lab2xyz(l, a, b) {\n let y = (l + 16) / 116;\n let x = y + a / 500;\n let z = y - b / 200;\n y = LAB_CONSTANTS.Yn * lab_xyzf(y);\n x = LAB_CONSTANTS.Xn * lab_xyzf(x);\n z = LAB_CONSTANTS.Zn * lab_xyzf(z);\n return [x, y, z, 1];\n }\n return lab2xyz;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"function random_uniform() {\n let v1, v2, s;\n do {\n v1 = 2 * Math.random() - 1;\n v2 = 2 * Math.random() - 1;\n s = v1 * v1 + v2 * v2;\n } while (s >= 1 || s == 0);\n s = Math.sqrt((-2 * Math.log(s)) / s) / 2;\n return v1 * s;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3c","stdlib":"1","titling":"auto"}} 32:"$31:body"