31:T1962,viewof scaleParams = { const existingParams = (this && this.value) || parsedUrlParams.scales || []; 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.01 + 0.05 * 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; }32: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])); }); } }33:T9a8,function performIteration(ctx) { configure({ N }, () => { blit(() => { if (ctx.simulate && mutable frame < maxSteps) { 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); mutable needsDraw = true; } if (mutable needsDraw) { // Copy the solution to the screen and apply the desired color mixing drawSolutionToScreen({ src: f[0], contrast, colorStrength, vignette, gamma, invert }); mutable needsDraw = false; } }); }); }34: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') })35: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) }; }36: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]]; }37: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); }`; }38:T5a4,drawSolutionToScreen = regl({ frag: ` precision highp float; uniform float gamma, contrast, colorStrength, vignette; uniform vec2 uInverseResolution; uniform bool invert; uniform sampler2D src; ${glslLinearStep} ${glslApplyGamma} ${glslOverlayBlendMode} void main () { vec2 uv = gl_FragCoord.xy * uInverseResolution; vec4 src = texture2D(src, uv); 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; //float v = 0.5 + vignette * (max(0.0, 0.52 * (1.0 - 1.0 * length(uv - 0.5))) - 0.5); float v = 0.5 + vignette * (max(0.0, 0.52 * (1.0 - 2.0 * dot(uv - 0.5, uv - 0.5))) - 0.5); vec3 c = f * mix(vec3(1), color, colorStrength); c = overlay(vec3(v), c); gl_FragColor = vec4( applyGamma(c, 1.0 / gamma), 1); }`, uniforms: { src: regl.prop('src'), gamma: regl.prop('gamma'), colorStrength: regl.prop('colorStrength'), vignette: regl.prop('vignette'), contrast: regl.prop('contrast'), invert: (ctx, props) => !!props.invert } })39: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); } `3a: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; } `3b: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; }3c:[{"id":"f3ac223f18daf537a7cd617bac20e0cde7379e3f0cf1234ab4e466da1c210506e9dff1c516de7a04dd89df7d1f5d2eb1799891a63ba61ebdbac2eab5428d19f5","href":"https://static.observableusercontent.com/files/f3ac223f18daf537a7cd617bac20e0cde7379e3f0cf1234ab4e466da1c210506e9dff1c516de7a04dd89df7d1f5d2eb1799891a63ba61ebdbac2eab5428d19f5","name":"header.jpg","type":"image/jpeg","lastModified":1609789503141.623,"size":297795}] 2f:{"title":"Multiscale Turing Pattern Bot","cells":[{"id":1855,"value":"{\n const el = document.createElement('div');\n const h = document.createElement('h1');\n h.textContent = `Multiscale Turing Pattern Bot`;\n h.style.color = 'white';\n h.style.textShadow = '0 0 10px rgba(0, 0, 0, 1), 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(\"header.jpg\").url()})`;\n el.style.backgroundSize = 'cover';\n el.appendChild(h);\n return el;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"md`\n\nThis 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). The output is tweeted (daily, perhaps, we'll see?) at [Multiscale Turing Bot](https://twitter.com/MSTuringBot).\n\nSome nice references if you want to learn more about how the patterns work are:\n\n- 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)\n- Blake Jones' [Turing clouds - how they work](https://foo.net/projects/turing-clouds/background.html)\n- Softology's [Multi-Scale Turing Patterns](Multi-Scale Turing Patterns)\n\nComments? Questions? [Let me know](https://twitter.com/rickyreusser)!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2711,"value":"md`## TODO\n\n- Use query params instead of a hash for encoding params. Maybe encode them in plaintext instead of base64 as well.\n- Try different color spaces for mixing colors. Right now it multiplies a color by a RGB intensity.\n- Explore extensions to the basic algorithm.\n- Try out different ways to constrain the dynamic range (right now it uses atan to keep things linear near zero but also finite so that the range doesn't simply drift).\n- ~~Use analytical convolution kernels to reduce storage requirements.~~ 🎉\n`","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:\n parsedUrlParams && parsedUrlParams.gamma !== undefined\n ? parsedUrlParams.gamma\n : 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:\n parsedUrlParams && parsedUrlParams.contrast !== undefined\n ? parsedUrlParams.contrast\n : 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:\n parsedUrlParams && parsedUrlParams.colorStrength !== undefined\n ? parsedUrlParams.colorStrength\n : 1.0,\n description: html`Color strength`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2770,"value":"viewof vignette = slider({\n min: 0,\n max: 1,\n step: 0.01,\n description: 'Vignette',\n value:\n parsedUrlParams && parsedUrlParams.vignette !== undefined\n ? parsedUrlParams.vignette\n : 0\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2116,"value":"viewof invert = checkbox({\n options: ['invert'],\n value: (parsedUrlParams && parsedUrlParams.invert !== undefined\n ? parsedUrlParams.invert\n : false)\n ? 'invert'\n : ''\n})","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":2052,"value":"viewof maxSteps = number({\n min: 0,\n max: 10000,\n step: 1,\n value:\n parsedUrlParams && parsedUrlParams.steps !== undefined\n ? parsedUrlParams.steps\n : 100,\n description: 'Maximum number of steps (0 := infinite)'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2562,"value":"mutable frame = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"viewof simulate = checkbox({ options: ['Simulate'], value: 'Simulate' })","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":1090,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"viewof restart = button({ value: 'Restart' })","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":2614,"value":"urlParams = ({\n steps: maxSteps,\n scales: scaleParams,\n stepSize: stepSize,\n colorStep: colorStepSizeFactor,\n vignette,\n gamma,\n colorStrength,\n contrast,\n invert\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1737,"value":"parsedUrlParams = {\n try {\n /*return {\n scales: JSON.parse(atob(\"\"))\n };*/\n return JSON.parse(atob(document.location.hash.replace(/^#/, '')));\n } catch (e) {\n return {};\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1707,"value":"md`[🔗 Share parameters](${document.baseURI}#${btoa(\n JSON.stringify(urlParams)\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: parsedUrlParams.scales ? parsedUrlParams.scales.length : 6\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2084,"value":"stepSize = parsedUrlParams && parsedUrlParams.step !== undefined\n ? parsedUrlParams.step\n : 1","pinned":false,"hidden":false,"mode":"ojs"},{"id":2085,"value":"colorStepSizeFactor = parsedUrlParams && parsedUrlParams.colorStep !== undefined\n ? parsedUrlParams.colorStep\n : 2","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":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":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":2747,"value":"mutable needsDraw = true","pinned":false,"hidden":false,"mode":"ojs"},{"id":2765,"value":"redrawTrigger = {\n invert;\n contrast;\n gamma;\n colorStrength;\n vignette;\n drawSolutionToScreen;\n\n mutable needsDraw = true;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"$32","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 mutable needsDraw = true;\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":"$33","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 frame = regl.frame(({ tick }) => {\n //if (tick % 400 !== 0) return;\n try {\n if (simulate) dirty = true;\n performIteration({ simulate });\n if (simulate) dirty = false;\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":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":407,"value":"$36","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":"$37","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":"$38","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":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":2774,"value":"viewof glslOverlayBlendMode = glsl`\nfloat overlay(float a, float b) {\n return a < 0.5 ? 2.0 * a * b : 1.0 - 2.0 * (1.0 - a) * (1.0 - b);\n}\nvec3 overlay(vec3 a, vec3 b) {\n return vec3(\n overlay(a.x, b.x),\n overlay(a.y, b.y),\n overlay(a.z, b.z)\n );\n}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"md`## Definitions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2190,"value":"$3a","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.width = `${Math.floor(\n Math.min(width, Math.max(512, N[0]))\n )}px`;\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":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":2657,"value":"import { getCurrentPinnedName } from '@mootari/notebook-data@361'","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 '@rreusser/h264-mp4-encoder'","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":"$W3c","stdlib":"1","titling":"auto"}