2d:null 2e:["$","title",null,{"children":"The Mandelbrot Set | Jeremy Ashkenas | Observable"}] 33:T44d,setupControls = { let wheelAccum = 0; let dragPoint = null; let cancelClick = false; function wheelZoom(pos) { const factor = Math.pow(2, wheelAccum / 200); pos.x = pos.x.add(mutable aim.x.sub(pos.x).mul(factor)); pos.y = pos.y.add(mutable aim.y.sub(pos.y).mul(factor)); simpleZoom(pos, factor); wheelAccum = 0; } canvas.onclick = e => { if (!cancelClick) { simpleZoom(getPos(e), 1 / 2); } cancelClick = false; }; canvas.onmousedown = e => { dragPoint = getPos(e); }; canvas.onmousemove = e => { if (dragPoint) { cancelClick = true; const pos = getPos(e); simpleMove({ x: mutable aim.x.sub(pos.x.sub(dragPoint.x)), y: mutable aim.y.sub(pos.y.sub(dragPoint.y)) }); } }; canvas.onmouseup = e => { dragPoint = null; }; canvas.onwheel = e => { e.preventDefault(); if (wheelAccum == 0) { setTimeout( () => wheelZoom(getPos(e)), Math.max(mutable renderTime, minMsPerFrame) ); } wheelAccum += e.deltaY; }; draw(); return true; }34:T4f5,function draw() { const _aim = mutable aim; try { const start = performance.now(); const origin = searchOrigin(0); const orbit = calcOrbit(origin); const texsize = Math.ceil(Math.sqrt(orbit.length / 4)); const orbittex = twgl.createTexture(gl, { format: gl.RGBA, type: gl.FLOAT, minMag: gl.NEAREST, wrap: gl.CLAMP_TO_EDGE, src: orbit }); const attribs = { a_position: { data: [1, 1, 1, -1, -1, -1, -1, 1], numComponents: 2 } }; const bufferInfo = twgl.createBufferInfoFromArrays(gl, attribs); twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo); const uniforms = { rotator: [Math.sin(_aim.phi), Math.cos(_aim.phi)], center: [ _aim.x.sub(origin.x).toNumber(), _aim.y.sub(origin.y).toNumber() ], size: [_aim.hx.toNumber(), _aim.hy.toNumber()], pixelsize: [ _aim.hx.toNumber() / gl.canvas.width, _aim.hy.toNumber() / gl.canvas.height ], texsize: texsize, orbittex: orbittex }; twgl.setUniforms(programInfo, uniforms); twgl.drawBufferInfo(gl, bufferInfo, gl.TRIANGLE_FAN); mutable renderTime = Math.round(performance.now() - start); } catch (error) { console.error(error); } }35:Tb8e,frag = () => ` precision highp float; #define imax ${imax} #define square_radius ${squareRadius}. const float logLogRR = log2(log2(square_radius)); varying vec2 delta; varying vec2 texcoord; uniform vec2 rotator; uniform vec2 size; uniform vec2 pixelsize; uniform float texsize; uniform sampler2D orbittex; vec4 unpackOrbit(int i) { float fi = float(i); vec2 texcoord = vec2(mod(fi, texsize), floor(fi / texsize)) / texsize; return texture2D(orbittex, texcoord); } float interpolate(float s, float s1, float s2, float s3, float d) { float d2 = d * d, d3 = d * d2; return 0.5 * (s * (d3 - d2) + s1 * (d + 4.*d2 - 3.*d3) + s2 * (2. - 5.*d2 + 3.*d3) + s3 * (-d + 2.*d2 - d3)); } struct result { float time; float zz; float dzdz; float stripe; float argZ; }; /* fractal calculator with perturbation theory for mandelbrot & julia set */ result calculator(vec2 AA) { float u = delta.x + AA.x, v = delta.y + AA.y; float zz, time, temp, du = 0., dv = 0.; float stripe, s1, s2, s3; vec2 z, dz, O, dO; for (int i = 0; i < imax; i++) { /* Recall global coordinates: Z = O + W, Z' = O' + W' */ vec4 values = unpackOrbit(i); O = values.xy; dO = values.zw; z = O + vec2(u, v); dz = dO + vec2(du, dv); zz = dot(z, z); /* Calc derivative: dW'(u,v) -> 2 * (O' * W + Z * W') */ temp = 2. * (dO.x * u - dO.y * v + z.x * du - z.y * dv); dv = 2. * (dO.x * v + dO.y * u + z.x * dv + z.y * du); du = temp; /* Next step in the iterative process: W(u,v) -> W^2 + 2 * O * W + */ temp = u * u - v * v + 2. * (u * O.x - v * O.y); v = u * v + u * v + 2. * (v * O.x + u * O.y); u = temp; u += delta.x; v += delta.y; /* Stripe average, a color algo based on statistcs */ stripe += z.x * z.y / zz * step(0.0, time); s3 = s2; s2 = s1; s1 = stripe; /* Loop in webgl1 */ time += 1.; if (zz > square_radius) { break; } } time += clamp(1.0 + logLogRR - log2(log2(zz)), 0., 1.); stripe = interpolate(stripe, s1, s2, s3, fract(time)); return result(time, zz, dot(dz,dz), stripe, atan(z.y, z.x)); } void main() { /* Get result */ result R = calculator(vec2(0)); /* DEM (Distance Estimation) = 2 * |Z / Z'| * ln(|Z|) */ float dem = sqrt(R.zz / R.dzdz) * log2(R.zz); float dem_weight = 800. / min(size.x, size.y); /* Final coloring */ vec3 color; color += 0.7 + 2.5 * (R.stripe / clamp(R.time, 0., 200.)) * (1. - 0.6 * step(float(imax), 1. + R.time)); color = 0.5 + 0.5 * sin(color + vec3(${colorA}, ${colorB}, ${colorC}) + 50.0 * R.time / float(imax)); gl_FragColor = vec4(color, 1.); }`36:[] 31:{"id":"369815c53f90ef7e","slug":"the-mandelbrot-set","title":"The Mandelbrot Set","thumbnail":"ea4fc51c705b81fc53edbde571f4a2451cfdb88fdaf064289ef1f20e6476d31e","access_level":"public","create_time":"$D2019-05-31T22:30:17.711Z","update_time":"$D2022-04-29T18:23:07.245Z","view_time":null,"first_public_time":"$D2019-06-18T19:01:20.745Z","has_unpublished_edits":null,"fork":false,"stars":48,"starred":false,"owner":{"type":"team","id":"172cc08ef8a18a4b","login":"jashkenas","name":"Jeremy Ashkenas","avatar_url":"https://avatars-next.observableusercontent.com/fa1903f8171d4621ef49de28e0ff1fb965960ec87df175d8b543c4b09508b45b","tier":"starter_2024"},"version":598,"publish_version":598,"role":null,"authored":false,"authors":[{"type":"individual","id":"783616ba9fb55f5d","login":"jashkenas","name":"Jeremy Ashkenas","avatar_url":"https://avatars-next.observableusercontent.com/fa1903f8171d4621ef49de28e0ff1fb965960ec87df175d8b543c4b09508b45b","tier":null}],"members":[{"type":"individual","id":"783616ba9fb55f5d","login":"jashkenas","name":"Jeremy Ashkenas","avatar_url":"https://avatars-next.observableusercontent.com/fa1903f8171d4621ef49de28e0ff1fb965960ec87df175d8b543c4b09508b45b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"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":"The Mandelbrot Set","cells":[{"id":0,"value":"md`# The Mandelbrot Set\n\n*Use the mousewheel (two fingered swipe) to zoom, drag to pan, or click or tap to zoom in.
Ported from [Deepfractal.js.org](https://deepfractal.js.org). License: [GPL 3.0](https://www.gnu.org/licenses/gpl-3.0.en.html)* ${(() => {\n const button = html``;\n button.onclick = () => {\n window.open(permalink(getSettings()));\n };\n return button;\n})()}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"canvas = html`