2b:null 2c:["$","title",null,{"children":"The Fractal (Julia Set) on GPU | Chuncheng | Observable"}] 31:T513,# The Fractal (Julia Set) on GPU Drag the red circle to pick your favorite parameters of the Julia Set. The set is plotted by your GPU, so it is really **fast**. ${tex` z_n = z_{n-1}^2 + c `} where the ${tex`c`} refers the parameter can be changed. It is the Mandlebrot Set when the following the equation below ${tex` c = r + i 0 `} where ${tex`r \in R`}. The white circles in the TouchPad are the recommend parameters of the Julia Set. You can **Click** the **Random Select** button to select one randomly. --- ## Tips The tips are about the balance between the Iterations and Render Amplitude options. The Iterations option is essential to the visualization effect, the smaller value gives the more vague plot with larger extension. And the larger value gives more detail of the set. When then Iterations option is large enough, you may be surprised by the rapid change between neighbor parameters. The Render Amplitude option controls what part the set is enhanced, the smaller value renders the set like a well cut paper, and the larger value renders more on the edge of set. To make it more useable, I put some pre-defined parameters on the TouchPad, drag the red point near them to use the parameters. Of course, the set is of Self-Similarity, you can zoom the plot to see it. 32:T1bf3,{ fractalDemoRefresh; const { GPUComposer, GPULayer, GPUProgram, FLOAT, renderAmplitudeProgram, WEBGL2, GLSL3 } = gpuio; const contextID = WEBGL2; const glslVersion = GLSL3; const RADIUS = 1.75; // Init a canvas element. const height = ~~((9 * width) / 16); const canvas = DOM.canvas(width, height, 1); yield visibility(canvas); // Avoid running cell if not visible // Calc initial bounds, which scale the entire fractal to fit inside the current window. function calcInitialBounds() { const aspectRatio = canvas.width / canvas.height; return { min: aspectRatio > 1 ? [-RADIUS * aspectRatio, -RADIUS] : [-RADIUS, -RADIUS / aspectRatio], max: aspectRatio > 1 ? [RADIUS * aspectRatio, RADIUS] : [RADIUS, RADIUS / aspectRatio] }; } let bounds = calcInitialBounds(); const PARAMS = viewof fractalParams.value; // Flag to trigger recompute. // let needsCompute = true; const composer = new GPUComposer({ canvas, contextID, glslVersion }); const state = new GPULayer(composer, { name: "state", dimensions: [canvas.width, canvas.height], type: FLOAT, numComponents: 1 }); const fractalCompute = new GPUProgram(composer, { name: "fractalCompute", fragmentShader: ` // Sub-sampling for anti-aliasing. #define SUBSAMPLE_RES 2.0 in vec2 v_uv; uniform vec2 u_boundsMin; uniform vec2 u_boundsMax; uniform float u_cReal; uniform float u_cImaginary; uniform vec2 u_pxSize; out float out_value; void main() { // https://en.wikipedia.org/wiki/Julia_set#Pseudocode int value = 0; for (float u = 0.0; u < SUBSAMPLE_RES; u++) { for (float v = 0.0; v < SUBSAMPLE_RES; v++) { vec2 uvOffset = vec2(u, v) / (SUBSAMPLE_RES + 1.0) + 0.5; vec2 uv = v_uv + uvOffset * u_pxSize; vec2 z = uv * u_boundsMax + (1.0 - uv) * u_boundsMin; for (int i = 0; i < MAX_ITERS; i++) { if (z.x * z.x + z.y * z.y > ${RADIUS * RADIUS}) break; float xTemp = z.x * z.x - z.y * z.y; z.y = 2.0 * z.x * z.y + u_cImaginary; z.x = xTemp + u_cReal; value += 1; } } } out_value = (float(value) / (SUBSAMPLE_RES * SUBSAMPLE_RES)) / float(MAX_ITERS); }`, uniforms: [ { name: "u_boundsMin", value: bounds.min, type: FLOAT }, { name: "u_boundsMax", value: bounds.max, type: FLOAT }, { name: "u_cReal", value: targetComplex.real, type: FLOAT }, { name: "u_cImaginary", value: targetComplex.image, type: FLOAT }, { name: "u_pxSize", value: [1 / canvas.width, 1 / canvas.height], type: FLOAT } ], // Use compile-time variables to set loop parameter so this will work in WebGL1 as well. // See https://github.com/amandaghassaei/gpu-io/blob/main/docs/GLSL1_Support.md#other-glsl1-gotchas compileTimeConstants: { MAX_ITERS: `${PARAMS.maxIters}` } }); const fractalRender = renderPalette( composer, PARAMS.renderAmplitude, PARAMS.palette ); // Render loop. function loop() { if (targetComplex.needsCompute) { // Only recompute if something has changed. console.log("---------- Redraw ------------"); fractalCompute.setUniform("u_cReal", targetComplex.real); fractalCompute.setUniform("u_cImaginary", targetComplex.image); fractalCompute.recompile({ MAX_ITERS: `${PARAMS.maxIters}` }); composer.step({ program: fractalCompute, output: state }); targetComplex.needsCompute = false; // Draw to screen. composer.step({ program: fractalRender, input: state }); } } /** * UI interaction update **/ function stateUpdate() { Object.assign(PARAMS, viewof fractalParams.value); // fractalCompute.setUniform("u_cReal", targetComplex.real); // fractalCompute.setUniform("u_cImaginary", targetComplex.image); fractalCompute.recompile({ MAX_ITERS: `${PARAMS.maxIters}` }); fractalRender.setUniform("u_amplitude", PARAMS.renderAmplitude); fractalRender.setUniform("u_palette", PARAMS.palette); targetComplex.needsCompute = true; } viewof fractalParams.addEventListener("input", stateUpdate); /** * Mouse/touch interaction **/ // Touch events. const activeTouches = {}; let pinchPan; function onPinchZoom(e) { if (e.preventDefault) e.preventDefault(); // Calculate new bounds. const factor = e.ctrlKey ? 0.005 : 0.001; let [minX, minY] = bounds.min; let [maxX, maxY] = bounds.max; let scaleX = maxY - minY; let scaleY = maxX - minX; const fractionY = (canvas.height - e.offsetY) / canvas.height; const fractionX = e.offsetX / canvas.width; const centerY = fractionY * scaleX + minY; const centerX = fractionX * scaleY + minX; const scale = 1.0 + e.deltaY * factor; const scaleLimit = 1e-4; if (Math.min(scaleX * scale, scaleY * scale) < scaleLimit) return; scaleX = scaleX * scale; scaleY = scaleY * scale; bounds.min[0] = centerX - scaleY * fractionX; bounds.max[0] = centerX + scaleY * (1 - fractionX); bounds.min[1] = centerY - scaleX * fractionY; bounds.max[1] = centerY + scaleX * (1 - fractionY); fractalCompute.setUniform("u_boundsMin", bounds.min); fractalCompute.setUniform("u_boundsMax", bounds.max); targetComplex.needsCompute = true; } canvas.onwheel = onPinchZoom; function onPan(e) { const { deltaX, deltaY } = e; const [minX, minY] = bounds.min; const [maxX, maxY] = bounds.max; const scaleX = maxY - minY; const scaleY = maxX - minX; const scaledDeltaX = deltaX / canvas.width; const scaledDeltaY = -deltaY / canvas.height; bounds.min[1] -= scaleX * scaledDeltaY; bounds.max[1] -= scaleX * scaledDeltaY; bounds.min[0] -= scaleY * scaledDeltaX; bounds.max[0] -= scaleY * scaledDeltaX; fractalCompute.setUniform("u_boundsMin", bounds.min); fractalCompute.setUniform("u_boundsMax", bounds.max); targetComplex.needsCompute = true; } let mouse; function onMouseDown(e) { mouse = [e.offsetX, e.offsetY]; } function onMouseMove(e) { if (e.buttons == 0) return; const nextMouse = [e.offsetX, e.offsetY]; const panInfo = { deltaX: nextMouse[0] - mouse[0], deltaY: nextMouse[1] - mouse[1] }; onPan(panInfo); mouse = nextMouse; } canvas.onmousedown = onMouseDown; canvas.onmousemove = onMouseMove; /** * Screenshot **/ function savePNG() { composer.step({ program: fractalRender, input: state }); composer.savePNG({ filename: "fractal" }); } viewof fractalScreenshot.addEventListener("input", savePNG); /** * Resource cleanup **/ invalidation.then(() => { fractalCompute.dispose(); fractalRender.dispose(); state.dispose(); composer.dispose(); }); // Simulation/render loop. while (true) { loop(); yield visibility(canvas); } }33:T758,renderPalette = function ( composer, defaultAmplitude = 1, defaultPalette = 0, components = "x" ) { const { GPUProgram, FLOAT, INT } = gpuio; return new GPUProgram(composer, { name: "renderPalette", fragmentShader: ` in vec2 v_uv; uniform sampler2D u_state; uniform float u_amplitude; uniform int u_palette; out vec4 out_color; const vec3 table[32] = vec3[32](vec3(0.5,0.5,0.5),vec3(0.5,0.5,0.5),vec3(1.0,1.0,1.0),vec3(1.0,1.0,1.0), vec3(0.5,0.5,0.5),vec3(0.5,0.5,0.5),vec3(1.0,1.0,1.0),vec3(0.0,0.33,0.67), vec3(0.5,0.5,0.5),vec3(0.5,0.5,0.5),vec3(1.0,1.0,1.0),vec3(0.0,0.10,0.20), vec3(0.5,0.5,0.5),vec3(0.5,0.5,0.5),vec3(1.0,1.0,1.0),vec3(0.3,0.20,0.20), vec3(0.5,0.5,0.5),vec3(0.5,0.5,0.5),vec3(1.0,1.0,0.5),vec3(0.8,0.90,0.30), vec3(0.5,0.5,0.5),vec3(0.5,0.5,0.5),vec3(1.0,0.7,0.4),vec3(0.0,0.15,0.20), vec3(0.5,0.5,0.5),vec3(0.5,0.5,0.5),vec3(2.0,1.0,0.0),vec3(0.5,0.20,0.25), vec3(0.8,0.5,0.4),vec3(0.2,0.4,0.2),vec3(2.0,1.0,1.0),vec3(0.0,0.25,0.25) ); vec3 pal( in float t, in int i ) { vec3 a = table[i*4]; vec3 b = table[i*4+1]; vec3 c = table[i*4+2]; vec3 d = table[i*4+3]; return a + b*cos( 3.1416*(c*t+d) ); } void main() { float val = u_amplitude * texture(u_state, v_uv).${components} ; vec3 col = pal(val, u_palette); out_color = vec4(col, 1); } `, uniforms: [ { name: "u_amplitude", value: defaultAmplitude, type: FLOAT }, { name: "u_palette", value: defaultPalette, type: INT } ] }); }34:T983,// Touch pad canvasTouchPad = { const { width, height, realRange, imageRange, defaultReal, defaultImage } = touchPadSetup; const canvas = document.createElement("canvas"); (canvas.width = width), (canvas.height = height); const ctx = canvas.getContext("2d"); const scaleX = d3.scaleLinear().range(realRange).domain([0, width]).nice(), scaleY = d3.scaleLinear().range(imageRange).domain([height, 0]).nice(); clear(); drawPoint(scaleX.invert(defaultReal), scaleY.invert(defaultImage)); canvas.addEventListener("mousemove", onMouseMove, false); canvas.addEventListener("click", onClick, false); viewof randomSelect.addEventListener("input", () => { console.log("Random Select Button is clicked."); const lst = predefinedComplex.map((e) => e); d3.shuffle(lst); const select = lst[0]; console.log(select); clear(); drawPoint(scaleX.invert(select.real), scaleY.invert(select.image)); }); return canvas; /** * Handle mouseMove events */ function onMouseMove(e) { if (e.buttons > 0) { clear(); drawPoint(0, 0, e); } } /** * Handle mouse click events */ function onClick(e) { const { offsetX: x, offsetY: y } = e; clear(); drawPoint(x, y); } /** * Clear the canvas */ function clear() { ctx.fillStyle = "#367a95"; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = d3.color(d3.hsl(216, 0.2, 0.3)).formatHex(); ctx.fillRect(0, 0, width / 2, height / 2); predefinedComplex.map(({ real, image }) => { drawPoint( scaleX.invert(real), scaleY.invert(image), undefined, "#f0f0f0a0", "notUpdate" ); }); } /** * Draw point on x, y; * the x and y will be override if e exists. */ function drawPoint(x, y, e, color, update = "update") { if (e) { x = e.offsetX; y = e.offsetY; } ctx.fillStyle = color ? color : "red"; ctx.beginPath(); ctx.arc(x, y, width / 50, 0, Math.PI * 2, true); ctx.closePath(); ctx.fill(); if (update === "update") { Object.assign(targetComplex, { real: scaleX(x), image: scaleY(y), needsCompute: true }); const pa = document.getElementById("ParamsArea1"); if (pa) { pa.innerHTML = ` real: ${targetComplex.real.toFixed(4)}, image: ${targetComplex.image.toFixed(4)} `; } } } }35:T476,predefinedComplex = { return [ { real: -0.23, image: 0.65 }, { real: 0.275, image: 0.485 }, { real: -0.54, image: -0.5 }, { real: -0.705, image: -0.27 }, { real: 0.38, image: -0.23 }, { real: 0.285, image: -0.47 }, { real: 0.35, image: 0.09 }, { real: -0.57, image: 0.465 }, { real: -0.735, image: 0 }, { real: -0.07, image: -0.665 }, { real: -0.3, image: -0.63 }, { real: 0.06, image: 0.63 }, { real: -0.715, image: 0.245 }, { real: 0.1325, image: -0.59 }, { real: -0.3888, image: 0.595 }, { real: -0.0887, image: 0.655 }, { real: 0.3987, image: 0.33 }, { real: 0.16, image: 0.5867 }, { real: -0.185, image: -0.6533 }, { real: -0.42, image: -0.5867 }, { real: 0.35, image: -0.08 }, { real: -0.63, image: -0.3933 }, { real: -0.795, image: 0.1467 }, { real: -0.805, image: -0.16 }, { real: 0.055, image: -0.64 }, { real: 0.215, image: -0.5467 }, { real: 0.345, image: -0.3733 }, { real: -0.495, image: 0.5867 }, { real: -0.885, image: 0.0133 }, { real: -0.655, image: 0.3733 }, { real: -0.7467, image: 0.1133 } ]; }36:[] 2f:{"id":"8f967418dee70d7a","slug":"the-fractal-julia-set-on-gpu","title":"The Fractal (Julia Set) on GPU","thumbnail":"0abf6ad10184675bd1eb3aa67418b63f502a798ab38124f774ce37f21b374f13","access_level":"public","create_time":"$D2023-01-17T08:34:37.015Z","update_time":"$D2023-07-29T03:05:42.582Z","view_time":null,"first_public_time":"$D2023-01-17T08:34:37.015Z","fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"bcd65cef1cb4d2ed","login":"listenzcc","name":"Chuncheng","avatar_url":"https://avatars-next.observableusercontent.com/bb3c68e77a708a587ffc2d663bb83421f20d67991dbe6c1623c6e5d2fb73d15e","tier":"starter_2024"},"version":500,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"16328058352682a8","login":"listenzcc","name":"Chuncheng","avatar_url":"https://avatars-next.observableusercontent.com/bb3c68e77a708a587ffc2d663bb83421f20d67991dbe6c1623c6e5d2fb73d15e","tier":null}],"members":[{"type":"individual","id":"16328058352682a8","login":"listenzcc","name":"Chuncheng","avatar_url":"https://avatars-next.observableusercontent.com/bb3c68e77a708a587ffc2d663bb83421f20d67991dbe6c1623c6e5d2fb73d15e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":4,"collection":{"id":"7a372bf651d9b6a4","slug":"gpu-io","title":"GPU-IO","owner":{"id":"bcd65cef1cb4d2ed","login":"listenzcc","name":"Chuncheng"}},"type":"notebook","body":{"title":"The Fractal (Julia Set) on GPU","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"

Touch Pad of Parameter

\n\n

${canvasTouchPad}

\n\n

\n ${`\nreal: ${targetComplex.real.toFixed(4)},\nimage: ${targetComplex.image.toFixed(4)}\n`}\n

\n \n

\n Drag the red circle to pick your favorite parameters of the Julia Set. \n
\n The white circles are pre-defined ones with beautiful texture.\n
\n Or, click the Random Select button to roll out a plot.\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":459,"value":"---\n\n## Rendering Options","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"viewof fractalParams = {\n fractalDemoRefresh;\n const form = Inputs.form({\n maxIters: Inputs.range([10, 500], {\n value: 300,\n label: \"Iterations\",\n step: 1\n }),\n renderAmplitude: Inputs.range([0, 2], {\n value: 1.5,\n label: \"Render Amplitude\",\n step: 0.001\n }),\n palette: Inputs.select([0, 1, 2, 3, 4, 5, 6, 7], {\n label: \"Palette\",\n value: 1,\n format: (d) => [\"Black and White\", \"A\", \"B\", \"C\", \"D\", \"E\", \"F\", \"G\"][d]\n })\n });\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"viewof randomSelect = Inputs.button(\"Random Select\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":438,"value":"

Julia Set Plot

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"viewof fractalScreenshot = Inputs.button(\"screenshot\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":375,"value":"predefinedComplex","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":15,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"gpuio = require(\"gpu-io\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"d3 = require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":240,"value":"{\n fractalDemoRefresh;\n targetComplex.needsCompute = true;\n return \"Refresh the Plot\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"{\n now;\n return targetComplex;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"touchPadSetup = {\n return {\n width: 300,\n height: 300,\n realRange: [-1.0, 1.0],\n imageRange: [-1.0, 1.0],\n defaultReal: 0.38,\n defaultImage: -0.23\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"targetComplex = {\n return {\n real: touchPadSetup.defaultReal,\n image: touchPadSetup.defaultImage,\n needsCompute: true\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"viewof fractalDemoRefresh = Inputs.button(\"refresh\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 30:"$2f:body"