2e:null 2f:["$","title",null,{"children":"Clifford and de Jong Attractors: Revised coloring | Ricky Reusser | Observable"}] 34:T90a,md`This notebook interactively implements the discrete attractors of [Clifford Pickover](http://paulbourke.net/fractals/clifford/) and [Peter de Jong](http://paulbourke.net/fractals/peterdejong/). You can pan and zoom using the mouse or a touch screen. Clifford attractors are defined by ${tex.block`\begin{aligned} x_{n + 1} &= \sin(a y_n) + c \cos(a x_n) \\ y_{n + 1} &= \sin(b x_n) + d \cos(b y_n) \end{aligned}`} while de Jong attractors are defined by ${tex.block`\begin{aligned} x_{n + 1} &= \sin(a y_n) - c \cos(b x_n) \\ y_{n + 1} &= \sin(c x_n) - d \cos(d y_n). \end{aligned}`} A grid of points is offset randomly and iterated some fixed numbers of times, after which the points are accumulated onto a WebGL texture, effectively computing a histogram of the attractor. Since single precision isn't adequate, you can switch to CPU mode for a final render—if you're willing to wait a bit longer for it to converge. Consistent point density is computed using the formula in [this notebook](https://observablehq.com/@rreusser/selecting-the-right-opacity-for-2d-point-clouds?collection=@rreusser/writeups). Coloring is accomplished by plugging the distance traveled by the most recent iteration into a color scale. The RGB color of iterated points falling within each pixel is accumulated additively, together with the count. To compute an average pixel color, we divide the accumulated color by the accumulated number of hits. Working in the [YUV color space](https://en.wikipedia.org/wiki/YUV) to compute the final color, lightness (Y) is assigned from the logarithm of the total count, while color (UV) is assigned from the average color. If you'd like to learn how the attractors can be computed in WebGL, Mike Bostock's notebook [Making WebGL Dance](https://observablehq.com/@mbostock/making-webgl-dance) is a fun interactive walkthrough. (See also: [Clifford Attractors I](https://observablehq.com/@mbostock/clifford-attractor), [Clifford Attractor II](https://observablehq.com/@mbostock/clifford-attractor-ii), and [Clifford Attractor III](https://observablehq.com/@mbostock/clifford-attractor-iii)). And for an approach using an interesting and more general library, see Yuri Vishnevsky's beautiful implementation in [Strange Attractors](https://observablehq.com/@twitter/strange-attractors). `35:T69e,cpuAccumulate = regl({ vert: ` precision highp float; attribute vec4 position; uniform mat3 view3; uniform float colorSpeed, colorPhase, pointSize, colorSign, jitter; uniform vec2 resolution; 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) ); } const float g = 1.32471795724474602596; const vec2 q = vec2(1.0 / g, 1.0/(g*g)); vec2 qrand2(float n) { return fract(0.5 + q * n); } 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; gl_Position.xy += jitter * (qrand2(position.w) - 0.5) / resolution; }`, 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: { resolution: ({ framebufferWidth: w, framebufferHeight: h }) => [w, h], colorSpeed: regl.prop("colorSpeed"), colorPhase: regl.prop("colorPhase"), colorSign: regl.prop("colorSign"), pointSize: regl.prop("pointSize"), jitter: regl.prop("jitter") }, 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 })36:T6fa,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, jitter, 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()); }37:T9e4,gpuAccumulate = regl({ vert: ` precision highp float; attribute float n; uniform mat3 view3; uniform float a, b, c, d, jitter; uniform float colorSpeed, colorPhase, pointSize, sqrtBatchSize, colorSign; uniform vec2 offset, resolution; varying vec3 color; #define PI ${Math.PI} ${ type === "Clifford" ? ` vec2 iterate (vec2 state) { return vec2( sin(a * state.y) + c * cos(a * state.x), sin(b * state.x) + d * cos(b * state.y) ); } ` : ` vec2 iterate (vec2 state) { return vec2( sin(a * state.y) - cos(b * state.x), sin(c * state.x) - cos(d * state.y) ); } ` } 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) ); } const float g = 1.32471795724474602596; const vec2 q = vec2(1.0 / g, 1.0/(g*g)); vec2 qrand2(float n) { return fract(0.5 + q * n); } void main () { vec2 p = 4.0 * vec2(mod(n, sqrtBatchSize), floor(n / sqrtBatchSize)) / sqrtBatchSize + offset; for (int i = 0; i < ${iterations - 1}; i++) { p = iterate(p); } vec2 pn = iterate(p); float dist = length(p - pn); color = colorscale(dist * colorSpeed * colorSign); vec2 xy = (view3 * vec3(pn, 1)).xy; gl_Position = vec4(xy, 0, 1); gl_PointSize = pointSize; gl_Position.xy += jitter * (qrand2(n) - 0.5) / resolution; }`, frag: ` precision lowp float; varying vec3 color; uniform highp float pointSize; void main () { gl_FragColor = vec4(1, color) / (pointSize * pointSize); }`, attributes: { n: randobuffer }, uniforms: { resolution: ({ framebufferWidth: w, framebufferHeight: h }) => [w, h], 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"), a: regl.prop("a"), b: regl.prop("b"), c: regl.prop("c"), d: regl.prop("d"), jitter: regl.prop("jitter"), 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 })38:T8ad,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 } })39: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); }; }3a:[] 32:{"id":"dff9634f8a7809e1","slug":"clifford-and-de-jong-attractors-revised-coloring","title":"Clifford and de Jong Attractors: Revised coloring","thumbnail":"a9e14a7f755e0053074ff94e8de8ac110465e8b55836faf0f26eb7149f5c195d","access_level":"public","create_time":"$D2022-01-12T05:50:27.835Z","update_time":"$D2026-01-13T17:21:17.667Z","view_time":null,"first_public_time":"$D2025-03-15T06:46:40.064Z","has_unpublished_edits":null,"fork":{"id":"ee86250a359243df","slug":"clifford-and-de-jong-attractors","title":"Clifford and de Jong Attractors","owner":{"id":"f1b8352b963a77b4","login":"rreusser","name":"Ricky Reusser"}},"stars":13,"starred":false,"owner":{"type":"team","id":"f1b8352b963a77b4","login":"rreusser","name":"Ricky Reusser","avatar_url":"https://avatars-next.observableusercontent.com/49c18a2ac0092176d4ea8348a1dd538e0b460b086b89d602b8d21ffe0821d92e","tier":"starter_2024"},"version":2137,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"908c4be2279a714e","login":"rreusser","name":"Ricky Reusser","avatar_url":"https://avatars-next.observableusercontent.com/fa41989f47bb986723af5b9c22176cb503748426f56e565000ea93acd9eab86c","tier":null}],"members":[{"type":"individual","id":"908c4be2279a714e","login":"rreusser","name":"Ricky Reusser","avatar_url":"https://avatars-next.observableusercontent.com/fa41989f47bb986723af5b9c22176cb503748426f56e565000ea93acd9eab86c","tier":null,"role":"editor"},{"type":"team","id":"f1b8352b963a77b4","login":"rreusser","name":"Ricky Reusser","avatar_url":"https://avatars-next.observableusercontent.com/49c18a2ac0092176d4ea8348a1dd538e0b460b086b89d602b8d21ffe0821d92e","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":null,"type":"notebook","body":{"title":"Clifford and de Jong Attractors: Revised coloring","cells":[{"id":975,"value":"md`# Clifford and de Jong Attractors: Revised coloring`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2134,"value":"*[Read this notebook ➡️](https://rreusser.github.io/notebooks/clifford-and-de-jong-attractors/) on my personal website via [Observable Notebook Kit](https://observablehq.com/notebook-kit/kit).*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1251,"value":"$34","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":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"},{"id":8,"value":"viewof regl = {\n const canvas = reglCanvas(this, {\n attributes: {\n antialias: false,\n depthStencil: false,\n preserveDrawingBuffer: true\n },\n optionalExtensions: [\"OES_texture_float\", \"OES_texture_half_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":2117,"value":"viewof floatFormat = Inputs.radio([\"float\", \"half float\"], {\n value: canWriteToFBOOfType(regl, \"float\") ? \"float\" : \"half float\",\n label: html`Floating format
switch to half float on mobile if float doesn't work`\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.3,\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\") : 1,\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.8,\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.2,\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, 2], {\n value: parsedURL.has(\"colorSpeed\") ? parsedURL.get(\"colorSpeed\") : 0.22,\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\") : 180,\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":2074,"value":"viewof jitter = Inputs.range([0, 3], {\n value: 1.5,\n label: \"AA Jitter (pixels)\",\n step: 0.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":162,"value":"viewof restart = Inputs.button(\"Restart\")","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 * 4).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 += 4) {\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 array[i + 3] = i >> 2;\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 += 4) {\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":"$35","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([-2.2 * ar, 2.2 * ar]);\n const y = d3\n .scaleLinear()\n .range([regl._gl.canvas.offsetWidth, 0])\n .domain([-2.2, 2.2]);\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 jitter;\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":"$36","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":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"$38","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: floatFormat,\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":"$39","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":2096,"value":"import { canWriteToFBOOfType } from \"@rreusser/regl-tools\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3a","stdlib":"1","titling":"auto"}} 33:"$32:body"