27:null 28:["$","title",null,{"children":"Möbius IFS | Tim Hutton | Observable"}] 2d:T534,cpuAccumulate = regl({ vert: ` precision highp float; attribute vec3 position; uniform mat3 view3; uniform float colorSpeed, colorPhase, pointSize, colorSign; varying vec3 color; #define PI ${Math.PI} vec3 colorscale (float t) { return 0.5 + 0.5 * vec3( cos((2.0 * PI) * t - colorPhase), cos((2.0 * PI) * (t - 1.0 / 3.0) - colorPhase), cos((2.0 * PI) * (t - 2.0 / 3.0) - colorPhase) ); } void main () { color = colorscale(position.z * colorSpeed * colorSign); vec2 xy = (view3 * vec3(position.xy, 1)).xy; gl_Position = vec4(xy, 0, 1); gl_PointSize = pointSize; }`, frag: ` precision lowp float; varying vec3 color; uniform highp float pointSize; void main () { gl_FragColor = vec4(1, color) / (pointSize * pointSize); }`, attributes: { position: regl.prop("cpuBuffer") }, uniforms: { colorSpeed: regl.prop("colorSpeed"), colorPhase: regl.prop("colorPhase"), colorSign: regl.prop("colorSign"), pointSize: regl.prop("pointSize") }, blend: { enable: true, func: { srcRGB: 1, srcAlpha: 1, dstRGB: 1, dstAlpha: 1 }, equation: { rgb: "add", alpha: "add" } }, framebuffer: regl.prop("dst"), primitive: "points", depth: { enable: false }, count: batchSize })2e:T6e4,performIteration = { const loop = regl.frame(({ tick }) => { try { if (~simulate.indexOf("Simulate") || mutable accumulateCount === 0) { if (mutable accumulateCount === 1) { accumulator.use(() => regl.clear({ color: [0, 0, 0, 0] })); } if (mode === "cpu") { if ((mutable accumulateCount + 1) % iterations === 0) { cpuInitialize(iterationArray); } iterate(iterationArray); cpuPositionBuffer.subdata(iterationArray); } configureViewport(viewport, (ctx) => { configureScales(scales.x, scales.y, (ctx) => { (mode === "cpu" ? cpuAccumulate : gpuAccumulate)({ a, b, c, d, cpuBuffer: cpuPositionBuffer, dst: accumulator, colorSpeed, colorPhase: (colorPhase * Math.PI) / 180, colorSign: !!~opts.indexOf("Flip colorscale") ? -1 : 1, pointSize: mutable accumulateCount === 0 ? 2 : 1 }); }); }); mutable dirty = true; mutable accumulateCount = mutable accumulateCount + 1; } if (mutable dirty) { copyToScreen({ src: accumulator, opacity: 1, brightness, contrast, accumulatorCount: Math.max(1, mutable accumulateCount), batchSize: stateSize * stateSize, gamma, dynamicRange, scaleFactor: scaleFactor(scales), invert: !!~opts.indexOf("Invert"), saturation }); mutable dirty = false; } } catch (e) { console.error(e); loop.cancel(); } }); invalidation.then(() => loop.cancel()); }2f:T1a4b,gpuAccumulate = regl({ vert: ` precision highp float; attribute float n; attribute float presets; uniform mat3 view3; uniform float colorSpeed, colorPhase, pointSize, sqrtBatchSize, colorSign; uniform vec2 offset; varying vec3 color; #define PI ${Math.PI} struct Mobius { vec2 a, b, c, d; }; struct IFS { Mobius a, b, c, d; // can we not make arrays? }; /*IFS skull = IFS( Mobius( vec2(0.4866733034189119,-0.3457824044206985), vec2(1.313262575615668,-1.397026140339055), vec2(0.6516350951229584,1.638719823441038), vec2(-1.8569883564943233,0.08818231772017304)), Mobius( vec2(0.5795578225793658,1.3549839078686818), vec2(-1.8961028244298554,1.6087998022720393), vec2(-1.6882600255129114,0.3069160294563704), vec2(0.0036256316221829365,-2.0331095041409233) ), Mobius( vec2(0.31508558391625563,1.0498951917336012), vec2(-0.7344985142475648,-0.9506556944928284), vec2(-1.288507550763319,-0.5351060846302649), vec2(-1.5200243034970713,0.21087848965428035) ) ); IFS stars = IFS( Mobius( vec2(1.496509486320491,-0.5973510559562649), vec2(1.363031770057287,0.5030253265047588), vec2(-0.4006162540899725,-0.31598846100639305), vec2(0.3877012648959322,-1.1534511520185347)), Mobius( vec2(0.37948263847029284,1.0729183770897013), vec2(-1.6818327845132162,-1.5667178744100405), vec2(-0.6804687668035543,-1.8026611211435384), vec2(0.18355448066088614,1.1028015889392742)), Mobius( vec2(-0.5482198806114792,1.0682003658572363), vec2(0.1303466381970876,-0.924249479448636), vec2(0.06475305759483793,-0.6112945687883007), vec2(1.130285084727879,-1.554137395983805))); IFS dragon = IFS( Mobius( vec2(-1.5049655316774313,-1.0046110176648915), vec2(0.6950357700194231,-0.432217929539951), vec2(1.0743308469633628,0.6074866445391349), vec2(-1.4504110751965176,1.084841058616748)), Mobius( vec2(0.8879006445000018,0.1631992819881769), vec2(1.8187741523098753,1.4747701825935757), vec2(0.9488978374634134,0.7531535508928877), vec2(0.2046657793807769,-2.1349204141857965)), Mobius( vec2(0.6810830544856391,0.41883146175194397), vec2(-1.247827026913857,1.3800558371943485), vec2(1.2236590009001986,0.5638551016962444), vec2(-1.9784761192044398,-0.8425079666566594))); IFS gasket = IFS( Mobius( vec2(-0.1018252798481565,-1.6993659680125772), vec2(1.379590288668221,1.1523609868431468), vec2(0.4689151107386992,0.4121648021857115), vec2(1.7244514564858764,-1.4367706357328038)), Mobius( vec2(-0.7373058434565494,-0.08334095212148668), vec2(-1.6491235833287208,0.9879685699677004), vec2(-0.09822345862515205,-0.7683141638693157), vec2(-0.9538636622332818,-0.4259876509291862)), Mobius( vec2(-1.022065959402516,0.2559407944576475), vec2(1.6979795385246752,-0.501974961351221), vec2(1.410013313430138,-1.2657227272429628), vec2(1.0331107145329936,-0.25404098701767536))); IFS horsehead = IFS( Mobius( vec2(-0.620175038921428,1.3486543214753421), vec2(-0.1484539805952454,-0.44787716345703377), vec2(0.16257288894496202,1.8122404157983816), vec2(-0.3222155161945405,0.9625246056492645) ), Mobius( vec2(-0.7583961504085504,-1.3767091668206852), vec2(-0.9072365341139186,-0.9145698171667607), vec2(1.0177899842219502,1.347423640986904), vec2(0.4915774405750364,-1.7247189839909915) ), Mobius( vec2(-1.962175731310627,-0.7706747774053593), vec2(-1.3333358846582626,-1.5350176212096804), vec2(1.5549725520690356,0.32891254004323117), vec2(-1.3882946360470316,-1.8181413285838781) ) ); IFS ifs = stars; // choose your preset here */ //not yet functional // Following http://www.josleys.com/articles/Kleinian%20escape-time_3.pdf vec2 t = vec2(2.0, 0.0); // pure gasket //vec2 t = vec2(1.96, 0.07); //vec2 t = vec2(1.92, 0.03); //vec2 t = vec2(1.85738240046052, -0.0762580599328681); IFS ifs = IFS( Mobius( t, vec2(0.0, -1.0), vec2(0.0, -1.0), vec2(0.0, 0.0) ), Mobius( vec2(1.0, 0.0), vec2(2.0, 0.0), vec2(0.0, 0.0), vec2(1.0, 0.0) ), Mobius( vec2(0.0, 0.0), vec2(0.0, 1.0), vec2(0.0, 1.0), t ), Mobius( vec2(1.0, 0.0), vec2(-2.0, 0.0), vec2(0.0, 0.0), vec2(1.0, 0.0) ) ); vec2 mul_complex( vec2 a, vec2 b ) { return vec2( a.x * b.x - a.y * b.y, a.y * b.x + a.x * b.y ); } vec2 div_complex( vec2 a, vec2 b ) { float len2_b = b.x * b.x + b.y * b.y; return vec2( ( a.x * b.x + a.y * b.y ) / len2_b, ( a.y * b.x - a.x * b.y ) / len2_b ); } vec2 add( vec2 a, vec2 b ) { return vec2( a.x + b.x, a.y + b.y ); } vec2 mobius_on_point( vec2 a, vec2 b, vec2 c, vec2 d, vec2 xy ) { return div_complex( add( mul_complex( a, xy ), b ), add( mul_complex( c, xy ), d ) ); } float rand(vec2 co) { return fract(sin(dot(co, vec2(12.9898, 78.233))) * 43758.5453); } vec2 iterate (vec2 xy, out float branch_value) { branch_value = rand(xy + branch_value); // is there a better way to make randomness? Mobius mobius; if( branch_value < 0.25 ) { mobius = ifs.a; } else if( branch_value < 0.5 ) { mobius = ifs.b; } else if( branch_value < 0.75 ) { mobius = ifs.c; } else { mobius = ifs.d; } return mobius_on_point( mobius.a, mobius.b, mobius.c, mobius.d, xy ); } vec3 colorscale (float t) { return 0.5 + 0.5 * vec3( cos((2.0 * PI) * t - colorPhase), cos((2.0 * PI) * (t - 1.0 / 3.0) - colorPhase), cos((2.0 * PI) * (t - 2.0 / 3.0) - colorPhase) ); } void main () { vec2 p = 4.0 * vec2(mod(n, sqrtBatchSize), floor(n / sqrtBatchSize)) / sqrtBatchSize + offset; float smoothed_branch_value = 0.5; float branch_value; for (int i = 0; i < ${iterations}; i++) { p = iterate(p, branch_value); smoothed_branch_value = smoothed_branch_value * 0.9 + branch_value * 0.1; } // smoothed_branch_value tells us the last transforms used, and allows color speed and phase to be applied color = colorscale(smoothed_branch_value * colorSpeed * colorSign); vec2 xy = (view3 * vec3(p, 1)).xy; gl_Position = vec4(xy, 0, 1); gl_PointSize = pointSize; }`, frag: ` precision lowp float; varying vec3 color; uniform highp float pointSize; void main () { gl_FragColor = vec4(1, color) / (pointSize * pointSize); }`, attributes: { n: randobuffer }, uniforms: { offset: () => [Math.random() * 2 - 1, Math.random() * 2 - 1], colorSpeed: regl.prop("colorSpeed"), colorPhase: regl.prop("colorPhase"), pointSize: regl.prop("pointSize"), colorSign: regl.prop("colorSign"), sqrtBatchSize: Math.floor(Math.sqrt(batchSize)) }, blend: { enable: true, func: { srcRGB: 1, srcAlpha: 1, dstRGB: 1, dstAlpha: 1 }, equation: { rgb: "add", alpha: "add" } }, framebuffer: regl.prop("dst"), primitive: "points", depth: { enable: false }, count: batchSize })30:T8ac,copyToScreen = regl({ vert: ` precision highp float; varying vec2 uv; attribute vec2 xy; void main () { uv = 0.5 + 0.5 * xy; gl_Position = vec4(xy, 0, 1); }`, frag: ` precision highp float; varying vec2 uv; uniform sampler2D src; uniform float opacity, brightness, contrast, gamma, scale, saturation, dynamicRange; uniform bool invert; vec3 rgb2yuv(vec3 rgb) { float y = 0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b; return vec3(y, 0.493 * (rgb.b - y), 0.877 * (rgb.r - y)); } vec3 yuv2rgb(vec3 yuv) { return vec3( yuv.x + (1.0 / 0.877) * yuv.z, yuv.x - 0.39393 * yuv.y - 0.58081 * yuv.z, yuv.x + (1.0 / 0.493) * yuv.y ); } // power smooth min (k=8) float smoothLimit(float x, float k) { x = 2.0 * x - 1.0; float a = pow(abs(x), 1.0 / k); return sign(x) * pow(a / (a + 1.0), k) * 0.5 + 0.5; } void main () { vec4 state = texture2D(src, uv); float density = state.r / scale; float v = density == 0.0 ? -20.0 : (log(density) - log(1.0)) / (log(1000.0) - log(1.0)); float value = contrast * v + brightness; value = smoothLimit(value, dynamicRange); if (invert) value = 1.0 - value; vec3 rgb = state.gba / max(state.r, 1.0); vec3 yuv = rgb2yuv(rgb); // Use the lightness from the overall density yuv.x = value; // Fade the saturation to zero at white and black: yuv.yz *= saturation * value * (1.0 - value) * 4.0; rgb = yuv2rgb(yuv); gl_FragColor = vec4(pow(rgb, vec3(1.0 / gamma)), 1.0); }`, attributes: { xy: [-4, -4, 4, -4, 0, 4] }, uniforms: { src: regl.prop("src"), scale: (ctx, props) => { const WH = ctx.framebufferWidth * ctx.framebufferHeight; const N = props.accumulatorCount * props.batchSize; return (N / WH) * props.scaleFactor; }, brightness: (ctx, props) => props.invert ? props.brightness : 1.0 - props.brightness, dynamicRange: regl.prop("dynamicRange"), contrast: regl.prop("contrast"), opacity: regl.prop("opacity"), gamma: regl.prop("gamma"), invert: regl.prop("invert"), saturation: regl.prop("saturation") }, count: 3, depth: { enable: false } })31:T5d4,function createReglViewportConfiguration(regl) { const viewport3 = mat3create(); let command = regl({ scissor: { enable: true, box: { x: (ctx, props) => ctx.pixelRatio * props.margin.l, y: (ctx, props) => ctx.pixelRatio * props.margin.b, width: (ctx, props) => ctx.framebufferWidth - ctx.pixelRatio * (props.margin.r + props.margin.l), height: (ctx, props) => ctx.framebufferHeight - ctx.pixelRatio * (props.margin.t + props.margin.b) } }, viewport: { x: (ctx, props) => ctx.pixelRatio * props.margin.l, y: (ctx, props) => ctx.pixelRatio * props.margin.b, width: (ctx, props) => ctx.framebufferWidth - ctx.pixelRatio * (props.margin.r + props.margin.l), height: (ctx, props) => ctx.framebufferHeight - ctx.pixelRatio * (props.margin.t + props.margin.b) }, uniforms: { viewportResolution: (ctx, props) => [ ctx.viewportWidth, ctx.viewportHeight ], framebufferResolution: (ctx) => [ ctx.framebufferWidth, ctx.framebufferHeight ], inverseViewportResolution: (ctx, props) => [ 1 / ctx.viewportWidth, 1 / ctx.viewportHeight ], inverseFramebufferResolution: (ctx) => [ 1 / ctx.framebufferWidth, 1 / ctx.framebufferHeight ] } }); return function (viewport, callback) { command(viewport, callback); }; }32:[] 2b:{"id":"b68c40665f1c67c7","slug":null,"title":"Möbius IFS","thumbnail":"b37472519ae1b09b31810cafa6f076e38d1f2340420b69ef70c1c1e76ebbf8ea","access_level":"public","create_time":"$D2022-01-14T01:45:26.974Z","update_time":"$D2022-01-14T13:34:17.555Z","view_time":null,"first_public_time":"$D2023-04-22T00:08:31.801Z","has_unpublished_edits":null,"fork":{"id":"86b193b0b2d85e8e","slug":"mobius-ifs","title":"Möbius IFS","owner":{"id":"1910b5bcfca29488","login":"timhutton","name":"Tim Hutton"}},"stars":1,"starred":false,"owner":{"type":"team","id":"1910b5bcfca29488","login":"timhutton","name":"Tim Hutton","avatar_url":"https://avatars-next.observableusercontent.com/75a0b84d59cbb4e3a15c198e37d1991c4c41b774d4ab3d57bdfa9adf8a112337","tier":"starter_2024"},"version":2665,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5ad03a6f80fa4c41","login":"timhutton","name":"Tim Hutton","avatar_url":"https://avatars-next.observableusercontent.com/75a0b84d59cbb4e3a15c198e37d1991c4c41b774d4ab3d57bdfa9adf8a112337","tier":null}],"members":[{"type":"individual","id":"5ad03a6f80fa4c41","login":"timhutton","name":"Tim Hutton","avatar_url":"https://avatars-next.observableusercontent.com/75a0b84d59cbb4e3a15c198e37d1991c4c41b774d4ab3d57bdfa9adf8a112337","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Möbius IFS","cells":[{"id":975,"value":"md`# Möbius IFS`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1251,"value":"md`This is an [Iterated Function System](https://en.wikipedia.org/wiki/Iterated_function_system) using three [Möbius transforms](https://timhutton.github.io/mobius-transforms/), with hard-coded parameters found using [this](https://timhutton.github.io/mobius-transforms/ifs.html) javascript UI.\n\nThanks to [Ricky Reusser](https://observablehq.com/@rreusser) for the [original version](https://observablehq.com/d/dff9634f8a7809e1) of this observable.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":365,"value":"tex`\\mathrm{accumulated\\;points} = ${(\n accumulateCount *\n stateSize *\n stateSize\n).toLocaleString()}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"viewof restart = Inputs.button(\"Restart\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"viewof regl = {\n const canvas = reglCanvas(this, {\n attributes: {\n antialias: false,\n depthStencil: false,\n preserveDrawingBuffer: true\n },\n extensions: [\"OES_texture_float\"],\n pixelRatio: devicePixelRatio,\n width: viewport.width,\n height: viewport.height\n });\n canvas.style.maxWidth = \"100%\";\n canvas.style.height = \"auto\";\n canvas.style.cursor = \"move\";\n canvas.style.border = \"1px solid #ccc\";\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":649,"value":"viewof opts = {\n const value = [];\n if (parsedURL.has(\"invert\") && parsedURL.get(\"invert\")) value.push(\"Invert\");\n if (parsedURL.has(\"flip\") && parsedURL.get(\"flip\"))\n value.push(\"Flip colorscale\");\n\n return Inputs.checkbox([\"Invert\", \"Flip colorscale\"], { value });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":581,"value":"viewof brightness = Inputs.range([-0.5, 1.5], {\n value: parsedURL.has(\"brightness\") ? parsedURL.get(\"brightness\") : 0.67,\n label: \"Brightness\"\n //transform: Math.log\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":596,"value":"viewof contrast = Inputs.range([0.1, 2], {\n value: parsedURL.has(\"contrast\") ? parsedURL.get(\"constrast\") : 0.63,\n label: \"Contrast\"\n //transform: Math.log\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1014,"value":"viewof saturation = Inputs.range([0, 1], {\n value: parsedURL.has(\"saturation\") ? parsedURL.get(\"saturation\") : 0.0,\n label: \"Saturation\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1999,"value":"viewof dynamicRange = Inputs.range([0.1, 1.0], {\n value: parsedURL.has(\"dynamicRange\") ? parsedURL.get(\"dynamicRange\") : 0.22,\n label: \"Dynamic range compression\",\n transform: Math.log\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1057,"value":"viewof colorSpeed = Inputs.range([0.1, 10], {\n value: parsedURL.has(\"colorSpeed\") ? parsedURL.get(\"colorSpeed\") : 5.3,\n label: \"Color speed\",\n transform: Math.log\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1123,"value":"viewof colorPhase = Inputs.range([0, 360], {\n value: parsedURL.has(\"colorPhase\") ? parsedURL.get(\"colorPhase\") : 183,\n label: \"Color phase\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":609,"value":"viewof gamma = Inputs.range([0.1, 10], {\n value: parsedURL.has(\"gamma\") ? parsedURL.get(\"gamma\") : 2.2,\n label: \"Gamma\",\n transform: Math.log\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1225,"value":"viewof batchSize = Inputs.range([500000, 4000000], {\n value: 500000,\n label: \"Batch size\",\n transform: Math.log,\n step: 2\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1454,"value":"viewof iterations = Inputs.range([1, 50], {\n value: 25,\n label: \"Iterations\",\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1690,"value":"viewof size = Inputs.select(\n [\n \"256 × 256\",\n \"512 × 512\",\n \"1024 × 1024\",\n \"2048 × 2048\",\n \"1680 × 1050\",\n \"page width\"\n ],\n {\n value: \"page width\",\n label: `Size (dpi = ${window.devicePixelRatio})`\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1491,"value":"viewof mode = Inputs.radio([\"cpu\", \"gpu\"], {\n value: \"gpu\",\n label: \"Computation mode\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1753,"value":"link = {\n const url = new URL(document.baseURI);\n const q = url.searchParams;\n q.set(\"type\", type);\n q.set(\"a\", a);\n q.set(\"b\", b);\n q.set(\"c\", c);\n q.set(\"d\", d);\n q.set(\"brightness\", brightness);\n q.set(\"contrast\", contrast);\n q.set(\"gamma\", gamma);\n q.set(\"saturation\", saturation);\n q.set(\"colorSpeed\", colorSpeed);\n q.set(\"colorPhase\", colorPhase);\n q.set(\"invert\", !!~opts.indexOf(\"Invert\"));\n q.set(\"flip\", !!~opts.indexOf(\"Flip colorscale\"));\n\n return html`🔗 Link to this configuration`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1594,"value":"{\n const btn = Inputs.button(\"Download PNG\");\n const sig = `${type === \"Clifford\" ? \"clifford\" : \"de-jong\"}_a${a.toFixed(\n 4\n )}_b${b.toFixed(4)}_c${c.toFixed(4)}_d${d.toFixed(4)}.png`;\n\n btn.addEventListener(\"input\", () => {\n downloadURI(regl._gl.canvas.toDataURL(), sig);\n });\n return btn;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"mutable accumulateCount = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":865,"value":"mutable dirty = true","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1767,"value":"parsedURL = new Map(Object.entries(parseQueryString(document.location.search)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1702,"value":"shape = size === \"page width\"\n ? [width, width]\n : size.split(\"×\").map((str) => parseInt(str.trim(), 10))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1288,"value":"{\n opts;\n brightness, contrast;\n gamma;\n saturation;\n dynamicRange;\n mutable dirty = true;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1625,"value":"md`### CPU-specific methods`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1478,"value":"iterationArray = new Array(batchSize * 3).fill(0) //new Float64Array(batchSize * 2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1485,"value":"cpuPositionBuffer = {\n const buffer = regl.buffer(iterationArray);\n invalidation.then(() => buffer.destroy());\n return buffer;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1473,"value":"function iterate(array) {\n // Clifford:\n // x2 = sin(a * y) + c * cos(a * x);\n // y2 = sin(b * x) + d * cos(b * y);\n // de Jong:\n // x2 = sin(a * y) - cos(b * x),\n // y2 = sin(c * x) - cos(d * y)\n\n let a1, a2, a3, b1, b2, b3;\n if (type === \"Clifford\") {\n a1 = a;\n a2 = c;\n a3 = a;\n b1 = b;\n b2 = d;\n b3 = b;\n } else {\n a1 = a;\n a2 = -1;\n a3 = b;\n b1 = c;\n b2 = -1;\n b3 = d;\n }\n\n for (let i = 0; i < array.length; i += 3) {\n let x = array[i];\n let y = array[i + 1];\n\n let x2 = Math.sin(a1 * y) + a2 * Math.cos(a3 * x);\n let y2 = Math.sin(b1 * x) + b2 * Math.cos(b3 * y);\n\n let dx = x2 - x;\n let dy = y2 - y;\n let dist = Math.sqrt(dx * dx + dy * dy);\n\n array[i] = x2;\n array[i + 1] = y2;\n array[i + 2] = dist;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1515,"value":"function cpuInitialize(array) {\n let ox = Math.random() * 2 - 1;\n let oy = Math.random() * 2 - 1;\n let w = Math.sqrt(batchSize);\n\n let a1, a2, a3, b1, b2, b3;\n if (type === \"Clifford\") {\n a1 = a;\n a2 = c;\n a3 = a;\n b1 = b;\n b2 = d;\n b3 = b;\n } else {\n a1 = a;\n a2 = -1;\n a3 = b;\n b1 = c;\n b2 = -1;\n b3 = d;\n }\n for (let i = 0; i < array.length; i += 3) {\n let ii = array.length * Math.random();\n let x = (4 * ((ii / 2) % w)) / w + ox;\n let y = (4 * ii) / 2 / w / w + oy;\n for (let j = 0; j < 15; j++) {\n let x2 = Math.sin(a1 * y) + a2 * Math.cos(a3 * x);\n let y2 = Math.sin(b1 * x) + b2 * Math.cos(b3 * y);\n x = x2;\n y = y2;\n }\n array[i] = x;\n array[i + 1] = y;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1496,"value":"$2d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1629,"value":"md`### GPU Implementation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":906,"value":"scales = {\n const ar = viewport.width / viewport.height;\n const x = d3\n .scaleLinear()\n .range([0, regl._gl.canvas.offsetWidth])\n .domain([-6 * ar, 6 * ar]);\n const y = d3\n .scaleLinear()\n .range([regl._gl.canvas.offsetWidth, 0])\n .domain([-6, 6]);\n return { x, y, xOriginal: x.copy(), yOriginal: y.copy() };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":824,"value":"attachZoom = {\n function persistentZoom(\n xScale,\n yScale,\n originalXScale,\n originalYScale,\n callback\n ) {\n return d3.zoom().on(\"zoom\", function ({ transform }) {\n let range;\n\n range = xScale.range().map(transform.invertX, transform);\n xScale.domain(originalXScale.domain());\n xScale.domain(range.map(xScale.invert, xScale));\n\n range = yScale.range().map(transform.invertY, transform);\n yScale.domain(originalYScale.domain());\n yScale.domain(range.map(yScale.invert, yScale));\n });\n }\n d3.select(regl._gl.canvas).call(\n persistentZoom(scales.x, scales.y, scales.xOriginal, scales.yOriginal).on(\n \"zoom.clearAccumulator\",\n () => {\n regl.poll();\n clearAccumulator();\n }\n )\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"stateSize = Math.floor(Math.sqrt(batchSize))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":754,"value":"viewport = ({\n width: shape[0],\n height: shape[1],\n dpi: devicePixelRatio,\n margin: { t: 0, r: 0, b: 0, l: 0 }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":934,"value":"function scaleFactor(scales) {\n const X = scales.x.domain()[1] - scales.x.domain()[0];\n const X0 = scales.xOriginal.domain()[1] - scales.xOriginal.domain()[0];\n const Y = scales.y.domain()[1] - scales.y.domain()[0];\n const Y0 = scales.yOriginal.domain()[1] - scales.yOriginal.domain()[0];\n return (X * Y) / (X0 * Y0);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":875,"value":"function clearAccumulator() {\n accumulator.use(() => regl.clear({ color: [0, 0, 0, 0] }));\n mutable accumulateCount = 0;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"performInitialization = {\n restart;\n iterations;\n batchSize;\n type;\n a, b, c, d;\n colorSpeed;\n colorPhase;\n if (mode === \"cpu\") {\n cpuInitialize(iterationArray);\n }\n regl.poll();\n clearAccumulator();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1365,"value":"randobuffer = {\n const data = Float32Array.from(Array.from(Array(batchSize).keys()));\n const buffer = regl.buffer(data);\n invalidation.then(() => buffer.destroy());\n return buffer;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"accumulator = regl.framebuffer({\n width: regl._gl.canvas.width,\n height: regl._gl.canvas.height,\n colorType: \"float\",\n colorFormat: \"rgba\",\n depthStencil: false\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":752,"value":"configureViewport = createReglViewportConfiguration(regl)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":748,"value":"configureScales = createReglLinearScaleConfiguration(regl)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"function createTextureLookupTable(w, h, stride) {\n stride = stride || 2;\n var n = w * h * stride;\n\n var out = new Float32Array(n);\n\n for (var i = 0, iStride = 0; iStride < n; i++, iStride += stride) {\n out[iStride] = ((i % w) + 0.5) / w;\n out[iStride + 1] = (((i / w) | 0) + 0.5) / h;\n }\n\n return out;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":790,"value":"function createReglLinearScaleConfiguration(regl) {\n const matrices = {\n view3: mat3create(),\n inverseView3: mat3create(),\n view: mat4create(),\n inverseView: mat4create()\n };\n const command = regl({\n context: {\n view3: regl.prop(\"view3\"),\n inverseView3: regl.prop(\"inverseView3\"),\n view: regl.prop(\"view\"),\n inverseView: regl.prop(\"inverseView\")\n },\n uniforms: {\n view3: regl.prop(\"view3\"),\n inverseView3: regl.prop(\"inverseView3\"),\n view: regl.prop(\"view\"),\n inverseView: regl.prop(\"inverseView\")\n }\n });\n\n return function (xScale, yScale, clbk) {\n mat3fromLinearScales(matrices.view3, xScale, yScale);\n mat3invert(matrices.inverseView3, matrices.view3);\n mat4fromMat3(matrices.view, matrices.view3);\n mat4fromMat3(matrices.inverseView, matrices.inverseView3);\n command(matrices, clbk);\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":780,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":706,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"import { reglCanvas } from \"@rreusser/regl-canvas\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":792,"value":"import { mat4create, mat4fromMat3 } from \"@rreusser/gl-mat4\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":782,"value":"import { mat3create, mat3invert, mat3multiply } from \"@rreusser/gl-mat3\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1590,"value":"import { downloadURI, parseQueryString } from \"@rreusser/utils\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1675,"value":"import { FineRange } from \"@rreusser/fine-range\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":794,"value":"function mat3fromLinearScales(out, xScale, yScale) {\n let xDomain = xScale.domain();\n let yDomain = yScale.domain();\n\n let xs = 2 / (xDomain[1] - xDomain[0]);\n let ys = 2 / (yDomain[1] - yDomain[0]);\n\n out[0] = xs;\n out[1] = 0;\n out[2] = 0;\n\n out[3] = 0;\n out[4] = ys;\n out[5] = 0;\n\n out[6] = -1 - xs * xDomain[0];\n out[7] = -1 - ys * yDomain[0];\n out[8] = 1;\n\n return out;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":630,"value":"viewof type = Inputs.radio([\"Clifford\", \"de Jong\"], {\n label: \"Type\",\n value: parsedURL.has(\"type\") ? parsedURL.get(\"type\") : \"Clifford\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"viewof a = FineRange([-2.5, 2.5], {\n value: parsedURL.has(\"a\") ? parsedURL.get(\"a\") : -1.85,\n label: \"a\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"viewof b = FineRange([-2.5, 2.5], {\n value: parsedURL.has(\"b\") ? parsedURL.get(\"b\") : -2.5,\n label: \"b\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"viewof c = FineRange([-2.5, 2.5], {\n value: parsedURL.has(\"c\") ? parsedURL.get(\"c\") : -1.05,\n label: \"c\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"viewof d = FineRange([-2.5, 2.5], {\n value: parsedURL.has(\"d\") ? parsedURL.get(\"d\") : 0.585,\n label: \"d\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"viewof simulate = Inputs.checkbox([\"Simulate\"], { value: [\"Simulate\"] })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2c:"$2b:body"