2d:null 2e:["$","title",null,{"children":"3D Reaction-Diffusion | Ricky Reusser | Observable"}] 33:T4d0,md`This notebook implements a three-dimensional version of the Gray-Scott reaction diffusion simulation [as described by Karl Sims](https://www.karlsims.com/rd.html), ${tex` \begin{aligned} \partial_t A &= D_A \nabla^2 A - AB^2 + f (1 - A) \\ \partial_t B &= D_B \nabla^2 B - AB^2 - (k + f)B \end{aligned} `} with initial conditions A = 1, B = 0, and a small region at the center with B = 1. The computation is performed entirely on the GPU by ping-ponging back and forth between two *two-dimensional* textures. The (slightly-grueling) index math to treat the two dimensional textures as if they are three-dimensional is performed on the GPU. Rendering is accomplished by via two vertex attribute buffers: one stores a grid of triangles represening a two-dimensional slice, and the second stores a one-dimensional slice. Using instanced rendering, the two-dimensional slice slides through the three dimensional domain. The slice consists of a grid of triangles, one through every data point. A \`varying\` value peforms the interpolation. The slices are ordered back-to-front according to the view angle so that we can use the [painter's algorithm](https://en.wikipedia.org/wiki/Painter%27s_algorithm) to simplify transparency.`34:T880,simulationLoop = { if (!run) return; let gif; if (saveGIF) { gif = new GIF({ width: regl._gl.canvas.width, height: regl._gl.canvas.height }); } var gifTick = 0; var gifFrame = 0; var gifDone = false; var loop = regl.frame(({ tick }) => { try { offscreenFbo.resize(regl._gl.canvas.width, regl._gl.canvas.height); camera({ dTheta: doRotate.rotationRate / 60 }, state => { if (!simulate && !camera.state.dirty) return; var direction = getDirection(camera.state.eye); // This is the main iteration loop: if (simulate) { for (var i = 0; i < stepsPerIteration; i++) { fbos[1].use(() => iterate({ src: fbos[0] })); fbos[0].use(() => iterate({ src: fbos[1] })); } } // Draw the visualization off-screen: offscreenFbo.use(() => { regl.clear({ color: [0, 0, 0, 1] }); drawSlice({ slice: slices[direction.imax], direction, alpha, alphaThreshold, src: fbos[0] }); }); // Invert, gamma-correct, and draw to the screen: copy({ src: offscreenFbo }); }); /*if (simulate && gifTick % (gifSkip / 2) === 0) { fbos[1].use(() => shift({ src: fbos[0] })); swap(fbos); }*/ if (gifTick++ % gifSkip === 0) { if (saveGIF) { //swap(fbos); regl.poll(); gif.addFrame(regl._gl.canvas, { copy: true, delay: 16 }); console.log('GIF frame', gifFrame, '/', gifFrames); if (gifFrame++ === gifFrames) { console.log('GIF capture complete. Beginning conversion…'); gif.render(); loop.cancel(); loop = null; } } } } catch (e) { loop.cancel(); loop = null; } }); invalidation.then(() => { loop && loop.cancel(); if (saveGIF) { console.log('Abort GIF capture'); gif.abort(); } }); if (saveGIF) { gif.on("finished", blob => { console.log('GIF conversion complete'); saveFile(blob, 'rd.gif'); }); } }35:T56c,slices = { function createFaces(axis1, axis2, axis3) { var positions = createTextureLookupTable(shape[axis2], shape[axis1]); var depths = new Float32Array(shape[axis3]); var count = (shape[axis1] - 1) * (shape[axis2] - 1); var elements = new Uint16Array(count * 6); var c = 0; for (var i = 0; i < shape[axis1] - 1; i++) { for (var j = 0; j < shape[axis2] - 1; j++) { var idx00 = i * shape[axis2] + j; var idx01 = i * shape[axis2] + (j + 1); var idx10 = (i + 1) * shape[axis2] + j; var idx11 = (i + 1) * shape[axis2] + (j + 1); elements[c + 0] = idx00; elements[c + 1] = idx10; elements[c + 2] = idx11; elements[c + 3] = idx00; elements[c + 4] = idx11; elements[c + 5] = idx01; c += 6; } } for (var i = 0; i < shape[axis3]; i++) { depths[i] = (i + 0.5) / shape[axis3]; } var positionsBuffer = regl.buffer(positions); var elementsBuffer = regl.elements(elements); var depthsBuffer = regl.buffer(depths); invalidation.then(() => { positionsBuffer.destroy(); elementsBuffer.destroy(); }); return { count, positions, elements, positionsBuffer, elementsBuffer, depths, depthsBuffer }; } return [createFaces(1, 2, 0), createFaces(2, 0, 1), createFaces(0, 1, 2)]; }36:Tb96,iterate = regl({ vert: ` precision highp float; attribute vec2 uv; varying vec2 vUV; void main () { gl_Position = vec4(uv, 0, 1); }`, frag: ` precision highp float; uniform vec3 shape, stride, dx; uniform vec2 texStride, D; uniform float texSize, dt, k, f; uniform sampler2D src; ${coordinateConversionFunctions} void main () { vec3 ijk = fragCoordToIJK(gl_FragCoord.xy); vec3 ijkIP = mod(ijk + vec3(1, 0, 0) + 0.5, shape) - 0.5; vec3 ijkIM = mod(ijk + vec3(-1, 0, 0) + 0.5, shape) - 0.5; vec3 ijkJP = mod(ijk + vec3(0, 1, 0) + 0.5, shape) - 0.5; vec3 ijkJM = mod(ijk + vec3(0, -1, 0) + 0.5, shape) - 0.5; vec3 ijkKP = mod(ijk + vec3(0, 0, 1) + 0.5, shape) - 0.5; vec3 ijkKM = mod(ijk + vec3(0, 0, -1) + 0.5, shape) - 0.5; vec2 y = texture2D(src, ijkToTexCoord(ijk)).xy; vec2 yIP = texture2D(src, ijkToTexCoord(ijkIP)).xy; vec2 yIM = texture2D(src, ijkToTexCoord(ijkIM)).xy; vec2 yJP = texture2D(src, ijkToTexCoord(ijkJP)).xy; vec2 yJM = texture2D(src, ijkToTexCoord(ijkJM)).xy; vec2 yKP = texture2D(src, ijkToTexCoord(ijkKP)).xy; vec2 yKM = texture2D(src, ijkToTexCoord(ijkKM)).xy; ${ dirichlet ? ` vec3 center = 0.5 * shape - 0.5; float r2 = shape.x * shape.x * 0.25; #if 0 if (ijkIM.x < 0.01) yIM = vec2(0); if (ijkIP.x > shape.x - 1.01) yIP = vec2(0); if (ijkJM.y < 0.01) yJM = vec2(0); if (ijkJP.y > shape.y - 1.01) yJP = vec2(0); if (ijkKM.z < 0.01) yKM = vec2(0); if (ijkKP.z > shape.y - 1.01) yKP = vec2(0); #else if (dot(ijkIM - center, ijkIM - center) > r2) yIM = vec2(0.0, 0); if (dot(ijkIP - center, ijkIP - center) > r2) yIP = vec2(0.0, 0); if (dot(ijkJM - center, ijkJM - center) > r2) yJM = vec2(0.0, 0); if (dot(ijkJP - center, ijkJP - center) > r2) yJP = vec2(0.0, 0); if (dot(ijkKM - center, ijkKM - center) > r2) yKM = vec2(0.0, 0); if (dot(ijkKP - center, ijkKP - center) > r2) yKP = vec2(0.0, 0); #endif ` : "" } /* vec3 dx2 = 1.0 / (dx * dx); vec2 laplacian = (yIP + yIM - 2.0 * y) * dx2.x + (yJP + yJM - 2.0 * y) * dx2.y + (yKP + yKM - 2.0 * y) * dx2.z;*/ vec2 laplacian = yIP + yIM + yJP + yJM + yKP + yKM - 6.0 * y; float a = y.x; float b = y.y; float ab2 = a * b * b; vec2 dydt = D * laplacian + vec2( -ab2 + f * (1.0 - a), ab2 - (k + f) * b ); gl_FragColor = vec4(max(vec2(0.0), min(vec2(1.0), y + dydt * dt)), 0, 1); }`, attributes: { uv: [-4, -4, 4, -4, 0, 4] }, uniforms: { stride: () => [1, shape[0], shape[0] * shape[1]], texStride: () => [1, nTex], shape, dx: [1, 1, 1], texSize: nTex, dt, src: regl.prop("src"), D: () => [DA, DB], k, f }, depth: { enable: false }, count: 3 })37:Ta4e,drawSlice = regl({ vert: ` precision highp float; attribute vec2 uv; attribute float w; uniform mat4 uProjectionView; uniform vec3 e1, e2, e3, uEye; uniform float uAlpha, t, order, frequency; varying vec4 vColor; varying float a; uniform vec3 shape, stride; uniform vec2 texStride; uniform float texSize, exponent; uniform sampler2D src; ${coordinateConversionFunctions} void main () { float ww = order < 0.0 ? 1.0 - w : w; vec3 p = uv.x * e1 + uv.y * e2 + ww * e3; vec2 value = texture2D(src, positionToTexCoord(p)).xy; // This small correction factor corrects for the angle of incidence at which // we view a slice. Divide by the cosine of the angle of incidence so that // slices viewing at a glancing angle have a stronger contribution float vNdotE = abs(dot(e3, normalize(uEye - p))); a = pow(value.y, exponent) * uAlpha; vec3 c = vec3(-1.9, -1.0, 1.5); vec3 c2 = vec3(1.4, -1.2, -2.4); vColor = vec4( vec3(0.05 + value.x * (1.0 - c) + value.y * (c - c2)), min(1.0, a / vNdotE) ); gl_Position = uProjectionView * vec4(p, 1); }`, frag: ` precision highp float; varying vec4 vColor; uniform float uAlphaThreshold; varying float a; void main () { if (a < uAlphaThreshold) discard; gl_FragColor = vColor; }`, attributes: { uv: (ctx, props) => ({ buffer: props.slice.positionsBuffer, divisor: 0 }), w: (ctx, props) => ({ buffer: props.slice.depthsBuffer, divisor: 1 }) }, elements: (ctx, props) => props.slice.elementsBuffer, primitive: "triangles", uniforms: {}, instances: (ctx, props) => props.slice.depths.length, uniforms: { e1: (ctx, props) => props.direction.e1, e2: (ctx, props) => props.direction.e2, e3: (ctx, props) => props.direction.e3, order: (ctx, props) => props.direction.sign, uEye: () => camera.state.eye, uAlpha: (ctx, props) => (props.alpha / props.slice.depths.length) * 1000, uAlphaThreshold: (ctx, props) => Math.pow(props.alphaThreshold, exponent), t: regl.context("time"), frequency: regl.prop("frequency"), exponent, stride: () => [1, shape[0], shape[0] * shape[1]], texStride: () => [1, nTex], shape, dx, texSize: nTex, src: regl.prop("src") }, depth: { enable: false }, blend: { enable: true, equation: { rgb: "add", alpha: "add" }, func: { srcRGB: "src alpha", dstRGB: "one minus src alpha", srcAlpha: 1, dstAlpha: 1 } } })38:T5b4,coordinateConversionFunctions = ` // vec2(1.5, 0.5) --> 1 int fragCoordToTexIndex (vec2 fragCoord) { return int(dot(fragCoord - 0.5, vec2(1, texSize)) + 0.5); } // 1 --> vec3(1, 0, 0) vec3 texIndexToIJK (int texIndex) { return floor(mod((float(texIndex) + 0.5) / stride, shape)); } // vec3(1, 0, 0) --> (0.3, 0.1, 0.1) vec3 ijkToPosition (vec3 ijk) { return (ijk + 0.5) / shape; } // vec3(0.3, 0.1, 0.1) -> vec3(1, 0, 0) vec3 positionToIJK (vec3 position) { return floor(position * shape); } // vec3(1, 0, 0) -> 1 int ijkToTexIndex (vec3 ijk) { return int(dot(ijk, stride) + 0.5); } // 1 --> vec2(1.5, 0.5) vec2 texIndexToFragCoord (int texIndex) { return floor(mod((float(texIndex) + 0.5) / texStride, texSize)) + 0.5; } vec2 fragCoordToTexCoord (vec2 fragCoord) { return fragCoord / texSize; } vec2 texCoordToFragCoord (vec2 texCoord) { return texCoord * texSize; } vec2 ijkToFragCoord (vec3 ijk) { return texIndexToFragCoord(ijkToTexIndex(ijk)); } vec2 ijkToTexCoord (vec3 ijk) { return fragCoordToTexCoord(ijkToFragCoord(ijk)); } vec3 fragCoordToIJK (vec2 fragCoord) { return texIndexToIJK(fragCoordToTexIndex(fragCoord)); } vec3 fragCoordToPosition(vec2 fragCoord) { return ijkToPosition(fragCoordToIJK(fragCoord)); } vec2 positionToFragCoord(vec3 position) { return ijkToFragCoord(positionToIJK(position)); } vec2 positionToTexCoord (vec3 position) { return fragCoordToTexCoord(positionToFragCoord(position)); } `39:[] 31:{"id":"281fb2a5b5ee3096","slug":"3d-reaction-diffusion","title":"3D Reaction-Diffusion","thumbnail":"33fa3890023facc79074ca9e6a64ce6fb42375c2399e2d2e3728c83e3d8449fc","access_level":"public","create_time":"$D2020-03-14T20:05:34.362Z","update_time":"$D2023-12-18T21:45:22.299Z","view_time":null,"first_public_time":"$D2020-03-16T02:43:16.385Z","has_unpublished_edits":null,"fork":false,"stars":42,"starred":false,"owner":{"type":"team","id":"f1b8352b963a77b4","login":"rreusser","name":"Ricky Reusser","avatar_url":"https://avatars-next.observableusercontent.com/49c18a2ac0092176d4ea8348a1dd538e0b460b086b89d602b8d21ffe0821d92e","tier":"starter_2024"},"version":2305,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"908c4be2279a714e","login":"rreusser","name":"Ricky Reusser","avatar_url":"https://avatars-next.observableusercontent.com/fa41989f47bb986723af5b9c22176cb503748426f56e565000ea93acd9eab86c","tier":null}],"members":[{"type":"individual","id":"908c4be2279a714e","login":"rreusser","name":"Ricky Reusser","avatar_url":"https://avatars-next.observableusercontent.com/fa41989f47bb986723af5b9c22176cb503748426f56e565000ea93acd9eab86c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":7,"collection":{"id":"85cbbc7776cf19d5","slug":"math","title":"Math","owner":{"id":"f1b8352b963a77b4","login":"rreusser","name":"Ricky Reusser"}},"type":"notebook","body":{"title":"3D Reaction-Diffusion","cells":[{"id":641,"value":"md`# 3D Reaction-Diffusion`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1474,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"canvas = {\n var canvas = document.createElement('canvas');\n var w = Math.min(width, 800);\n var h = Math.floor(Math.min(w * 0.7, 700));\n canvas.width = w;\n canvas.height = w;\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1051,"value":"viewof restart = button({ value: 'restart' })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1260,"value":"viewof run = checkbox({ options: ['render'], value: 'render' })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1350,"value":"viewof saveGIF = checkbox({ options: ['save GIF'] })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"viewof k = Inputs.range([0, 0.1], {\n step: 0.0001,\n value: 0.063,\n label: html`Kill ratio, ${tex`k`}`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"viewof f = Inputs.range([0, 0.1], {\n value: 0.024,\n label: html`Feed rate, ${tex`f`}`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"viewof DA = Inputs.range([0, 2], {\n value: 1.0,\n label: html`Diffusion rate, ${tex`D_A`}`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"viewof DB = Inputs.range([0, 2], {\n value: 0.5,\n label: html`Diffusion rate, ${tex`D_B`}`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1176,"value":"viewof dt = Inputs.range([0.001, 0.2], {\n step: 0.0001,\n value: 0.15,\n label: html`Time step, ${tex`\\Delta t`}`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":597,"value":"viewof alpha = Inputs.range([0.01, 1], {\n value: 1,\n label: \"Alpha\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":630,"value":"viewof alphaThreshold = Inputs.range([0.0001, 0.5], {\n transform: Math.log,\n value: 0.0001,\n label: \"Alpha rendering threshold\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1184,"value":"viewof exponent = Inputs.range([0.5, 4], {\n step: 0.01,\n value: 3.3,\n label: \"Alpha exponent\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1415,"value":"viewof stepsPerIteration = Inputs.range([1, 100], {\n value: 5,\n step: 1,\n label: \"Steps per iteration\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1538,"value":"viewof rotationRate = Inputs.range([0, 0.1], {\n value: 0.01,\n label: \"Rotation rate\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1616,"value":"viewof dirichlet = checkbox({ options: ['dirichlet'], value: null })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"viewof simulate = checkbox({ options: ['simulate'], value: 'simulate' })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1516,"value":"md`Sizes up to about ${tex`200 \\times 200 \\times 200`} cells are valid before something goes wrong with the integer indexing. (Although rectangular domains currently get rendered as square.)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"shape = [150, 150, 150]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1425,"value":"viewof resetCamera = button({ value: 'reset camera' })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1356,"value":"md`The GIF takes a while to encode. You may open up the inspector to get some indication of progress. GIFs may be encoded to mp4 via:\n\\`\\`\\`\nffmpeg -i input.gif -movflags faststart -pix_fmt yuv420p -vf \"scale=trunc(iw/2)*2:trunc(ih/2)*2\" output.mp4\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1352,"value":"viewof gifFrames = slider({\n min: 1,\n max: 2000,\n value: 500,\n step: 1,\n description: 'Number of frames in gif'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1362,"value":"viewof gifSkip = slider({\n min: 1,\n max: 20,\n value: 5,\n step: 1,\n description: 'GIF frame skip'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"regl = createREGL({\n canvas,\n extensions: [\n 'oes_texture_float',\n 'oes_texture_half_float',\n 'angle_instanced_arrays'\n ],\n pixelRatio: Math.min(devicePixelRatio, 1),\n attributes: { antialias: false, preserveDrawingBuffer: true }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"dx = shape.map(n => 1 / n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"n = shape.reduce((a, b) => a * b, 1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"nTex = Math.ceil(Math.sqrt(n))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"textureLookup = createTextureLookupTable(nTex, nTex, 2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"textureLookupBuffer = regl.buffer(textureLookup)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1532,"value":"doRotate = ({ rotationRate: 0 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1536,"value":"rotateWithoutRestart = {\n doRotate.rotationRate = rotationRate;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1054,"value":"restartSimulation = {\n saveGIF;\n //f, k, DA, DB;\n restart;\n regl.poll();\n fbos[0].use(initialize);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"fbos = [0, 1].map(() =>\n regl.framebuffer({\n colorType: 'float',\n width: nTex,\n height: nTex\n })\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"offscreenFbo = regl.framebuffer({\n colorType: 'half float',\n depthStencil: false\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":352,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":327,"value":"slicePoints = createTextureLookupTable(shape[0], shape[1])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":686,"value":"initialize = regl({\n vert: `\n precision highp float;\n attribute vec2 uv;\n varying vec2 vUV;\n void main () {\n gl_Position = vec4(uv, 0, 1);\n }`,\n frag: `\n precision highp float;\n uniform vec3 shape, stride;\n uniform vec2 texStride;\n uniform float texSize;\n\n ${coordinateConversionFunctions}\n\n void main () {\n vec3 position = fragCoordToPosition(gl_FragCoord.xy);\n vec2 texCoord = positionToTexCoord(position);\n\n float r = length(position - 0.5);\n float a = 1.0;\n float ball = smoothstep(0.25, 0.2, r);\n float f = 12.0;\n float b = max(0.0, min(1.0, 0.5 + 4.0 * cos(position.x * f - 1.0) * cos(position.y * f - 2.0) * cos(position.z * f - 3.0)));\n \n gl_FragColor = vec4(a, b * ball, 0, 1);\n }`,\n attributes: {\n uv: [-4, -4, 4, -4, 0, 4]\n },\n uniforms: {\n stride: () => [1, shape[0], shape[0] * shape[1]],\n texStride: () => [1, nTex],\n shape,\n dx,\n texSize: nTex\n },\n depth: { enable: false },\n count: 3\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1864,"value":"shift = regl({\n vert: `\n precision highp float;\n attribute vec2 uv;\n varying vec2 vUV;\n void main () {\n gl_Position = vec4(uv, 0, 1);\n }`,\n frag: `\n precision highp float;\n uniform vec3 shape, stride, dx;\n uniform vec2 texStride, D;\n uniform float texSize, dt, k, f;\n uniform sampler2D src;\n\n ${coordinateConversionFunctions}\n\n void main () {\n vec3 ijk = fragCoordToIJK(gl_FragCoord.xy);\n vec3 ijkKP = mod(ijk + vec3(0, 1, 0) + 0.5, shape) - 0.5;\n vec2 yKP = texture2D(src, ijkToTexCoord(ijkKP)).xy;\n gl_FragColor = vec4(yKP, 0, 1);\n }`,\n attributes: {\n uv: [-4, -4, 4, -4, 0, 4]\n },\n uniforms: {\n stride: () => [1, shape[0], shape[0] * shape[1]],\n texStride: () => [1, nTex],\n shape,\n texSize: nTex,\n src: regl.prop('src')\n },\n depth: { enable: false },\n count: 3\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":287,"value":"blit = regl({\n vert: `\n precision highp float;\n varying vec2 uv;\n attribute vec2 xy;\n void main () {\n uv = 0.5 + 0.5 * xy;\n gl_Position = vec4(xy, 0, 1);\n }\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","output":"$undefined","database":"$undefined"},{"id":290,"value":"copy = {\n let copy = regl({\n frag: `\n precision highp float;\n varying vec2 uv;\n uniform sampler2D src;\n uniform float gamma;\n void main () {\n vec3 color = min(max(1.0 - texture2D(src, uv).rgb, 0.0), 1.0);\n gl_FragColor = vec4(\n pow(color.r, gamma),\n pow(color.g, gamma),\n pow(color.b, gamma),\n 1.0);\n }`,\n uniforms: {\n src: regl.prop('src'),\n gamma: (ctx, props) => 1 / 2.2\n }\n });\n return props => blit(() => copy(props));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":388,"value":"getDirection = {\n var e1 = [[0, 1, 0], [0, 0, 1], [1, 0, 0]];\n var e2 = [[0, 0, 1], [1, 0, 0], [0, 1, 0]];\n var e3 = [[1, 0, 0], [0, 1, 0], [0, 0, 1]];\n return function getDirection(eye) {\n var dx = vec3sub(vec3create(), eye, vec3fromValues(0.5, 0.5, 0.5));\n vec3normalize(dx, dx);\n var a0 = Math.abs(dx[0]);\n var a1 = Math.abs(dx[1]);\n var a2 = Math.abs(dx[2]);\n var imax = a1 > a0 ? (a2 > a1 ? 2 : 1) : a2 > a0 ? 2 : 0;\n var sign = Math.sign(dx[imax]);\n return { imax, sign, e1: e1[imax], e2: e2[imax], e3: e3[imax] };\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":830,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":703,"value":"function pluck(x, n, offset) {\n offset = offset | 0;\n var entries = [];\n for (var i = 0; i < x.length; i += n) {\n entries.push(x[i + offset]);\n }\n return entries;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"camera = {\n saveGIF;\n resetCamera;\n var camera = createReglCamera(regl, {\n phi: 0.4,\n distance: 1.25,\n center: [0.5, 0.5, 0.5],\n near: 0.001,\n far: 10\n });\n createInteractions(camera);\n return camera;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"'junk' /*coordinateLookup = {\n var data = new Float32Array(nTex * nTex * 4);\n var c = 0;\n for (var i = 0; i < shape[0]; i++) {\n for (var j = 0; j < shape[1]; j++) {\n for (var k = 0; k < shape[2]; k++) {\n var index = c++;\n data[index * 4] = i;\n data[index * 4 + 1] = j;\n data[index * 4 + 2] = k;\n }\n }\n }\n return data;\n}*/\n/*coordinateLookupTexture = regl.texture({\n data: coordinateLookup,\n height: nTex,\n width: nTex\n})*/","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1014,"value":"function swap(array, i, j) {\n i = i === undefined ? 0 : 1;\n j = j === undefined ? 1 : 0;\n var tmp = array[i];\n array[i] = array[j];\n array[j] = tmp;\n return array;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"createREGL = require('regl')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"import {\n createTextureLookupTable,\n canWriteToFBOOfType\n} from '@rreusser/regl-tools'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"import { checkbox, slider, button } from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":390,"value":"import {\n vec3normalize,\n vec3create,\n vec3fromValues,\n vec3sub,\n vec3length\n} from '@rreusser/gl-vec3'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"import { createReglCamera, createInteractions } from '@rreusser/regl-tools'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1342,"value":"GIF = {\n const gif = await require(\"gif.js@0.2\");\n const workerScript = await fetch(\n \"https://unpkg.com/gif.js@0.2/dist/gif.worker.js\"\n )\n .then(response => response.blob())\n .then(blob => URL.createObjectURL(blob, { type: \"text/javascript\" }));\n function GIF(options) {\n gif.call(this, { workerScript, ...options });\n }\n GIF.prototype = Object.create(gif.prototype);\n return GIF;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1344,"value":"function saveFile(blob, filename) {\n if (window.navigator.msSaveOrOpenBlob) {\n window.navigator.msSaveOrOpenBlob(blob, filename);\n } else {\n const a = document.createElement('a');\n document.body.appendChild(a);\n const url = window.URL.createObjectURL(blob);\n a.href = url;\n a.download = filename;\n a.click();\n setTimeout(() => {\n window.URL.revokeObjectURL(url);\n document.body.removeChild(a);\n }, 0);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W39","stdlib":"1","titling":"auto"}} 32:"$31:body"