2a:null 2b:["$","title",null,{"children":"Slime mold selfie | 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:T997,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]; if (videoTexture) { if (videoTexture.width !== video.videoWidth) { videoTexture.resize(video.videoWidth, video.videoHeight); } videoTexture.subimage(video); } 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 (videoTexture) { sobel({ u_image: videoTexture }); } 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, sobel: sobel.stats }; } if ( tick % gifCaptureEveryNFrames == 0 && typeof gifCallback === "function" ) { gifCallback(); } }); 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:T590,sobel = regl({ // Shaders copied from https://observablehq.com/@mbostock/webgl-sobel vert: ` precision highp float; attribute vec2 a_vertex; void main(void) { gl_Position = vec4(a_vertex, 0.0, 1.0); } `, frag: ` precision highp float; uniform sampler2D u_image; uniform float u_size; void main() { float x = gl_FragCoord.x / u_size; float y = 1.0 - gl_FragCoord.y / u_size; float px = 1.0 / u_size; vec3 a0 = texture2D(u_image, vec2(x - px, y + px)).xyz; vec3 a1 = texture2D(u_image, vec2(x, y + px)).xyz; vec3 a2 = texture2D(u_image, vec2(x + px, y + px)).xyz; vec3 a3 = texture2D(u_image, vec2(x - px, y)).xyz; vec3 a5 = texture2D(u_image, vec2(x + px, y)).xyz; vec3 a6 = texture2D(u_image, vec2(x - px, y - px)).xyz; vec3 a7 = texture2D(u_image, vec2(x, y - px)).xyz; vec3 a8 = texture2D(u_image, vec2(x + px, y - px)).xyz; vec3 gx = -a0 + a2 - 2.0 * a3 + 2.0 * a5 - a6 + a8; vec3 gy = -a0 - 2.0 * a1 - a2 + a6 + 2.0 * a7 + a8; vec3 g = sqrt(gx * gx + gy * gy); float a = length(g); gl_FragColor = vec4(g, a * a); } `, attributes: { a_vertex: Float32Array.of(-1, -1, +1, -1, +1, +1, -1, +1) }, uniforms: { u_image: regl.prop("u_image"), u_size: size }, blend: { enable: true, func: { src: "src alpha", dst: "one minus src alpha" } }, profile: profiling, primitive: 'triangle fan', depth: { enable: false }, count: 4 })35:[] 2e:{"id":"c64815bf7bf78993","slug":"slime-mold-selfie","title":"Slime mold selfie","thumbnail":"7e13a58b6e112005406a557e3eb63f7f73e67334115b4bfadadd5ed955e578ac","access_level":"public","create_time":"$D2020-03-20T22:43:07.637Z","update_time":"$D2025-04-02T03:07:46.225Z","view_time":null,"first_public_time":"$D2020-03-23T01:12:51.037Z","has_unpublished_edits":null,"fork":{"id":"1cf1d8974ac02723","slug":"physarum-simulation","title":"Physarum simulation","owner":{"id":"db92d1f1c1f5dc49","login":"corajr","name":"Cora Johnson-Roberson"}},"stars":0,"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":1879,"publish_version":1879,"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,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Slime mold selfie","cells":[{"id":0,"value":"md`# Slime mold selfie`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$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","output":"$undefined","database":"$undefined"},{"id":1736,"value":"snapshotButton = {\n const b = button({\n value: \"Take snapshot\"\n });\n b.onclick = () => {\n const blob = new Promise(resolve => physarum.toBlob(resolve));\n blob\n .then(data => {\n const link = html``;\n const url = URL.createObjectURL(data);\n link.href = url;\n link.click();\n return url;\n })\n .then(url => {\n URL.revokeObjectURL(url);\n });\n };\n return b;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1793,"value":"// DOM.download(() => startGif(), `physarum-${new Date().toJSON()}`, \"Save GIF\")\ngifButton = {\n const b = button({\n value: \"Save GIF\"\n });\n b.onclick = () => {\n const blob = startGif();\n blob\n .then(data => {\n const link = html``;\n const url = URL.createObjectURL(data);\n link.href = url;\n link.click();\n return url;\n })\n .then(url => {\n URL.revokeObjectURL(url);\n });\n };\n return b;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1755,"value":"viewof deviceId = {\n const labels = await navigator.mediaDevices\n .enumerateDevices()\n .then(devices => {\n return devices\n .filter(device => device.kind === 'videoinput')\n .map(device => ({\n value: device.deviceId,\n label: device.label\n }));\n });\n return select({\n options: labels,\n description: \"Video input (if nothing appears, you may need to refresh.)\"\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$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","output":"$undefined","database":"$undefined"},{"id":364,"value":"viewof sensorOffset = slider({\n title: \"Sensor Offset\",\n min: 1,\n max: 20,\n value: 5,\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$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","output":"$undefined","database":"$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","output":"$undefined","database":"$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","output":"$undefined","database":"$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: \"data\",\n description: \"Which visualization to render\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$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: \"r\",\n description: \"Which color channel is used for signalling\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$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","output":"$undefined","database":"$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","output":"$undefined","database":"$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: null\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$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","output":"$undefined","database":"$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","output":"$undefined","database":"$undefined"},{"id":1147,"value":"viewof logSize = slider({\n min: 5,\n max: 10,\n value: 9,\n step: 1,\n title: tex`\\log_2 size`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"viewof populationDensity = slider({\n title: \"Population density\",\n min: 0.01,\n max: 1.0,\n value: 0.1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":501,"value":"viewof manualSeed = input({ title: \"Manual seed (default: current time)\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$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\nIn this variation, defaults are set to produce a clearer image (sensor offsets are reduced and collision detection is off).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":602,"value":"md`## Code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":581,"value":"md`### Initial Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":466,"value":"seed = {\n reset;\n return manualSeed || new Date().toISOString();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":410,"value":"initialConditions = ({\n populationDensity,\n seed,\n size\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"size = 1 << logSize","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1622,"value":"md`### Video`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1624,"value":"video = {\n const video = document\n .createElement(\"div\")\n .appendChild(html`