31:Td35,md` This notebook implements Jonathan McCabe's multiscale Turing patterns from the paper [Cyclic Symmetric Multi-Scale Turing Patterns](http://www.henrydavidlouth.com/wp-content/uploads/2014/Papers/McCabe%20-%20Cyclic_Symmetric_Multi-Scale_Turing_Patterns.pdf). ***Update: I've moved further refinements into [this notebook](https://observablehq.com/@rreusser/multiscale-turing-pattern-bot) and have created a [Multiscale Turing Bot Twitter account](https://twitter.com/MSTuringBot) to tweet daily high-resolution pictures. Partially as fun with generative art but also as an experiment in tying creative output directly back to the source with nothing more than a web browser.*** I've previously collected a number of large renderings [here](http://rreusser.github.io/multiscale-turing-pattern-gallery/) and [here](http://rreusser.github.io/multiscale-turing-pattern-gallery-2/) with a live implementation [here](http://rreusser.github.io/multiscale-turing-patterns/), but after receiving some questions about my previous implementation, I felt inspired to move it over to Observable so that people might more easily interact with it and see how it might be done! Some nice references if you want to learn more about how the patterns work are: - Jonathan McCabe's [Cyclic Symmetric Multi-Scale Turing Patterns](http://www.henrydavidlouth.com/wp-content/uploads/2014/Papers/McCabe%20-%20Cyclic_Symmetric_Multi-Scale_Turing_Patterns.pdf) - Blake Jones' [Turing clouds - how they work](https://foo.net/projects/turing-clouds/background.html) - Softology's [Multi-Scale Turing Patterns](Multi-Scale Turing Patterns) ## Notes This simulation is computed entirely on the GPU and uses the [Fast Fourier Transform](https://github.com/rreusser/glsl-fft) to perform convolutions. I've started it off at a small resolution so that I don't crash any computers, but if you configure the appearance at a smallish resolution (${tex`512 \times 512`} works well for me), you can increase to a larger resolution and expect it to behave the same—at least to within the particular initial randomness. The biggest trick in this implementation is that the GPU FFT implementation computes two complex FFTs at the same time using the four channels of a WebGL texture, so that if you pack four convolution kernels into the real and imaginary components of two complex numbers, you can compute *four* convolutions at the same time. Since each scale requires two convolutions, this makes for a bit of bookkeeping via [dynamic shader generation](#glslUpdate), but the optimization is worthwhile! I've also switched it to analytical Gaussian and circular convolution kernels, which dramatically reduces the storage requirements! (By about 60%, together with half-float precision where possible). The [coloring algorithm](#drawSolutionToScreen) is a bit ad hoc, pulling the color toward the active scale's color at each point, then using the scalar solution value to mix the color with either black and white at the extremes, or the color in the center. [This blog post, for one](https://foo.net/projects/turing-clouds/background.html), has an interesting alternative approach to coloring which would be interesting to try. Comments? Questions? [Let me know](https://twitter.com/rickyreusser)! (Or even better, comment or tweet a picture or the share link below if you find a good configuration!)`32:T18f9,viewof scaleParams = { const existingParams = (this && this.value) || hashParams || []; const MAX_SCALES = 10; const params = existingParams.slice(0, numScales).concat( [...Array(10).keys()] .map(i => { const r = 1 + ((Math.round(Math.exp((i / 4) * Math.log(64))) - 1) % 128); return { type: i % 2 === 1 ? KERNEL_TYPE.CIRCULAR : KERNEL_TYPE.GAUSSIAN, activator: r, inhibitor: r * 2, amount: 0.005 * (1 + i), symmetry: 1 + (Math.min(3, maxRandomSymmetry) > 1 ? i % Math.min(3, maxRandomSymmetry) : 0), weight: Math.round(Math.pow(2, i * 0.2)), color: [ 0.7 + 0.1 * Math.sin(2 * i), 0.7 + 0.1 * Math.sin(2 * i + (2 / 3) * Math.PI), 0.7 + 0.1 * Math.sin(2 * i + (4 / 3) * Math.PI) ] }; }) .slice(existingParams.length, numScales) ); for (let i = 0; i < params.length; i++) { if (params[i].symmetry === undefined) { params[i].symmetry = 1; } } function emitUpdate() { output.dispatchEvent(new CustomEvent('input')); } const randomizeBtn = button({ value: 'Randomize all' }); const randomizeParamsBtn = button({ value: 'Randomize scales' }); const randomizeColorsBtn = button({ value: 'Randomize colors' }); randomizeBtn.style.display = 'inline-block'; randomizeParamsBtn.style.display = 'inline-block'; randomizeColorsBtn.style.display = 'inline-block'; function randomizeParams() { params.forEach((p, i) => { input[i].activator.input.value = p.activator = Math.floor( Math.exp(Math.random() * Math.log(100)) ); p.inhibitor = +input[i].iaRatio.input.value * p.activator; input[i].type.input.value = p.type = Math.floor( Object.keys(KERNEL_TYPE).length * Math.random() ); input[i].amount.input.value = p.amount = Math.floor(1000 * 0.06 * Math.random()) / 1000; input[i].weight.input.value = p.weight = Math.max( 0.1, Math.floor(100 * 2 * Math.random()) / 100 ); input[i].symmetry.input.value = p.symmetry = 1 + Math.floor(maxRandomSymmetry * Math.pow(Math.random(), 3)); }); } function randomizeColors() { params.forEach((p, i) => { const col = hsl2rgb([ ((randomHueRange[0] + (randomHueRange[1] - randomHueRange[0]) * Math.random()) / 360) % 1, randomSaturationRange[0] + (randomSaturationRange[1] - randomSaturationRange[0]) * Math.random(), randomLightnessRange[0] + (randomLightnessRange[1] - randomLightnessRange[0]) * Math.random() ]); p.color = col; input[i].color.input.value = floatRgbToHex(col); }); } randomizeColorsBtn.addEventListener('input', function() { randomizeColors(); emitUpdate(); }); randomizeParamsBtn.addEventListener('input', function() { randomizeParams(); emitUpdate(); }); randomizeBtn.addEventListener('input', function() { randomizeColors(); randomizeParams(); emitUpdate(); }); const input = []; const output = html` ${params.map((p, i) => { var row = {}; const typeSelector = (row.type = select({ options: [ { value: KERNEL_TYPE.CIRCULAR, label: 'circular' }, { value: KERNEL_TYPE.GAUSSIAN, label: 'gaussian' } ], value: p.type })); typeSelector.addEventListener('input', event => { p.type = +event.target.value; emitUpdate(); }); const colorSelector = (row.color = color({ value: floatRgbToHex(p.color), display: () => '' })); colorSelector.addEventListener('input', event => { p.color = hexRgbToFloat(event.target.value); emitUpdate(); }); const activatorInput = (row.activator = number({ min: 0, max: 1000, step: 0.1, value: p.activator })); activatorInput.addEventListener('input', event => { p.activator = +event.target.value; p.inhibitor = p.activator * iaRatio; emitUpdate(); }); let iaRatio = p.inhibitor / p.activator; const iaRatioInput = (row.iaRatio = number({ min: 1, max: 4, step: 0.01, value: iaRatio })); iaRatioInput.addEventListener('input', event => { iaRatio = +event.target.value; p.inhibitor = p.activator * iaRatio; emitUpdate(); }); const weightInput = (row.weight = number({ min: 0, max: 1, step: 0.01, value: p.weight })); weightInput.addEventListener('input', event => { p.weight = +event.target.value; emitUpdate(); }); const amountInput = (row.amount = number({ min: -0.1, max: 0.1, step: 0.001, value: p.amount })); amountInput.addEventListener('input', event => { p.amount = +event.target.value; emitUpdate(); }); const symmetryInput = (row.symmetry = number({ min: 1, max: 8, step: 1, value: p.symmetry })); symmetryInput.addEventListener('input', event => { p.symmetry = +event.target.value; emitUpdate(); }); input.push(row); return html``; })}

Activator	Inh/Act	Kernel	Amount	Weight	Symmetry	Color
${activatorInput}	${iaRatioInput}	${typeSelector}	${amountInput}	${weightInput}	${symmetryInput}	${colorSelector}

${randomizeBtn} ${randomizeParamsBtn} ${randomizeColorsBtn}

`; output.value = params; return output; }33:T521,function precomputeKernels() { // If we evaluate them analytically on the fly, there's nothing to do! if (!useTabulatedKernels) return; // We have four channels to work with and each channel has // two radii, an activator and an inhibitor, so we group const numKernels = scaleParams.length; const passes = []; const defaultKernel = { activator: 1, inhibitor: 2, type: KERNEL_TYPE.CIRCULAR }; // Outside a regl.frame loop, so poll before invoking commands: regl.poll(); for (let i = 0; i < Math.ceil(numKernels / 2); i++) { var k1 = scaleParams[2 * i] || defaultKernel; var k2 = scaleParams[2 * i + 1] || defaultKernel; var pass = { type: [k1.type, k1.type, k2.type, k2.type], // (k1.activator + i * k1.inhibitor, k2.activator + i * k2.inhibitor) radius: [k1.activator, k1.inhibitor, k2.activator, k2.inhibitor].map( x => x * globalScaleFactor ), // We'll write this to the spatial domain, then subsequently FFT it in-place dst: kernelFFT[i] }; blit(() => { configure({ N }, () => { computeKernel(pass); }); // Precompute the FFT (it's not necessary to recompute the // FFT of the kernels on every frame) blit(() => fft.forward(kernelFFT[i], kernelFFT[i])); }); } }34:T95d,function performIteration(ctx) { configure({ N }, () => { blit(() => { if ( (simulate && (maxSteps === 0 || (ctx.tick && ctx.tick < maxSteps))) || ctx.forceRender ) { mutable frame++; // We store the solution as (rgb, f) where rgb is the color and f is the solution // value. But for the FFT we need it as the two complex numbers with value f + 0 * i // packed into the four channels, thus (f, 0, f, 0). extractSolution({ src: f[0], dst: tmp[0] }); // We FFT the result of the previous computation fft.forward(tmp[0], f[1]); // We now convolve with *four* kernels at a time, representing two activator/inhibitor // pairs, (kernel1 + i * kernel2, kernel3 + i * kernel4), packed into the four channels // as (kernel1, kernel2, kernel3, kernel4). As a result, when we convolve the kernels // with the function, we get the four convolutions in the four resulting channels. kernelFFT.forEach((kernel, i) => { const s1 = scaleParams[2 * i] || {}; const s2 = scaleParams[2 * i + 1] || {}; // Complex multiplication! // Dynamically select the shader based on the type: // gaussian or disk convolve[s1.type || 0][s2.type || 0]({ src: f[1], kernel, dst: tmp[0], r: [ globalScaleFactor * s1.activator, globalScaleFactor * s1.inhibitor, globalScaleFactor * (s2.activator || 1e-2), globalScaleFactor * (s2.inhibitor || 1e-2) ] }); // Invert FFT to recover two activator-inhibitor pairs in the four channels fft.inverse(tmp[0], activatorInhibitor[i]); }); // We feed all of the activator-inhibitor convolutions into the update and use them // to select a scale and compute a new iteration. computeUpdate({ src: f[0], dst: f[1], scaleUniforms, activatorInhibitor }); // We computed f[0] -> f[1], now swap so that we may simply repeat swap(f); } // Copy the solution to the screen and apply the desired color mixing drawSolutionToScreen({ src: f[0], contrast, colorStrength, gamma, invert }); }); }); }35:T45a,computeKernel = regl({ frag: ` precision highp float; uniform vec4 radius; uniform float gamma; uniform int type0, type1, type2, type3; uniform vec2 uInverseResolution, uResolution; ${glslConstants} ${glslLinearStep} void main () { float r = length((fract((gl_FragCoord.xy - 0.5) * uInverseResolution + 0.5) - 0.5) * uResolution); float r0; vec4 c; ${[0, 1, 2, 3] .map( i => ` r0 = radius[${i}]; if (type${i} == ${KERNEL_TYPE.CIRCULAR}) { c[${i}] = linearstep(r0 + 0.5, r0 - 0.5, r) / (PI * r0 * r0); } else if (type${i} == ${KERNEL_TYPE.GAUSSIAN}) { r0 *= 0.5; r0 = min(r0, min(uResolution.x, uResolution.y) * 0.15); c[${i}] = exp(-0.5 * r * r / (r0 * r0)) / (TWO_PI * r0 * r0); }` ) .join('\n')} gl_FragColor = c; }`, uniforms: { radius: regl.prop('radius'), type0: regl.prop('type[0]'), type1: regl.prop('type[1]'), type2: regl.prop('type[2]'), type3: regl.prop('type[3]') }, framebuffer: regl.prop('dst') })36:T445,fft = { // A list of passes representing the forward FFT. const forwardFFT = planFFT({ forward: true, width: N[0], height: N[1], ping: tmp[0], pong: tmp[1], input: null, output: null, splitNormalization: true }); // A list of passes representing the inverse FFT. const inverseFFT = planFFT({ forward: false, width: N[0], height: N[1], ping: tmp[0], pong: tmp[1], input: null, output: null, splitNormalization: true }); // Create a regl webgl command for invoking a list of passes. const fft = createFFTPassCommand(regl); // We compute the FFT by ping-ponging back and forth between framebuffers. // This function just sets the input and final output and sends the list // of passes to the webgl command. function performFFT(plan, input, output) { plan[0].input = input; plan[plan.length - 1].output = output; return fft(plan); } return { forward: (input, output) => performFFT(forwardFFT, input, output), inverse: (input, output) => performFFT(inverseFFT, input, output) }; }37:T7b6,convolve = { function createConvolution(type1, type2) { return regl({ frag: ` precision highp float; uniform vec2 uInverseResolution, uResolution; uniform sampler2D uInput, uKernel; uniform vec4 r; ${glslBesselJ1} ${glslConstants} ${cmul} ${glslWavenumber} // https://adriftjustoffthecoast.wordpress.com/2013/06/06/2d-fourier-transform-of-the-unit-disk/ float disk(float kr) { if (kr < 1e-8) return 1.0; return besselj1(kr) / kr; } float gaussian(float kr) { // Genuinely not sure where the factor of four comes from, but it seems to give an answer // consistent with the tabulated kernel version. float c = 0.25 * kr; return exp(-2.0 * c * c); } void main () { vec2 uv = gl_FragCoord.xy * uInverseResolution; vec4 src = texture2D(uInput, uv); vec2 kxy = wavenumber(uInverseResolution, vec2(1)); float k = length(kxy); #if ${useTabulatedKernels ? '1' : '0'} // Used tabulated convolution kernels vec4 kernel = texture2D(uKernel, uv); #else // Compute the kernels analytically for each of the four kernel radii vec4 kernel = vec4( ${type1}(k * r.x), ${type1}(k * r.y), ${type2}(k * r.z), ${type2}(k * r.w) ); #endif // (ar + ai i) * (br + bi i) // (ar * br - ai * bi) + (ar * bi + ai * br) i gl_FragColor = vec4( src.xz * kernel.xz - src.yw * kernel.yw, src.xz * kernel.yw + src.yw * kernel.xz ).xzyw; } `, framebuffer: regl.prop('dst'), uniforms: { uInput: regl.prop('src'), uKernel: regl.prop('kernel'), r: regl.prop('r') } }); } const gg = createConvolution('gaussian', 'gaussian'); const gd = createConvolution('gaussian', 'disk'); const dg = createConvolution('disk', 'gaussian'); const dd = createConvolution('disk', 'disk'); return [[gg, gd], [dg, dd]]; }38:T10a6,viewof glslUpdate = { // This command is awful, sorry. The reason is that it changes depending on how // many convolutions we input, and we have to do some expensive things like // sampling around a circle for symmetry. If anything, expand the computed shader // rather than analyzing this code. It's much easier to follow! const maxSymmetry = scaleParams.reduce((a, s) => Math.max(s.symmetry, a), 1); const uniforms = { src: regl.prop('src') }; const uniformDefs = []; const idxs = kernelFFT.map((k, i) => `${2 * i}${2 * i + 1}`); const i = (clbk, joiner) => idxs.map(clbk).join(joiner || '\n '); const k = (clbk, joiner) => [...Array.from(scaleParams).keys()].map(clbk).join(joiner || '\n '); return glsl` // Compute update shader precision highp float; uniform vec2 uInverseResolution; uniform float uDt; uniform vec2 uRange; ${glslLinearStep} ${glslConstants} uniform sampler2D src; uniform vec3 ${k(i => `amtWtSym${i}`, ', ')}; uniform vec3 ${k(i => `color${i}`, ', ')}; uniform sampler2D ${i(i => `activatorInhibitor${i}`, ', ')}; uniform float stepSize, colorStepSizeFactor; void main () { vec2 uv = gl_FragCoord.xy * uInverseResolution; vec2 aspect = vec2(uInverseResolution.x / uInverseResolution.y, 1); // Current solution value vec4 y = texture2D(src, uv); vec3 color = y.rgb; // Unpack from texture into activator/inhibitor for each scale // Adjacent pairs (e.g. sclaes number (0, 1) or (4, 5)) of convolutions // with identical symmetry are evaluated together (since they're // channels xy and zw of the same texture), while adjacent pairs with // different symmetry are broken into separate evaluations around a // circle. ${i((idx, i) => { const s1 = scaleParams[2 * i]; const s2 = scaleParams[2 * i + 1]; const lines = []; lines.push(`// Eval scales ${2 * i} and ${2 * i + 1}: vec4 ai${idx} = texture2D(activatorInhibitor${idx}, uv);`); if (s1 && s2 && s1.symmetry === s2.symmetry) { lines.push(`for (int i = 1; i < ${s1.symmetry}; i++) { float theta = TWO_PI * float(i) / float(${s1.symmetry}); vec2 cs = vec2(cos(theta), sin(theta)); vec2 uvrot = 0.5 + (mat2(cs, -cs.y, cs.x) * ((uv - 0.5) / aspect)) * aspect; ai${idx} += texture2D(activatorInhibitor${idx}, uvrot); } ai${idx} /= float(${s1.symmetry}); vec2 ai${2 * i} = ai${idx}.xy; vec2 ai${2 * i + 1} = ai${idx}.zw;\n`); } else { lines.push(`vec2 ai${2 * i} = ai${idx}.xy; vec2 ai${2 * i + 1} = ai${idx}.zw;`); if (s1) { lines.push(`// Scale ${2 * i}: for (int i = 1; i < ${s1.symmetry}; i++) { float theta = TWO_PI * float(i) / float(${s1.symmetry}); vec2 cs = vec2(cos(theta), sin(theta)); vec2 uvrot = 0.5 + (mat2(cs, -cs.y, cs.x) * ((uv - 0.5) / aspect)) * aspect; ai${2 * i} += texture2D(activatorInhibitor${idx}, uvrot).xy; } ai${2 * i} /= float(${s1.symmetry});\n`); } if (s2) { lines.push(`// Scale ${2 * i + 1}: for (int i = 1; i < ${s2.symmetry}; i++) { float theta = TWO_PI * float(i) / float(${s2.symmetry}); vec2 cs = vec2(cos(theta), sin(theta)); vec2 uvrot = 0.5 + (mat2(cs, -cs.y, cs.x) * ((uv - 0.5) / aspect)) * aspect; ai${2 * i + 1} += texture2D(activatorInhibitor${idx}, uvrot).zw; } ai${2 * i + 1} /= float(${s2.symmetry});\n`); } } return lines.join('\n '); })} // Per-scale variation ${k(i => `float var${i} = abs(ai${i}.y - ai${i}.x) * amtWtSym${i}.y;`)} // Per-scale step ${k( i => `float step${i} = ai${i}.x > ai${i}.y ? amtWtSym${i}.x : -amtWtSym${i}.x;` )} // Figure out which scale has the minimum variation, and use it float colorStep = stepSize * colorStepSizeFactor; float minVariation = var0; float step = step0; vec3 outputColor = mix(color, color0, amtWtSym0.x * colorStep); ${k(i => { if (i === 0) return ''; return `if (var${i} < minVariation) { minVariation = var${i}; step = step${i}; outputColor = mix(color, color${i}, amtWtSym${i}.x * colorStep); }`; })} // Tone-map or something with the atan function to prevent values from diverging to infinity const float range = 0.1; gl_FragColor = vec4(outputColor, atan(range * (y.a + stepSize * step)) / range); }`; }39:T452,drawSolutionToScreen = regl({ frag: ` precision highp float; uniform float gamma, contrast, colorStrength; uniform vec2 uInverseResolution; uniform bool invert; uniform sampler2D src; ${glslLinearStep} ${glslApplyGamma} void main () { vec4 src = texture2D(src, gl_FragCoord.xy * uInverseResolution); vec3 color = src.rgb; float f = clamp(0.5 + 0.25 * contrast * src.a, 0.0, 1.0); // This is a totally ad hoc coloring function that fades to pure white and black // at f=0 and f=1, and to the color in between. We could do better. /*gl_FragColor = vec4( applyGamma(f * mix(vec3(1), color, colorStrength * (1.0 - (f - 0.5) * (f - 0.5) * 4.0)), 1.0 / gamma), 1);*/ if (invert) f = 1.0 - f; gl_FragColor = vec4( applyGamma(f * mix(vec3(1), color, colorStrength), 1.0 / gamma), 1); }`, uniforms: { src: regl.prop('src'), gamma: regl.prop('gamma'), colorStrength: regl.prop('colorStrength'), contrast: regl.prop('contrast'), invert: (ctx, props) => !!props.invert } })3a:T721,viewof glslRandom = /* Source: https://github.com/mattdesl/glsl-random Copyright (c) 2014, Matt DesLauriers All rights reserved. Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: * Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer. * Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution. * Neither the name of glsl-random nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission. THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. */ glsl` highp float random(vec2 co) { highp float a = 12.9898; highp float b = 78.233; highp float c = 43758.5453; highp float dt= dot(co.xy ,vec2(a,b)); highp float sn= mod(dt,3.14); return fract(sin(sn) * c); } `3b:T1972,viewof glslBesselJ1 = /* * Adapted from: * * Copyright (c) 2018 The Stdlib Authors. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. * * * ## Notice * * The original C++ code and copyright notice are from the [Boost library]{@link https://github.com/boostorg/math/blob/develop/include/boost/math/special_functions/detail/bessel_j1.hpp}. The implementation has been modified for JavaScript. * * ```text * Copyright Xiaogang Zhang, 2006. * * Use, modification and distribution are subject to the * Boost Software License, Version 1.0. (See accompanying file * LICENSE or copy at http://www.boost.org/LICENSE_1_0.txt) * ``` */ glsl` // besselj1(x) // Source: https://github.com/stdlib-js/stdlib/tree/develop/lib/node_modules/%40stdlib/math/base/special const float x1 = 3.8317059702075123156e+00; const float x2 = 7.0155866698156187535e+00; const float x11 = 9.810e+02; const float x12 = -3.2527979248768438556e-04; const float x21 = 1.7960e+03; const float x22 = -3.8330184381246462950e-05; #define SQRT_PI 1.7724538509055159 float polyS( float x ) { float ax; float s1; float s2; if ( x == 0.0 ) { return 0.046875; } if ( x < 0.0 ) { ax = -x; } else { ax = x; } if ( ax <= 1.0 ) { s1 = 33220.913409857225 + (x * (85145.1606753357 + (x * (66178.83658127084 + (x * (18494.262873223866 + (x * (1706.375429020768 + (x * (35.26513384663603 + (x * 0.0))))))))))); s2 = 708712.8194102874 + (x * (1819458.0422439973 + (x * (1419460.669603721 + (x * (400294.43582266977 + (x * (37890.2297457722 + (x * (863.8367769604992 + (x * 1.0))))))))))); } else { x = 1.0 / x; s1 = 0.0 + (x * (35.26513384663603 + (x * (1706.375429020768 + (x * (18494.262873223866 + (x * (66178.83658127084 + (x * (85145.1606753357 + (x * 33220.913409857225))))))))))); s2 = 1.0 + (x * (863.8367769604992 + (x * (37890.2297457722 + (x * (400294.43582266977 + (x * (1419460.669603721 + (x * (1819458.0422439973 + (x * 708712.8194102874))))))))))); } return s1 / s2; } float polyC( float x ) { float ax; float s1; float s2; if ( x == 0.0 ) { return 1.0; } if ( x < 0.0 ) { ax = -x; } else { ax = x; } if ( ax <= 1.0 ) { s1 = -4435757.816794128 + (x * (-9942246.505077641 + (x * (-6603373.248364939 + (x * (-1523529.3511811374 + (x * (-109824.05543459347 + (x * (-1611.6166443246102 + (x * 0.0))))))))))); // eslint-disable-line max-len s2 = -4435757.816794128 + (x * (-9934124.389934586 + (x * (-6585339.4797230875 + (x * (-1511809.5066341609 + (x * (-107263.8599110382 + (x * (-1455.0094401904962 + (x * 1.0))))))))))); // eslint-disable-line max-len } else { x = 1.0 / x; s1 = 0.0 + (x * (-1611.6166443246102 + (x * (-109824.05543459347 + (x * (-1523529.3511811374 + (x * (-6603373.248364939 + (x * (-9942246.505077641 + (x * -4435757.816794128))))))))))); // eslint-disable-line max-len s2 = 1.0 + (x * (-1455.0094401904962 + (x * (-107263.8599110382 + (x * (-1511809.5066341609 + (x * (-6585339.4797230875 + (x * (-9934124.389934586 + (x * -4435757.816794128))))))))))); // eslint-disable-line max-len } return s1 / s2; } float poly1( float x ) { float ax; float s1; float s2; if ( x == 0.0 ) { return -0.03405537391318949; } if ( x < 0.0 ) { ax = -x; } else { ax = x; } if ( ax <= 1.0 ) { s1 = -142585098013.66644 + (x * (6678104126.14924 + (x * (-115486967.64841276 + (x * (980629.0409895825 + (x * (-4461.579298277507 + (x * (10.650724020080236 + (x * -0.010767857011487301))))))))))); s2 = 4186860446082.0176 + (x * (42091902282.58013 + (x * (202283751.40097034 + (x * (591176.1449417479 + (x * (1074.227223951738 + (x * (1.0 + (x * 0.0))))))))))); } else { x = 1.0 / x; s1 = -0.010767857011487301 + (x * (10.650724020080236 + (x * (-4461.579298277507 + (x * (980629.0409895825 + (x * (-115486967.64841276 + (x * (6678104126.14924 + (x * -142585098013.66644))))))))))); s2 = 0.0 + (x * (1.0 + (x * (1074.227223951738 + (x * (591176.1449417479 + (x * (202283751.40097034 + (x * (42091902282.58013 + (x * 4186860446082.0176))))))))))); } return s1 / s2; } float poly2( float x ) { float ax; float s1; float s2; if ( x == 0.0 ) { return -0.010158790774176108; } if ( x < 0.0 ) { ax = -x; } else { ax = x; } if ( ax <= 1.0 ) { s1 = -17527881995806512.0 + (x * (1660853173129901.8 + (x * (-36658018905416.664 + (x * (355806656709.1062 + (x * (-1811393126.9860668 + (x * (5079326.614801118 + (x * (-7502.334222078161 + (x * 4.6179191852758255))))))))))))); // eslint-disable-line max-len s2 = 1725390588844768000.0 + (x * (17128800897135812.0 + (x * (84899346165481.42 + (x * (276227772862.44086 + (x * (648725028.9959639 + (x * (1126712.5065029138 + (x * (1388.6978985861358 + (x * 1.0))))))))))))); } else { x = 1.0 / x; s1 = 4.6179191852758255 + (x * (-7502.334222078161 + (x * (5079326.614801118 + (x * (-1811393126.9860668 + (x * (355806656709.1062 + (x * (-36658018905416.664 + (x * (1660853173129901.8 + (x * -17527881995806512.0))))))))))))); // eslint-disable-line max-len s2 = 1.0 + (x * (1388.6978985861358 + (x * (1126712.5065029138 + (x * (648725028.9959639 + (x * (276227772862.44086 + (x * (84899346165481.42 + (x * (17128800897135812.0 + (x * 1725390588844768000.0))))))))))))); } return s1 / s2; } float besselj1( float x ) { float y, r, f, y2, rc, rs; float value; vec2 sc; float w = abs( x ); if ( w <= 4.0 ) { y = x * x; r = poly1( y ); f = w * ( w+x1 ) * ( ( w - (x11/256.0) ) - x12 ); value = f * r; } else if ( w <= 8.0 ) { y = x * x; r = poly2( y ); f = w * ( w+x2 ) * ( ( w - (x21/256.0) ) - x22 ); value = f * r; } else { y = 8.0 / w; y2 = y * y; rc = polyC( y2 ); rs = polyS( y2 ); f = 1.0 / ( sqrt( w ) * SQRT_PI ); sc = vec2( sin(w), cos(w) ); value = f * ( ( rc * (sc.x-sc.y) ) + ( (y*rs) * (sc.x+sc.y) ) ); } if ( x < 0.0 ) value = -value; return value; } `3c:T723,/* Source: https://github.com/mattdesl/float-hsl2rgb The MIT License (MIT) Copyright (c) 2015 Matt DesLauriers Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ function hsl2rgb(hsl) { var h = hsl[0], s = hsl[1], l = hsl[2], t1, t2, t3, rgb, val; if (s === 0) { val = l; return [val, val, val]; } if (l < 0.5) { t2 = l * (1 + s); } else { t2 = l + s - l * s; } t1 = 2 * l - t2; rgb = [0, 0, 0]; for (var i = 0; i < 3; i++) { t3 = h + (1 / 3) * -(i - 1); if (t3 < 0) { t3++; } if (t3 > 1) { t3--; } if (6 * t3 < 1) { val = t1 + (t2 - t1) * 6 * t3; } else if (2 * t3 < 1) { val = t2; } else if (3 * t3 < 2) { val = t1 + (t2 - t1) * (2 / 3 - t3) * 6; } else { val = t1; } rgb[i] = val; } return rgb; }3d:[{"id":"c05034506c091b9a84093552da6db915fb61114544dfc967ead32becb30ec6a4584104d56e1d13134f21d4c289dad063e2c94b9a75375019b5c93281f5d50624","href":"https://static.observableusercontent.com/files/c05034506c091b9a84093552da6db915fb61114544dfc967ead32becb30ec6a4584104d56e1d13134f21d4c289dad063e2c94b9a75375019b5c93281f5d50624","name":"turing.jpg","type":"image/jpeg","lastModified":1609448161935.899,"size":332202}] 2f:{"title":"Multiscale Turing Patterns in WebGL","cells":[{"id":1855,"value":"{\n const el = document.createElement('div');\n const h = document.createElement('h1');\n h.textContent = `Multiscale Turing Patterns in WebGL`;\n h.style.color = 'white';\n h.style.textShadow = '0 0 10px rgba(0, 0, 0, 1)';\n h.style.margin = '2em 1em';\n el.style.overflow = 'hidden';\n el.style.backgroundImage = `url(${await FileAttachment(\"turing.jpg\").url()})`;\n el.style.backgroundSize = 'cover';\n el.appendChild(h);\n return el;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1821,"value":"{\n if (highpColorType === 'half float') {\n return html`

Warning! This simulation isn't tuned to work well in half-float precision. Please switch to a device which supports writing to floating point textures.

`;\n } else {\n return html``;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"viewof gamma = slider({\n title: 'Display parameters',\n min: 0.5,\n max: 2.5,\n value: 2.2,\n description: html`Gamma, ${tex`\\gamma`}`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":871,"value":"viewof contrast = slider({\n min: 0,\n max: 1,\n value: 0.8,\n description: html`Contrast`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1025,"value":"viewof colorStrength = slider({\n min: 0,\n max: 1,\n value: 1.0,\n description: html`Color strength`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2116,"value":"viewof invert = checkbox({ options: ['invert'] })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1492,"value":"viewof scaleFactor = select({\n description: 'Height',\n value: 1,\n options: [...Array(6).keys()].map(i => ({\n value: i,\n label: `${Math.pow(2, 7 + i)}${i >= 4 ? \" (Danger!)\" : ''}`\n }))\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2165,"value":"viewof aspectRatio = select({\n options: [\n {\n label: '1 / 2',\n value: 0.5\n },\n {\n label: '1',\n value: 1\n },\n { label: '2', value: 2 }\n ],\n value: 1,\n description: 'Aspect ratio'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"viewof regl = createREGLContext({\n width: N[0],\n height: N[1]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"viewof simulate = checkbox({ options: ['Simulate'], value: 'Simulate' })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1090,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"viewof restart = button({ value: 'Restart' })","pinned":false,"hidden":false,"mode":"ojs"},{"id":2562,"value":"mutable frame = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":2578,"value":"{\n const btn = button({ value: 'Download PNG' });\n btn.addEventListener('input', () => {\n downloadURI(regl._gl.canvas.toDataURL(), 'turing.png');\n });\n return btn;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1666,"value":"viewof restartOnParamChange = checkbox({\n options: ['Restart on parameter change'],\n value: 'Restart on parameter change'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1707,"value":"md`[🔗 Share parameters](${document.baseURI}#${btoa(\n JSON.stringify(scaleParams)\n)})`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1249,"value":"viewof numScales = slider({\n description: 'Number of scales',\n min: 1,\n max: 10,\n step: 1,\n value: hashParams ? hashParams.length : 6\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2052,"value":"viewof maxSteps = number({\n min: 0,\n max: 10000,\n step: 1,\n value: 0,\n description:\n 'Maximum number of steps (0 := infinite, helpful for stopping large renders at the right time since the UI locks up. My recommended flow is to set this to ~150, click \"simulate\" to start the rendering, then right click to save the image when done.) Be sure to uncheck \"simulate\" before modifying the gamma/contrast/saturation, otherwise more frames will render!'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1619,"value":"viewof randomHueRange = rangeSlider({\n title: 'Random HSL Parameters',\n value: [0, 360],\n min: -180,\n max: 540,\n description: 'Random HSL hue range'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1625,"value":"viewof randomSaturationRange = rangeSlider({\n value: [0.3, 0.6],\n min: 0,\n max: 1,\n description: 'Random HSL saturation range'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1627,"value":"viewof randomLightnessRange = rangeSlider({\n value: [0.5, 1.0],\n min: 0,\n max: 1,\n description: 'Random HSL lightness range'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2018,"value":"viewof maxRandomSymmetry = slider({\n value: 5,\n min: 1,\n max: 10,\n step: 1,\n description: 'Maximum random symmetry'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2460,"value":"viewof kernelType = radio({\n options: ['Analytical kernels', 'Tabulated kernels'],\n value: 'Analytical kernels',\n description:\n 'Precomputing tabulated kernels may use *significantly* more memory.'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1653,"value":"md`### Render to video`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1381,"value":"animationFrames = 1000","pinned":false,"hidden":false,"mode":"ojs"},{"id":1487,"value":"stepsPerFrame = 8","pinned":false,"hidden":false,"mode":"ojs"},{"id":1360,"value":"html`\n${\n simulate\n ? md`Pause simulation to enable rendering to video`\n : await encodeMP4(\n Array.from(Array(animationFrames).keys()),\n function (t) {\n regl.poll();\n for (var i = 0; i < stepsPerFrame; i++) {\n performIteration({ forceRender: true });\n }\n return regl.read();\n },\n {\n disabled: !!simulate,\n displayOutput: false,\n beforeStart: initializeSolution,\n quantizationParameter: 10,\n groupOfPictures: 10,\n kbps: 16000,\n frameRate: 60,\n width: regl._gl.canvas.width,\n height: regl._gl.canvas.height\n }\n )\n}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2084,"value":"stepSize = 1","pinned":false,"hidden":false,"mode":"ojs"},{"id":2085,"value":"colorStepSizeFactor = 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"md`## Framebuffers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2534,"value":"memoryUsageGB = {\n const n = N[0] * N[1] * 4;\n let bytes = 0;\n const lowpBytesPerChannel = lowpColorType === 'half float' ? 2 : 4;\n const highpBytesPerChannel = highpColorType === 'half float' ? 2 : 4;\n\n // f:\n bytes += 2 * n * lowpBytesPerChannel;\n\n // kernel:\n const kernelChannels = useTabulatedKernels ? kernelFFT.length : 0;\n bytes += kernelChannels * n * highpBytesPerChannel;\n\n // ActivatorInhibitor\n bytes += activatorInhibitor.length * n * lowpBytesPerChannel;\n\n // Tmp:\n bytes += tmp.length * n * highpBytesPerChannel;\n\n return bytes / (1024 * 1024 * 1024);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2472,"value":"useTabulatedKernels = kernelType === 'Tabulated kernels'","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"N = [\n 128 * +aspectRatio * Math.pow(2, +scaleFactor),\n 128 * Math.pow(2, +scaleFactor)\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"f = {\n const fbos = [0, 1].map(() =>\n regl.framebuffer({\n color: regl.texture({\n width: N[0],\n height: N[1],\n type: lowpColorType,\n min: 'nearest',\n mag: 'nearest'\n })\n })\n );\n invalidation.then(() => fbos.forEach(fbo => fbo.destroy()));\n return fbos;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":321,"value":"kernelFFT = {\n const arr = new Array(Math.ceil(numScales / 2)).fill(0);\n if (!useTabulatedKernels) return arr;\n\n const fbos = arr.map(() =>\n regl.framebuffer({\n color: regl.texture({\n width: N[0],\n height: N[1],\n type: highpColorType,\n min: 'nearest',\n mag: 'nearest'\n })\n })\n );\n invalidation.then(() => fbos.forEach(fbo => fbo.destroy()));\n return fbos;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":418,"value":"activatorInhibitor = {\n const fbos = kernelFFT.map(() =>\n regl.framebuffer({\n color: regl.texture({\n width: N[0],\n height: N[1],\n type: lowpColorType,\n min: regl.hasExtension(`OES_texture_${lowpColorType}_linear`)\n ? 'linear'\n : 'nearest',\n mag: regl.hasExtension(`OES_texture_${lowpColorType}_linear`)\n ? 'linear'\n : 'nearest',\n wrapS: 'repeat',\n wrapT: 'repeat'\n })\n })\n );\n invalidation.then(() => fbos.forEach(fbo => fbo.destroy()));\n return fbos;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"tmp = {\n const fbos = [0, 1].map(() =>\n regl.framebuffer({\n color: regl.texture({\n width: N[0],\n height: N[1],\n type: highpColorType,\n min: 'nearest',\n mag: 'nearest'\n })\n })\n );\n invalidation.then(() => fbos.forEach(fbo => fbo.destroy()));\n return fbos;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1346,"value":"md`## Simulation setup`","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1179,"value":"kernelUpdateTrigger = {\n for (var i = 0; i < scaleParams.length; i++) {\n if (scaleParams[i].activator === 0) return;\n if (scaleParams[i].inhibitor === 0) return;\n }\n if (useTabulatedKernels) precomputeKernels();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":290,"value":"function initializeSolution() {\n mutable frame = 0;\n configure({ N }, () => {\n blit(() => {\n f[0].use(initialize);\n });\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"initializationTrigger = {\n convolve;\n restart;\n N;\n initializeSolution();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1672,"value":"restartOnParamChangeTrigger = restartOnParamChange &&\n scaleParams &&\n initializeSolution()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1366,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":2595,"value":"resetFrameCounter = {\n if (simulate) mutable frame = 0;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":340,"value":"iterationLoop = {\n restart;\n\n // Avoid re-rendering if nothing new is computed\n let dirty = true;\n\n let tick = 0;\n let frame = regl.frame(() => {\n try {\n performIteration({ tick });\n tick++;\n } catch (e) {\n if (frame) frame.cancel();\n frame = null;\n }\n });\n invalidation.then(() => {\n if (frame) frame.cancel();\n frame = null;\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"md`## WebGL commands`","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"configure = regl({\n context: {\n N: regl.prop('N')\n },\n uniforms: {\n uResolution: regl.context('N'),\n uInverseResolution: (ctx, props) => [1 / ctx.N[0], 1 / ctx.N[1]],\n stepSize,\n colorStepSizeFactor\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"blit = regl({\n vert: `\n precision highp float;\n attribute vec2 xy;\n void main () {\n gl_Position = vec4(xy, 0, 1);\n }`,\n attributes: {\n xy: [-4, -4, 4, -4, 0, 4]\n },\n depth: { enable: false },\n count: 3\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"initialize = regl({\n frag: `\n precision highp float;\n ${glslRandom}\n\n void main () {\n gl_FragColor = vec4(random(gl_FragCoord.xy));\n }`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":407,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":920,"value":"extractSolution = regl({\n frag: `\n precision highp float;\n uniform sampler2D src;\n uniform vec2 uInverseResolution;\n void main () {\n gl_FragColor = vec2(texture2D(src, gl_FragCoord.xy * uInverseResolution).a, 0).xyxy;\n }`,\n uniforms: { src: regl.prop('src') },\n framebuffer: regl.prop('dst')\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":460,"value":"scaleUniforms = ({\n amountWeightSymmetry: scaleParams.map(p => [\n p.amount,\n 1.0 / Math.max(1e-8, p.weight),\n p.symmetry\n ]),\n color: scaleParams.map(p => p.color)\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":599,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":428,"value":"computeUpdate = {\n // Configure uniform inputs and instantiate the update command\n const uniforms = { src: regl.prop('src') };\n const idxs = kernelFFT.map((k, i) => `${2 * i}${2 * i + 1}`);\n scaleParams.forEach((p, i) => {\n uniforms[`amtWtSym${i}`] = regl.prop(\n `scaleUniforms.amountWeightSymmetry[${i}]`\n );\n });\n scaleParams.forEach((p, i) => {\n uniforms[`color${i}`] = regl.prop(`scaleUniforms.color[${i}]`);\n });\n idxs.map((idx, i) => {\n uniforms[`activatorInhibitor${idx}`] = regl.prop(\n `activatorInhibitor[${i}]`\n );\n });\n return regl({\n frag: glslUpdate,\n uniforms,\n framebuffer: regl.prop('dst')\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"viewof glslApplyGamma = glsl`\nvec3 applyGamma(vec3 color, float gamma) {\n // Quick approximate gamma correction\n return pow(color, vec3(gamma));\n}\nvec2 applyGamma(vec2 color, float gamma) {\n // Quick approximate gamma correction\n return pow(color, vec2(gamma));\n}\nfloat applyGamma(float color, float gamma) {\n // Quick approximate gamma correction\n return pow(color, gamma);\n}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1080,"value":"viewof glslLinearStep = glsl`\nfloat linearstep (float a, float b, float x) {\n return clamp((x - a) / (b - a), 0.0, 1.0);\n}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":224,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"md`## Definitions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2190,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":1737,"value":"hashParams = {\n try {\n return JSON.parse(atob(document.location.hash.replace(/^#/, '')));\n } catch (e) {\n return null;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1406,"value":"globalScaleFactor = Math.pow(2, scaleFactor - 2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":257,"value":"viewof glslConstants = glsl`\n#define PI ${Math.PI}\n#define TWO_PI ${Math.PI * 2}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"KERNEL_TYPE = ({ GAUSSIAN: 0, CIRCULAR: 1 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"canvasSize = ({\n width: Math.min(512, width),\n height: Math.min(512, width),\n pixelRatio: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"highpColorType = /*\nIt's often the case that a phone may support floating point textures but does *not*\nsupport writing to them. So we have to feature-detect it.\n*/ canWriteToFBOOfType(\n regl,\n 'float'\n)\n ? 'float'\n : 'half float'","pinned":false,"hidden":false,"mode":"ojs"},{"id":2502,"value":"lowpColorType = /*\nIt's often the case that a phone may support floating point textures but does *not*\nsupport writing to them. So we have to feature-detect it.\n*/ canWriteToFBOOfType(\n regl,\n 'half float'\n)\n ? 'half float'\n : 'float'","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"function createREGLContext(shape) {\n const canvas = DOM.canvas(shape.width, shape.height);\n const regl = createREGL({\n canvas,\n attributes: { preserveDrawingBuffer: true },\n extensions: ['OES_texture_float'],\n optionalExtensions: [\n 'OES_texture_half_float',\n 'OES_texture_half_float_linear',\n 'OES_texture_float_linear'\n ]\n });\n canvas.value = regl;\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1334,"value":"widthConstraint = {\n // In a standalone statement to avoid dependence of the context on the window width.\n regl._gl.canvas.style.maxWidth = `${width}px`;\n regl._gl.canvas.style.minWidth = `512px`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":656,"value":"function swap(a) {\n var tmp = a[0];\n a[0] = a[1];\n a[1] = tmp;\n return a;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"createREGL = require('regl')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1576,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"},{"id":1614,"value":"import { rangeSlider } from '@mootari/range-slider'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1140,"value":"import { floatRgbToHex, hexRgbToFloat, downloadURI } from '@rreusser/utils'","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"import {\n slider,\n checkbox,\n button,\n select,\n color,\n number,\n radio\n} from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"import { encodeMP4 } from \"42411b151082b5c0@920\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"import { glsl } from '@stwind/glsl-chunk-tag'","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"import { canWriteToFBOOfType } from '@rreusser/regl-tools'","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"import {\n planFFT,\n createFFTPassCommand,\n glslWavenumber\n} from '@rreusser/glsl-fft'","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"import { cmul } from '@rreusser/glsl-complex'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3d","stdlib":"1","titling":"auto"}