2b:null 2c:["$","title",null,{"children":"Interactive Multi-scale Turing Patterns | Ricky Reusser | Observable"}] 31:Ta1e,md` This notebook implements an interactive version of 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). 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) (Also, <3 to [Lionel Radisson](https://observablehq.com/@makio135) and [Matt Dzugan](https://observablehq.com/@mattdzugan/imitation-game) for inspiring [the thumbnail design](https://observablehq.com/@makio135/creative-coding).) Tips and tricks: - Some configurations are more amenable to "painting" than others. For the most part everything disappears instantly. Don't worry, I know. - [Randomize all](#scaleParams) to create a new random pattern. Select [restart on parameter change](#restartOnParamChange) to restart whenever things change. - If you find a pattern you like, [increase the size](#scaleFactor) and render it at higher resolution! It will resample when the size is changed to preserve the appearance. - The speed is cranked way up to make it more interactive. To render nice patterns, try [turning down the step size](#defaultStepSize) and [turning up the contrast](#contrast). - To speed things up a bit, [reduce the number of scales](#numScales) to two or four. Each pair of two scales requires a full Fast Fourier Transform on every frame. - Symmetry will affect the painting. [Set the symmetry to 1](#maxRandomSymmetry) and then randomize to disable it. - If you're feeling brave, try [rendering to a video](#renderToVideo) (if you reorder the cells, you'll be able to see the progress bar and the image at the same time). - Changing the brush parameters has an issue on mobile. I'm not sure what it is. Comments? Questions? [Let me know](https://twitter.com/rickyreusser)! ${ highpColorType === 'half float' ? 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.

` : '' }`32:T1a56,viewof scaleParams = { const existingParams = (this && this.value) || parsedUrlParams.scales || []; const hadExistingParams = !!existingParams.length; 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 ); if (p.activator < 4) { input[i].symmetry.input.value = p.symmetry = 1; } else { 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`

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

${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}

`; if (!hadExistingParams) { randomizeParams(); randomizeColors(); } output.value = params; return output; }33:T57b,attachBrush = { const canvas = regl._gl.canvas; function onMouse(evt) { if (evt.buttons !== 1) return; brushQueue.push({ center: [ evt.offsetX / canvas.offsetWidth, 1.0 - evt.offsetY / canvas.offsetHeight ], radius: brushRadius, alpha: brushAlpha, hardness: brushHardness, invertBrush }); evt.preventDefault(); } function onTouch(evt) { if (evt.target !== canvas) return; var rect = evt.target.getBoundingClientRect(); for (var i = 0; i < evt.touches.length; i++) { const touch = evt.touches[i]; const x = touch.pageX - rect.left; const y = touch.pageY - rect.top; brushQueue.push({ center: [x / canvas.offsetWidth, 1.0 - y / canvas.offsetHeight], radius: brushRadius, alpha: -brushAlpha, hardness: brushHardness, invertBrush }); } evt.preventDefault(); evt.stopPropagation(); } canvas.addEventListener('touchstart', onTouch); canvas.addEventListener('touchmove', onTouch); canvas.addEventListener('mousedown', onMouse); canvas.addEventListener('mousemove', onMouse); invalidation.then(() => { canvas.removeEventListener('mousemove', onMouse); canvas.removeEventListener('mousedown', onMouse); canvas.removeEventListener('touchstart', onMouse); canvas.removeEventListener('touchmove', onMouse); }); }34: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])); }); } }35:Ta3b,function performIteration(ctx) { configure({ N }, () => { blit(() => { if (ctx.simulate && (mutable frame < maxSteps || maxSteps === 0)) { 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, // thus we pack it into the four channels: (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 }); if (brushQueue.length) { f[1].use(() => brush(brushQueue)); brushQueue.length = 0; } // 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; } }); }); }36:T4ee,transferSolutionBetweenGridSizes = regl({ frag: ` precision highp float; uniform sampler2D src; uniform vec2 uResolution; uniform float noise; ${glslRandom} void main () { vec2 n = vec2(random(gl_FragCoord.xy), random(gl_FragCoord.xy + 10.0)) - 0.5; // Large patterns initialize badly. They tend to pick up diagonal stripes // where we'd expect the pattern to form along uniformly distributed // directions. The lines below transfer the solution from lower resolution // patterns with just enough of an amplitude to influence the // new resolution but not fully define the pattern (which would // end up pixellated if we fully transfered it) // If we fully resample though, we end up with strong pixellation from coarser // scales dominating the small scales. Thus, we use just a hint of the transferred // solution, enough to define the large scales. vec4 soln = texture2D(src, (gl_FragCoord.xy + n) / uResolution); gl_FragColor = vec4(soln.rgb, 0.08 * soln.w + noise * (n.x - 0.5)); }`, uniforms: { src: regl.prop('src'), noise: (ctx, props) => props && props.noise !== undefined ? props.noise : 0 }, framebuffer: regl.prop('dst') })37:T470,brush = regl({ vert: ` precision highp float; attribute vec2 xy; varying vec2 uv; // [-1, 1] x [-1, 1] uniform vec2 center, uResolution; uniform float radius; void main () { uv = xy; vec2 aspect = vec2(uResolution.y / uResolution.x, 1); gl_Position = vec4((center + aspect * xy * radius) * 2.0 - 1.0, 0, 1); }`, frag: ` precision highp float; uniform float alpha, hardness, brushSign; varying vec2 uv; // [-1, 1] x [-1, 1] void main () { float b = 10.0 * smoothstep(1.0, min(0.9999, hardness), length(uv)); gl_FragColor = vec4(vec3(0), brushSign * alpha * b); }`, attributes: { xy: [[-1, -1], [1, -1], [-1, 1], [1, 1]] }, uniforms: { center: regl.prop('center'), radius: regl.prop('radius'), alpha: regl.prop('alpha'), hardness: regl.prop('hardness'), brushSign: (ctx, props) => (props.invertBrush ? -1 : 1) }, primitive: 'triangle strip', count: 4, depth: { enable: false }, blend: { enable: true, func: { srcRGB: 1, dstRGB: 1, srcAlpha: 1, dstAlpha: 1 }, equation: { rgb: 'add', alpha: 'add' } } })38:T568,computeKernel = /* Unused unless we're tabulating kernels. Analytical kernels seem much better since the FFT passes are so much more expensive than some bessel function evaluation in the single convolution pass. Analytical kernels avoid tons of memory usage! */ 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') } )39: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) }; }3a: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]]; }3b:T127d,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. To optimize, it generates the GLSL // shader dynamically, depending on the configuration. If anything, expand the // resulting 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 step ${k( i => `float step${i} = ai${i}.x > ai${i}.y ? amtWtSym${i}.x : -amtWtSym${i}.x;` )} // Per-scale variation ${k( i => `float var${i} = max(1e-12, abs(ai${i}.y - ai${i}.x) * amtWtSym${i}.y);` )} // This section re-normalizes everything a couple time in case we increase the power, // just to make sure numbers stay in a reasonable range. It's super cheap compared to // the FFTs. :shrug: float varSum = 0.0; const float power = 1.0; ${k(i => `varSum += var${i};`)} ${k(i => `var${i} /= varSum;`)} ${k(i => `var${i} = 1.0 / pow(var${i}, power);`)} ${k(i => `varSum += var${i};`)} ${k(i => `var${i} /= varSum;`)} float step = 0.0; ${k(i => `step += step${i} * var${i};`)} varSum = 0.0; ${k(i => `var${i} *= var${i};`)} ${k(i => `varSum += var${i};`)} ${k(i => `var${i} /= varSum;`)} vec3 targetColor = vec3(0); ${k(i => `targetColor += var${i} * color${i};`)} vec3 outputColor = mix(color, targetColor, min(0.2, 0.1 * stepSize * colorStepSizeFactor)); // 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); }`; }3c: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 } })3d: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); } `3e: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; } `3f: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; }40:[{"id":"651a5044cedbee75154d873b34aa208ab472ac5a4355a418a4a16d29f0206ebc6de5a3abff4075feb02aff20419ae6f47c033a33be3d4c50fc5d5cb026625a5d","href":"https://static.observableusercontent.com/files/651a5044cedbee75154d873b34aa208ab472ac5a4355a418a4a16d29f0206ebc6de5a3abff4075feb02aff20419ae6f47c033a33be3d4c50fc5d5cb026625a5d","name":"turing.jpg","type":"image/jpeg","lastModified":1612640544968.839,"size":511106}] 2f:{"id":"fbbe078b3f4635a6","slug":"multiscale-turing-pattern-bot-v2","title":"Interactive Multi-scale Turing Patterns","thumbnail":"e26f35e4b22733fd37892324d7f97281caf7016b89a1744180b05696d173cf98","access_level":"public","create_time":"$D2021-01-28T23:38:45.124Z","update_time":"$D2022-06-22T15:22:51.351Z","view_time":null,"first_public_time":"$D2021-02-06T05:44:21.205Z","fork":{"id":"4cd3bc6cad02749f","slug":"multiscale-turing-pattern-bot","title":"Multiscale Turing Pattern Bot","owner":{"id":"f1b8352b963a77b4","login":"rreusser","name":"Ricky Reusser"}},"stars":15,"starred":false,"owner":{"type":"team","id":"f1b8352b963a77b4","login":"rreusser","name":"Ricky Reusser","avatar_url":"https://avatars-next.observableusercontent.com/49c18a2ac0092176d4ea8348a1dd538e0b460b086b89d602b8d21ffe0821d92e","tier":"starter_2024"},"version":3489,"publish_version":3489,"role":null,"authored":false,"authors":[{"type":"individual","id":"908c4be2279a714e","login":"rreusser","name":"Ricky Reusser","avatar_url":"https://avatars-next.observableusercontent.com/fa41989f47bb986723af5b9c22176cb503748426f56e565000ea93acd9eab86c","tier":null}],"members":[{"type":"individual","id":"908c4be2279a714e","login":"rreusser","name":"Ricky Reusser","avatar_url":"https://avatars-next.observableusercontent.com/fa41989f47bb986723af5b9c22176cb503748426f56e565000ea93acd9eab86c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":3,"collection":{"id":"2ef792b9227476b4","slug":"webgl","title":"WebGL","owner":{"id":"f1b8352b963a77b4","login":"rreusser","name":"Ricky Reusser"}},"type":"notebook","body":{"title":"Interactive Multi-scale Turing Patterns","cells":[{"id":1855,"value":"{\n const el = document.createElement(\"div\");\n const h = document.createElement(\"h1\");\n h.textContent = `Interactive Multi-scale Turing Patterns`;\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(\"turing.jpg\").url()})`;\n el.style.backgroundSize = \"cover\";\n el.appendChild(h);\n return el;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":871,"value":"viewof contrast = slider({\n title: \"Display parameters\",\n min: 0,\n max: 2,\n value:\n parsedUrlParams && parsedUrlParams.contrast !== undefined\n ? parsedUrlParams.contrast\n : 0.4,\n description: html`Contrast`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":127,"value":"viewof gamma = slider({\n min: 0.5,\n max: 2.5,\n step: 0.01,\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","author":"$undefined","summary":"$undefined"},{"id":1025,"value":"viewof colorStrength = slider({\n min: 0,\n max: 2,\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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":3267,"value":"viewof defaultStepSize = slider({\n description:\n 'Simulation speed (faster is more fun for painting; may need to change contrast to compensate for different speeds)',\n min: 0,\n max: 8,\n step: 0.1,\n value: 8\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1492,"value":"viewof scaleFactor = select({\n description:\n 'Size (disable restart on parameter change to transfer solution when changing sizes!)',\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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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 : 0,\n description: 'Maximum number of frames'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2562,"value":"mutable frame = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":48,"value":"viewof simulate = checkbox({ options: ['Simulate'], value: 'Simulate' })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":60,"value":"viewof regl = createREGLContext({\n width: 256,\n height: 256\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":50,"value":"viewof restart = button({ value: 'Restart' })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1090,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":3330,"value":"viewof invertBrush = checkbox({\n options: ['Invert brush'],\n value: false,\n title: 'Brush parameters'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3231,"value":"viewof brushRadius = slider({\n description: 'Brush radius',\n min: 0,\n max: 0.4,\n value: 0.08,\n step: 0.001\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3225,"value":"viewof brushAlpha = slider({\n description: 'Brush alpha',\n min: 0,\n max: 1,\n value: 1,\n step: 0.001\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3261,"value":"viewof brushHardness = slider({\n description: 'Brush hardness',\n min: 0,\n max: 1,\n value: 0.1,\n step: 0.001\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":1619,"value":"viewof randomHueRange = rangeSlider({\n title: 'Randomization Parameters',\n value: [0, 360],\n min: -180,\n max: 540,\n description: 'Random HSL hue range'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":3152,"value":"{\n const btn = button({ value: 'Download URL' });\n btn.addEventListener('input', () => {\n downloadURI(\n `data:text/plain;base64,${btoa(\n `${document.baseURI}#${btoa(JSON.stringify(urlParams))}`\n )}`,\n 'link.txt'\n );\n });\n return btn;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1707,"value":"md`[🔗 Share parameters](${document.baseURI}#${btoa(\n JSON.stringify(urlParams)\n)})`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":2084,"value":"stepSize = parsedUrlParams && parsedUrlParams.stepSize !== undefined\n ? parsedUrlParams.stepSize\n : defaultStepSize","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2085,"value":"colorStepSizeFactor = parsedUrlParams && parsedUrlParams.colorStep !== undefined\n ? parsedUrlParams.colorStep\n : 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1653,"value":"renderToVideo = md`### Render to video`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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({ simulate: 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 flipY: true,\n width: regl._gl.canvas.width,\n height: regl._gl.canvas.height\n }\n )\n}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1381,"value":"animationFrames = 2000","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1487,"value":"stepsPerFrame = 1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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- ~~Weight scales by inverse-variation rather than minimum variation to produce smoother blending between scales~~\n- ~~PAINT~~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":65,"value":"md`## Framebuffers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":2472,"value":"useTabulatedKernels = kernelType === 'Tabulated kernels'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":46,"value":"N = [\n 128 * +aspectRatio * Math.pow(2, +scaleFactor),\n 128 * Math.pow(2, +scaleFactor)\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3099,"value":"resizeWithoutNewRegl = {\n regl._gl.canvas.width = N[0];\n regl._gl.canvas.height = N[1];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":72,"value":"f = {\n resizeWithoutNewRegl;\n const prevFbos = (this || []).slice();\n const newFbos = [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 mutable skipInitialization = true;\n regl.poll();\n prevFbos.forEach((prevFbo, i) => {\n if (i) return;\n configure({ N }, () => {\n blit(() => {\n transferSolutionBetweenGridSizes({\n src: prevFbo,\n dst: newFbos[i],\n noise: 0.5\n });\n });\n });\n prevFbo.destroy();\n });\n // Instead, we'll transfer the data forward to the new FBO!\n //invalidation.then(() => fbos.forEach(fbo => fbo.destroy()));\n return newFbos;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":321,"value":"kernelFFT = {\n // Returns a placeholder array if not using tabulated kernels\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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":1346,"value":"md`## Simulation setup`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3169,"value":"brushQueue = []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3174,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3107,"value":"// A one-time flag to prevent it from reinitializing when the size of the domain\n// changes. Immediately set false after used.\nmutable skipInitialization = true","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2747,"value":"mutable needsDraw = true","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":52,"value":"initializationTrigger = {\n convolve;\n restart;\n //N;\n initializeSolution();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1672,"value":"restartOnParamChangeTrigger = restartOnParamChange &&\n scaleParams &&\n initializeSolution()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":54,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":290,"value":"function initializeSolution() {\n mutable frame = 0;\n mutable needsDraw = true;\n if (mutable skipInitialization) {\n mutable skipInitialization = false;\n return;\n }\n configure({ N }, () => {\n blit(() => {\n f[0].use(initialize);\n });\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1366,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":67,"value":"md`## WebGL commands`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":3041,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3163,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":203,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":42,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":407,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":599,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":98,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":224,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":20,"value":"md`## Definitions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2190,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1406,"value":"globalScaleFactor = Math.pow(2, scaleFactor - 2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":160,"value":"KERNEL_TYPE = ({ GAUSSIAN: 0, CIRCULAR: 1 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":21,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":18,"value":"createREGL = require('regl')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1576,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2657,"value":"import { getCurrentPinnedName } from '@mootari/notebook-data@361'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1614,"value":"import { rangeSlider } from '@mootari/range-slider'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1140,"value":"import { floatRgbToHex, hexRgbToFloat, downloadURI } from '@rreusser/utils'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":14,"value":"import { encodeMP4 } from '@rreusser/h264-mp4-encoder'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":115,"value":"import { glsl } from '@stwind/glsl-chunk-tag'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3479,"value":"md`Ughh… why didn't I just use the extension rather than feature-detecting float support.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"import { canWriteToFBOOfType } from '@rreusser/regl-tools'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"import {\n planFFT,\n createFFTPassCommand,\n glslWavenumber\n} from '@rreusser/glsl-fft'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3,"value":"import { cmul } from '@rreusser/glsl-complex'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W40","stdlib":"1","titling":"auto"}} 30:"$2f:body"