2a:null 2b:["$","title",null,{"children":"Physarum simulation | Cora Johnson-Roberson | Observable"}] 30:T5d8,touchHandlers = canvas => { const ongoingTouches = {}; const yOffset = -30; const touchStart = e => { e.preventDefault(); const touches = e.changedTouches; for (let i = 0; i < touches.length; i++) { const touch = touches[i]; ongoingTouches[touch.identifier] = { pageX: touch.pageX, pageY: touch.pageY + yOffset }; } updateMouseXY(canvas.clientWidth, canvas.clientHeight, ongoingTouches); }; const touchMove = e => { e.preventDefault(); const touches = e.changedTouches; for (let i = 0; i < touches.length; i++) { const touch = touches[i]; ongoingTouches[touch.identifier] = { pageX: touch.pageX, pageY: touch.pageY + yOffset }; } updateMouseXY(canvas.clientWidth, canvas.clientHeight, ongoingTouches); }; const touchCancel = e => { e.preventDefault(); const touches = e.changedTouches; for (let i = 0; i < touches.length; i++) { const touch = touches[i]; delete ongoingTouches[touch.identifier]; } updateMouseXY(canvas.clientWidth, canvas.clientHeight, ongoingTouches); }; const touchEnd = e => { e.preventDefault(); const touches = e.changedTouches; for (let i = 0; i < touches.length; i++) { const touch = touches[i]; delete ongoingTouches[touch.identifier]; } updateMouseXY(canvas.clientWidth, canvas.clientHeight, ongoingTouches); }; return { touchStart, touchMove, touchCancel, touchEnd }; }31:T7ed,frame = { const frame = regl.frame(context => { const tick = countTicks(); const dataMapIn = dataMapBuffers[tick % 2]; const dataMapOut = dataMapBuffers[(tick + 1) % 2]; const trailMapIn = trailMapBuffers[tick % 2]; const trailMapOut = trailMapBuffers[(tick + 1) % 2]; rasterizedDataMap.use(() => { regl.clear({ color: [0, 0, 0, 1] }); drawParticles({ dataMap: dataMapIn, depositOnly: false }); }); dataMapOut.use(() => { updateDataMap({ dataMap: dataMapIn, trailMap: trailMapIn, rasterizedDataMap, collisionDetection: collisionDetection === "collision", rotationAngle: radians(rotationAngle), sensorAngle: radians(sensorAngle), sensorOffset, time: tick / 60.0 }); }); trailMapIn.use(() => { drawParticles({ dataMap: dataMapOut, depositOnly: true }); if (mouseXY.length) { drawMouse({ mouseXY: mouseXY, pointSize: mousePointSize, color: [1, 1, 1, 1] }); } }); trailMapOut.use(() => { diffuse({ trailMap: trailMapIn, decay }); }); switch (textureToShow) { case "trail": blit({ texture: trailMapOut }); break; case "trail_in": blit({ texture: trailMapIn }); break; case "data": blit({ texture: rasterizedDataMap }); break; case "data_accum": drawSolidColor({ color: [0, 0, 0, accumulationEraseAlpha] }); drawParticles({ dataMap: dataMapIn, depositOnly: true }); break; case "raw": blit({ texture: dataMapOut }); break; } if (profiling) { mutable profiles = { blit: blit.stats, diffuse: diffuse.stats, updateDataMap: updateDataMap.stats, drawParticles: drawParticles.stats, drawMouse: drawMouse.stats }; } }); invalidation.then(() => { frame && frame.cancel(); }); return frame; }32:Tc30,updateDataMap = regl({ vert: ` precision highp float; varying vec2 uv; attribute vec2 xy; void main () { uv = 0.5 + 0.5 * xy; gl_Position = vec4(xy, 0, 1); } `, frag: ` precision highp float; uniform sampler2D trailMap; uniform sampler2D dataMap; uniform sampler2D rasterizedDataMap; uniform bool collisionDetection; uniform float time; uniform float rotationAngle; uniform float sensorAngle; uniform float sensorOffset; uniform vec2 resolution; varying vec2 uv; const float TAU = 6.283185307179586; vec2 rotate(vec2 v, float a) { float s = sin(a); float c = cos(a); mat2 m = mat2(c, -s, s, c); return m * v; } ${randVec2Fn} bool collisionDetect(vec2 newUv) { vec4 gridCell = texture2D(rasterizedDataMap, newUv); return gridCell.${collisionChannel} > 0.0; } float sense(vec2 trailUv, float currentHeading, float sensorOffset, float sensorAngle) { vec2 offset = rotate( vec2(sensorOffset * resolution.x, 0.0), currentHeading + sensorAngle ); vec2 sensorUv = fract(trailUv + offset); vec4 trail = texture2D(trailMap, sensorUv); return trail.${sensorChannel}; } void main() { vec4 particle = texture2D(dataMap, uv); vec2 trailUv = particle.xy; if (particle.a == 0.0) { discard; } float currentHeading = particle.z * TAU; float front = sense(trailUv, currentHeading, sensorOffset, 0.0); float frontLeft = sense(trailUv, currentHeading, sensorOffset, sensorAngle); float frontRight = sense(trailUv, currentHeading, sensorOffset, -sensorAngle); float newHeading = particle.z; if (front > frontLeft && front > frontRight) { // current direction is good, don't turn } else if (front < frontLeft && front < frontRight) { if (rand(vec2(particle.x * particle.y, time)) < 0.5) { newHeading += rotationAngle / TAU; } else { newHeading -= rotationAngle / TAU; } } else if (frontLeft < frontRight) { newHeading -= rotationAngle / TAU; } else if (frontRight < frontLeft) { newHeading += rotationAngle / TAU; } else { // no reason to turn } vec2 newLoc = fract(particle.xy + rotate( vec2(resolution.x * 1.0, 0.0), currentHeading)); if (collisionDetection && collisionDetect(newLoc)) { newHeading = rand(particle.xy * time); gl_FragColor = vec4(particle.xy, newHeading, 0.9); } else { gl_FragColor = vec4(newLoc, fract(newHeading), 1.0); } }`, attributes: { xy: [-4, -4, 4, -4, 0, 4] }, uniforms: { dataMap: regl.prop("dataMap"), trailMap: regl.prop("trailMap"), time: regl.prop("time"), collisionDetection: regl.prop("collisionDetection"), rasterizedDataMap: regl.prop("rasterizedDataMap"), rotationAngle: regl.prop("rotationAngle"), sensorAngle: regl.prop("sensorAngle"), sensorOffset: regl.prop("sensorOffset"), resolution: [1.0 / size, 1.0 / size] }, profile: profiling, depth: { enable: false }, blend: { enable: false }, count: 3 })33:T4ad,drawParticles = regl({ vert: ` precision highp float; attribute vec2 particleTextureIndex; uniform sampler2D dataMap; uniform bool depositOnly; varying vec4 fragColor; uniform float pointWidth; ${randVec2Fn} void main() { vec4 particle = texture2D(dataMap, particleTextureIndex); vec2 position = (particle.xy * 2.0) - 1.0; if (depositOnly) { if (particle.a == 1.0) { fragColor = ${colorfn}; } else { fragColor = vec4(0.0); } } else { fragColor = ${colorfn}; } gl_Position = vec4(position, 0.0, 1.0); gl_PointSize = pointWidth; } `, frag: ` precision highp float; varying vec4 fragColor; void main() { if (fragColor.a == 0.0) { discard; } gl_FragColor = fragColor; } `, attributes: { particleTextureIndex }, uniforms: { dataMap: regl.prop("dataMap"), depositOnly: (context, props) => !!props.depositOnly, pointWidth: 1.0 }, count: liveParticleCount, primitive: 'points', profile: profiling, blend: { enable: true, func: { src: 'src alpha', dst: 'one minus src alpha' } }, depth: { enable: false, mask: false } })34:[] 2e:{"id":"1cf1d8974ac02723","slug":"physarum-simulation","title":"Physarum simulation","thumbnail":"d438fa98f33b6dbab1f6963026a1266859bc98b8bb744025af6879d10504011d","access_level":"public","create_time":"$D2020-03-07T17:11:18.783Z","update_time":"$D2020-03-15T18:07:13.967Z","view_time":null,"first_public_time":"$D2020-03-20T02:11:07.013Z","fork":false,"stars":20,"starred":false,"owner":{"type":"team","id":"db92d1f1c1f5dc49","login":"corajr","name":"Cora Johnson-Roberson","avatar_url":"https://avatars-next.observableusercontent.com/3618c57223a0f75f9087748a5975f595b7ef0c4855feb068a49ce324e4abf4cd","tier":"starter_2024"},"version":1619,"publish_version":1619,"role":null,"authored":false,"authors":[{"type":"individual","id":"029f7c4991899c31","login":"corajr","name":"Cora Johnson-Roberson","avatar_url":"https://avatars-next.observableusercontent.com/3618c57223a0f75f9087748a5975f595b7ef0c4855feb068a49ce324e4abf4cd","tier":null}],"members":[{"type":"individual","id":"029f7c4991899c31","login":"corajr","name":"Cora Johnson-Roberson","avatar_url":"https://avatars-next.observableusercontent.com/3618c57223a0f75f9087748a5975f595b7ef0c4855feb068a49ce324e4abf4cd","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":7,"collection":null,"type":"notebook","body":{"title":"Physarum simulation","cells":[{"id":0,"value":"md`# Physarum simulation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"physarum = {\n const canvas = regl._gl.canvas;\n if (!this) {\n canvas.addEventListener(\"mousemove\", e => {\n mutable mouseXY = [\n (e.offsetX / canvas.clientWidth) * 2 - 1,\n ((canvas.clientHeight - e.offsetY) / canvas.clientHeight) * 2 - 1\n ];\n });\n canvas.addEventListener(\"mouseleave\", e => {\n mutable mouseXY = [];\n });\n const { touchStart, touchMove, touchCancel, touchEnd } = touchHandlers(\n canvas\n );\n canvas.addEventListener(\"touchstart\", touchStart);\n canvas.addEventListener(\"touchmove\", touchMove);\n canvas.addEventListener(\"touchcancel\", touchCancel);\n canvas.addEventListener(\"touchend\", touchEnd);\n }\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":428,"value":"viewof reset = button({\n value: \"Reset\",\n description: \"Restart simulation\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":171,"value":"viewof decay = slider({\n title: \"Decay\",\n min: 0,\n max: 1,\n value: 0.1,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":364,"value":"viewof sensorOffset = slider({\n title: \"Sensor Offset\",\n min: 1,\n max: 20,\n value: 9,\n step: 1,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":381,"value":"viewof sensorAngle = slider({\n title: \"Sensor Angle\",\n min: 1,\n max: 90,\n value: 22.5,\n step: 0.5\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":386,"value":"viewof rotationAngle = slider({\n title: \"Rotation Angle\",\n min: 1,\n max: 90,\n value: 45,\n step: 0.5\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":540,"value":"viewof textureToShow = select({\n options: [\n { value: \"trail_in\", label: \"Trail Map\" },\n { value: \"trail\", label: \"Trail Map (diffused)\" },\n { value: \"data\", label: \"Data Map\" },\n { value: \"data_accum\", label: \"Data Map (accumulating)\" },\n { value: \"raw\", label: \"Data Map (Raw)\" }\n ],\n value: \"trail_in\",\n description: \"Which visualization to render\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1502,"value":"viewof sensorChannel = select({\n options: [\n { value: \"r\", label: \"Red\" },\n { value: \"g\", label: \"Green\" },\n { value: \"b\", label: \"Blue\" }\n ],\n value: \"b\",\n description: \"Which color channel is used for signalling\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":978,"value":"viewof colorData = select({\n options: [\n {\n value: \"particle_index\",\n label: 'Particle index'\n },\n {\n value: \"heading\",\n label: 'Heading'\n },\n { value: \"white\", label: 'White' },\n { value: \"data\", label: 'Data only' }\n ],\n description: \"Color function for drawing particles\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1397,"value":"viewof mousePointSize = slider({\n min: 1.0,\n max: 64.0,\n value: 16.0,\n step: 1.0,\n description: \"Point size for mouse/touch\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1451,"value":"viewof collisionDetection = checkbox({\n options: [\n {\n value: \"collision\",\n label: 'Collision detection (but see caveat in \"Notes\")'\n }\n ],\n value: \"collision\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1577,"value":"viewof accumulationEraseAlpha = slider({\n min: 0.0,\n max: 0.1,\n precision: 3,\n value: 0.001,\n description: \"Alpha (data map accumulation only)\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":66,"value":"md`## Initial Conditions\n\nNote: these options will reset the simulation.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1147,"value":"viewof logSize = slider({\n min: 5,\n max: 10,\n value: 8,\n step: 1,\n title: tex`\\log_2 size`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":54,"value":"viewof populationDensity = slider({\n title: \"Population density\",\n min: 0.01,\n max: 1.0,\n value: 0.15\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":501,"value":"viewof manualSeed = input({ title: \"Manual seed (default: current time)\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1443,"value":"md`## Notes\n\nThis simulation roughly implements the model of Jeff Jones' 2010 paper, \"[Characteristics of pattern formation and evolution in approximations of physarum transport networks](https://uwe-repository.worktribe.com/output/980579).\" Like many others, I learned of this model via Sage Jenson's beautiful work (see their excellent [explanation of the dynamics](https://sagejenson.com/physarum) for details).\n\nThe \"collision detection\" in this implementation is kind of a cheat-- at each time step, a particle checks to see whether it can move forward based on whether there was an obstruction at the _previous_ time step. (Of course, the obstructing particle may well have moved by the time we check, and multiple particles may all move into a single grid cell that was previously empty, violating the \"one particle per cell\" rule. However, it seems to work well enough in practice.)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":602,"value":"md`## Code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":581,"value":"md`### Initial Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":466,"value":"seed = {\n reset;\n return manualSeed || new Date().toISOString();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":410,"value":"initialConditions = ({\n populationDensity,\n seed,\n size\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":106,"value":"size = 1 << logSize","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1193,"value":"md`### Interaction`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1281,"value":"updateMouseXY = (clientWidth, clientHeight, touches) => {\n const newMouseXY = [];\n Object.entries(touches).map(([identifier, { pageX, pageY }]) => {\n newMouseXY.push(\n (pageX / clientWidth) * 2 - 1,\n ((clientHeight - pageY) / clientHeight) * 2 - 1\n );\n });\n mutable mouseXY = newMouseXY;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1308,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1195,"value":"mutable mouseXY = []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":587,"value":"md`### Animation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":885,"value":"countTicks = {\n reset;\n let tick = 0;\n return () => tick++;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1599,"value":"viewof profilingActive = checkbox({\n options: [{ value: \"profiling\", label: \"Profiling\" }]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1418,"value":"avgGpuTimes = Object.entries(profiles).reduce(\n (newObj, [command, { gpuTime, count }]) => {\n newObj[command] = gpuTime / count;\n return newObj;\n },\n {}\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1426,"value":"avgCpuTimes = Object.entries(profiles).reduce(\n (newObj, [command, { cpuTime, count }]) => {\n newObj[command] = cpuTime / count;\n return newObj;\n },\n {}\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1411,"value":"mutable profiles = ({})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":511,"value":"onReset = {\n initialConditions, reset;\n for (let i = 0; i < dataMapBuffers.length; i++) {\n trailMapBuffers[i].use(() => {\n regl.clear({ color: [0, 0, 0, 0] });\n });\n dataMapBuffers[i].use(() => {\n blit({ texture: initialDataMapTexture });\n });\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":584,"value":"md`### Textures and Framebuffers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":27,"value":"initialDataMapFromSeed = (seed, clampHeadings = false) => {\n const rand = makeRandomGenerator(seed);\n const initialTextureData = new Float32Array(size * size * 4);\n for (let i = 0; i < liveParticleCount; i++) {\n const offset = i * 4;\n initialTextureData[offset] = rand.random();\n initialTextureData[offset + 1] = rand.random();\n const headingRand = rand.random();\n initialTextureData[offset + 2] = clampHeadings\n ? Math.floor(headingRand * 4.0) / 4.0\n : headingRand;\n initialTextureData[offset + 3] = 1.0;\n }\n\n return initialTextureData;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":128,"value":"initialDataMapTexture = {\n liveParticleCount;\n const texture = regl.texture({\n shape: [size, size],\n wrap: 'repeat',\n data: initialDataMapFromSeed(seed)\n });\n invalidation.then(() => texture.destroy());\n return texture;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":569,"value":"rasterizedDataMapTexture = {\n const rasterizedDataMapTexture = regl.texture({\n shape: [size, size],\n wrapS: 'repeat',\n wrapT: 'repeat'\n });\n invalidation.then(() => rasterizedDataMapTexture.destroy());\n return rasterizedDataMapTexture;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":528,"value":"rasterizedDataMap = {\n const fbo = regl.framebuffer({\n color: rasterizedDataMapTexture,\n depth: false,\n stencil: false\n });\n invalidation.then(() => fbo.destroy());\n return fbo;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":210,"value":"dataMapBuffers = {\n const fbos = [0, 1].map(() =>\n regl.framebuffer({\n shape: [size, size],\n colorType: 'float',\n wrap: 'repeat',\n depth: false,\n stencil: false\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":24,"value":"trailMapBuffers = {\n const fbos = [0, 1].map(() =>\n regl.framebuffer({\n shape: [size, size],\n wrap: 'repeat',\n depth: false,\n stencil: false\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":654,"value":"liveParticleCount = ~~Math.floor(size * size * populationDensity)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":774,"value":"max_texture_xy = {\n let max_x = -1;\n let max_y = -1;\n for (let i = 0; i < liveParticleCount * 2; i += 2) {\n max_x = Math.max(particleTextureIndex[i], max_x);\n max_y = Math.max(particleTextureIndex[i + 1], max_y);\n }\n return { max_x, max_y };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":251,"value":"particleTextureIndex = {\n const particleTextureIndex = [];\n for (let i = 0; i < size; i++) {\n for (let j = 0; j < size; j++) {\n if (j * size + i < liveParticleCount) {\n particleTextureIndex.push(i / size, j / size);\n }\n }\n }\n return particleTextureIndex;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":579,"value":"md`### Shaders`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1173,"value":"collisionChannel = sensorChannel","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1548,"value":"colorfn = {\n switch (colorData) {\n case \"particle_index\":\n return genColorFn(\n \"particleTextureIndex.x\",\n // \"particleTextureIndex.y\"\n `particleTextureIndex.y * ${(1.0 / max_texture_xy.max_y).toFixed(2)}`\n );\n case \"heading\":\n return genColorFn(\n \"particle.z < 0.5 ? 1.0 - particle.z : 0.0\",\n \"particle.z >= 0.5 ? particle.z : 0.0\"\n );\n case \"white\":\n return genColorFn(\"1.0\", \"1.0\");\n case \"data\":\n return genColorFn(\"0.0\", \"0.0\");\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1402,"value":"profiling = profilingActive === \"profiling\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":224,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":250,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1188,"value":"drawMouse = regl({\n vert: `\n precision highp float;\n\tattribute vec2 mouseXY;\n uniform float pointSize;\n\n void main() {\n gl_Position = vec4(mouseXY, 0.0, 1.0);\n\t\tgl_PointSize = pointSize;\n\t}\n\t`,\n frag: `\n precision highp float;\n uniform vec4 color;\n void main() {\n gl_FragColor = color;\n }\n `,\n attributes: {\n mouseXY: regl.prop(\"mouseXY\")\n },\n uniforms: {\n pointSize: regl.prop(\"pointSize\"),\n color: regl.prop(\"color\")\n },\n profile: profiling,\n count: (context, props) => props.mouseXY.length / 2,\n primitive: 'points',\n depth: {\n enable: false,\n mask: false\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":99,"value":"diffuse = regl({\n vert: `\n precision highp float;\n varying vec2 uv;\n attribute vec2 xy;\n\n void main () {\n uv = 0.5 + 0.5 * xy;\n gl_Position = vec4(xy, 0, 1);\n }\n `,\n frag: `\n precision highp float;\n uniform sampler2D trailMap;\n uniform vec2 resolution;\n uniform float decay;\n varying vec2 uv;\n\n void main() {\n vec3 color = vec3(0.0);\n \n for (int i = -1; i <= 1; i++) {\n for (int j = -1; j <= 1; j++) {\n color += texture2D(\n trailMap,\n fract(uv + vec2(float(i) * resolution.x, float(j) * resolution.y))\n ).rgb;\n }\n }\n gl_FragColor = vec4(color * (1.0 / 9.0) * (1.0 - decay), 1.0);\n }`,\n attributes: {\n xy: [-4, -4, 4, -4, 0, 4]\n },\n uniforms: {\n trailMap: regl.prop(\"trailMap\"),\n resolution: [1.0 / size, 1.0 / size],\n decay: regl.prop(\"decay\")\n },\n profile: profiling,\n depth: { enable: false },\n count: 3\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13,"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 frag: `\n precision highp float;\n uniform sampler2D texture;\n uniform float alpha;\n varying vec2 uv;\n\n void main() {\n vec4 color = texture2D(texture, uv);\n gl_FragColor = color * vec4(1.0, 1.0, 1.0, alpha);\n }`,\n attributes: {\n xy: [-4, -4, 4, -4, 0, 4]\n },\n uniforms: {\n texture: regl.prop(\"texture\"),\n alpha: (context, props) => (props.alpha != null ? props.alpha : 1.0)\n },\n profile: profiling,\n blend: {\n enable: true,\n func: {\n src: 'src alpha',\n dst: 'one minus src alpha'\n }\n },\n\n depth: { enable: false },\n count: 3\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1564,"value":"drawSolidColor = regl({\n vert: `\n precision highp float;\n attribute vec2 xy;\n void main () {\n gl_Position = vec4(xy, 0, 1);\n }\n `,\n frag: `\n precision highp float;\n uniform vec4 color;\n\n void main() {\n gl_FragColor = color;\n }`,\n attributes: {\n xy: [-4, -4, 4, -4, 0, 4]\n },\n uniforms: {\n color: regl.prop(\"color\")\n },\n profile: profiling,\n blend: {\n enable: true,\n func: {\n src: 'src alpha',\n dst: 'one minus src alpha'\n }\n },\n depth: { enable: false },\n count: 3\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1116,"value":"randVec2Fn = `\n\n// not very well distributed pseudorandom func\n\nfloat rand(vec2 st) {\n return fract(sin(dot(st.xy,\n vec2(12.9898,78.233)))*\n 43758.5453123);\n }\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":594,"value":"md`### Helper Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":391,"value":"radians = degrees => degrees * (Math.PI / 180.0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1528,"value":"genColorFn = (x, y) => {\n switch (sensorChannel) {\n case \"r\":\n return `vec4(1.0, ${x}, ${y}, 1.0)`;\n case \"g\":\n return `vec4(${x}, 1.0, ${y}, 1.0)`;\n case \"b\":\n return `vec4(${x}, ${y}, 1.0, 1.0)`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":592,"value":"md`### Dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"regl = {\n var canvas = document.createElement('canvas');\n var pixelRatio = Math.min(devicePixelRatio, 1);\n var w = Math.min(640, width);\n var h = w;\n canvas.style.width = `${w}px`;\n canvas.style.height = `${h}px`;\n canvas.width = w * pixelRatio;\n canvas.height = h * pixelRatio;\n let regl = createREGL({\n extensions: ['OES_texture_half_float', 'OES_texture_float'],\n optionalExtensions: ['EXT_disjoint_timer_query'],\n canvas,\n pixelRatio: pixelRatio,\n attributes: {\n antialias: false,\n preserveDrawingBuffer: true\n }\n });\n return regl;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":59,"value":"import { button, checkbox, input, select, slider } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":452,"value":"import { makeRandomGenerator } from \"@forresto/random-seed\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2,"value":"createREGL = require('regl')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 2f:"$2e:body"