31:T473,configs = [ { sensor_angle: Math.PI / 4, sensor_distance: 2, rotation_angle: Math.PI / 4, step_distance: 1, decay_rate: 0.2, deposit_amount: 0.1, blur_strength: 1, }, { sensor_angle: Math.PI / 4, sensor_distance: 2, rotation_angle: Math.PI / 4, step_distance: 4, decay_rate: 0.2, deposit_amount: 0.2, blur_strength: 1, }, { sensor_angle: Math.PI / 12, sensor_distance: 8, rotation_angle: Math.PI / 12, step_distance: 1, decay_rate: 0.5, deposit_amount: 0.3, blur_strength: 1, }, { sensor_angle: Math.PI / 8, sensor_distance: 2, rotation_angle: Math.PI / 8, step_distance: 1, decay_rate: 0.2, deposit_amount: 0.1, blur_strength: 1, }, { sensor_angle: Math.PI / 4, sensor_distance: 2, rotation_angle: Math.PI / 4, step_distance: 4, decay_rate: 0.2, deposit_amount: 0.1, blur_strength: 1, }, { sensor_angle: Math.PI / 8, sensor_distance: 2, rotation_angle: Math.PI / 8, step_distance: 2, decay_rate: 0.2, deposit_amount: 0.1, blur_strength: 1, }, ]32:T1e1a,renderable = { const AGENT_COUNT = 1_000_000 const { device, context } = await gpu.init(S, S) invalidation.then(() => { interaction.draw() device?.destroy() }) const DISPATCH_SIZE = [Math.ceil(S / 16), Math.ceil(S / 16), 1] const externalInputSize = { width: interaction.context.canvas.width, height: interaction.context.canvas.height } const externalInput = device.createTexture({ size: externalInputSize, format: 'rgba8unorm', usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT }) device.queue.copyExternalImageToTexture( { source: interaction.context.canvas }, { texture: externalInput }, externalInputSize ) const texInput = gpu.canvasTexture(device, sample.canvas, { usage: gpu.Usage.StorageTexture }) const texOutput = device.createTexture({ size: [S, S], format: 'rgba8unorm', usage: GPUTextureUsage.STORAGE_BINDING | GPUTextureUsage.COPY_SRC | GPUTextureUsage.TEXTURE_BINDING }) // Uniforms const uniforms = new Float32Array([0, ...Object.values(config)]); const uniformBuffer = gpu.uniformBuffer(device, uniforms); // Agents const agent = new Float32Array( util.flatArr(AGENT_COUNT, i => { const species = [0, 0, 0, 0] species[util.randi(species.length)] = 1 return [ // S / 2 + 20 * Math.cos(i / AGENT_COUNT * util.TWO_PI), // S / 2 + 20 * Math.sin(i / AGENT_COUNT * util.TWO_PI), // 0, // padding // i / AGENT_COUNT * util.TWO_PI, i / AGENT_COUNT * S, S / 2, 0, // padding util.rand(util.TWO_PI), ...species, ] }), ); const agentBufferPing = gpu.storageBuffer(device, agent); const agentBufferPong = gpu.storageBuffer(device, agent); // Trails const trailCountsBuffer = gpu.storageBuffer(device, new Uint32Array(S * S)); const trailTexturePing = texInput; const trailTexturePong = texOutput; const bindGroupLayout = device.createBindGroupLayout({ label: 'everything else bind group layout', entries: [ { binding: 0, visibility: GPUShaderStage.FRAGMENT | GPUShaderStage.COMPUTE, buffer: {}, }, // agents in { binding: 1, visibility: GPUShaderStage.VERTEX | GPUShaderStage.COMPUTE, buffer: { type: 'read-only-storage' }, }, // agents out { binding: 2, visibility: GPUShaderStage.COMPUTE, buffer: { type: 'storage' }, }, // trail counts { binding: 3, visibility: GPUShaderStage.COMPUTE, buffer: { type: 'storage' }, }, // trail texture IN { binding: 4, visibility: GPUShaderStage.VERTEX | GPUShaderStage.COMPUTE, texture: {}, }, // trail texture OUT (blur + decay + counts) { binding: 5, visibility: GPUShaderStage.COMPUTE, storageTexture: { format: 'rgba8unorm' }, }, { binding: 6, visibility: GPUShaderStage.COMPUTE, texture: {}, }, ], }); const agentBindGroupPing = device.createBindGroup({ label: 'agent bind group ping', layout: bindGroupLayout, entries: [ { binding: 0, resource: { buffer: uniformBuffer.buffer } }, { binding: 1, resource: { buffer: agentBufferPing.buffer } }, { binding: 2, resource: { buffer: agentBufferPong.buffer } }, { binding: 3, resource: { buffer: trailCountsBuffer.buffer } }, { binding: 4, resource: trailTexturePing.createView() }, { binding: 5, resource: trailTexturePong.createView() }, { binding: 6, resource: externalInput.createView() }, ], }); const agentBindGroupPong = device.createBindGroup({ label: 'agent bind group pong', layout: bindGroupLayout, entries: [ { binding: 0, resource: { buffer: uniformBuffer.buffer } }, { binding: 1, resource: { buffer: agentBufferPong.buffer } }, { binding: 2, resource: { buffer: agentBufferPing.buffer } }, { binding: 3, resource: { buffer: trailCountsBuffer.buffer } }, { binding: 4, resource: trailTexturePong.createView() }, { binding: 5, resource: trailTexturePing.createView() }, { binding: 6, resource: externalInput.createView() }, ], }); const pipelineLayout = device.createPipelineLayout({ label: 'pipeline layout', bindGroupLayouts: [bindGroupLayout], }); const agentPipeline = device.createComputePipeline({ label: 'agent pipeline', layout: pipelineLayout, compute: { module: device.createShaderModule({ code: shaders.agent }), entryPoint: 'cs', }, }); const trailCombinePipeline = device.createComputePipeline({ label: 'trail combine pipeline', layout: pipelineLayout, compute: { module: device.createShaderModule({ code: shaders.trailCombine }), entryPoint: 'cs', }, }); const debug = new TextureRenderer(device, texOutput, { // colorScheme: gpu.canvasTexture(device, colorScheme), style: { background: '#000' }, }) // event handlers { const boxSize = 50 let bbox let pressing = false const start = e => { bbox = debug.context.canvas.getBoundingClientRect() pressing = true interaction.context.globalAlpha = 0.2 } const end = e => { pressing = false interaction.context.globalAlpha = 1.0 } const drag = e => { if (!pressing) return; const x = e.clientX - bbox.left - window.scrollX const y = e.clientY - bbox.top - window.scrollY interaction.context.beginPath() interaction.context.arc(x, y, util.randi(20) + 5, 0, util.TWO_PI) interaction.context.fill() updateExternalTexture() } // observable-specific cleanup (remove event listeners): debug.canvas.removeEventListener('pointerdown', start) debug.canvas.removeEventListener('pointerup', end) debug.canvas.removeEventListener('pointermove', drag) // end debug.canvas.addEventListener('pointerdown', start) debug.canvas.addEventListener('pointerup', end) debug.canvas.addEventListener('pointermove', drag) } function updateExternalTexture() { device.queue.copyExternalImageToTexture( { source: interaction.context.canvas, flipY: true }, { texture: externalInput }, { width: S, height: S } ); } updateExternalTexture() function render() { // TIME // let p = performance.now() // let now = p - Math.floor(p); const now = Date.now(); uniforms.set([now], 0); uniformBuffer.write(); const encoder = device.createCommandEncoder(); const agentPass = encoder.beginComputePass(); agentPass.setPipeline(agentPipeline); agentPass.setBindGroup(0, agentBindGroupPing); agentPass.dispatchWorkgroups(Math.ceil(AGENT_COUNT / 64), 1, 1); agentPass.setBindGroup(0, agentBindGroupPong); agentPass.dispatchWorkgroups(Math.ceil(AGENT_COUNT / 64), 1, 1); agentPass.end(); const trailCombinePass = encoder.beginComputePass(); trailCombinePass.setPipeline(trailCombinePipeline); // for (let i = 0; i < 2; i++) { trailCombinePass.setBindGroup(0, agentBindGroupPing); trailCombinePass.dispatchWorkgroups(...DISPATCH_SIZE); trailCombinePass.setBindGroup(0, agentBindGroupPong); trailCombinePass.dispatchWorkgroups(...DISPATCH_SIZE); // } trailCombinePass.end(); debug.render() device.queue.submit([encoder.finish()]); } render(); return { render, display: debug.canvas, updateExternalTexture } }33:T1bad,shaders = ({ agent: ` const PI: f32 = 3.141592653589793; const TWO_PI: f32 = 6.283185307179586; struct Uniforms { time: f32, sensor_angle: f32, sensor_distance: f32, rotation_angle: f32, step_distance: f32, decay_rate: f32, deposit_amount: f32, blur_strength: f32, } struct Agent { pos: vec2f, heading: f32, _pad: f32, species_mask: vec4f, } @group(0) @binding(0) var uniforms: Uniforms; @group(0) @binding(1) var agentsIn: array; @group(0) @binding(2) var agentsOut: array; @group(0) @binding(3) var trailCounts: array>; @group(0) @binding(4) var trails_in: texture_2d; @group(0) @binding(6) var interaction_texture: texture_2d; fn grid_index_from_agent_pos(pos: vec2u) -> u32 { return (pos.x % ${S}) + (pos.y % ${S}) * ${S}; } // On generating random numbers, with help of y= [(a+x)sin(bx)] mod 1", W.J.J. Rey, // 22nd European Meeting of Statisticians 1998 fn rand11(n: f32) -> f32 { return fract(sin(n) * 43758.5453123); } fn rand22(n: vec2f) -> f32 { return fract(sin(dot(n, vec2f(12.9898, 4.1414))) * 43758.5453); } fn hash11(_p: f32) -> f32 { var p = fract(_p * .1031); p *= p + 33.33; p *= p + p; return fract(p); } fn hash12(p: vec2f) -> f32 { var p3 = fract(vec3f(p.xyx) * .1031); p3 += dot(p3, p3.yzx + 33.33); return fract((p3.x + p3.y) * p3.z); } fn hash13(_p3: vec3f) -> f32 { var p3 = fract(_p3 * .1031); p3 += dot(p3, p3.zyx + 31.32); return fract((p3.x + p3.y) * p3.z); } fn shft(x: f32, size: f32) -> f32 { return x + select(0.0, size, x < 0) + select(0.0, -size, x >= size); } fn next_agent_state(agent: Agent, texSize: vec2u) -> Agent { let p = agent.pos; let a = agent.heading; let sa = uniforms.sensor_angle; let sd = uniforms.sensor_distance; let ra = uniforms.rotation_angle; let step_dist = uniforms.step_distance; let xc = p.x + cos(a) * sd; let yc = p.y + sin(a) * sd; let xl = p.x + cos(a - sa) * sd; let yl = p.y + sin(a - sa) * sd; let xr = p.x + cos(a + sa) * sd; let yr = p.y + sin(a + sa) * sd; // good enough var C = textureLoad(trails_in, vec2u(u32(xc % ${S}), u32(yc % ${S})), 0).r; var L = textureLoad(trails_in, vec2u(u32(xl % ${S}), u32(yl % ${S})), 0).r; var R = textureLoad(trails_in, vec2u(u32(xr % ${S}), u32(yr % ${S})), 0).r; C += textureLoad(interaction_texture, vec2u(u32(xc % ${S}), u32(yc % ${S})), 0).r; L += textureLoad(interaction_texture, vec2u(u32(xl % ${S}), u32(yl % ${S})), 0).r; R += textureLoad(interaction_texture, vec2u(u32(xr % ${S}), u32(yr % ${S})), 0).r; // note // behaviors 1 & 4 actually look cooler when p was incorrectly passed to the rand fn as an int with no fract() var d = 0.0; if (C > L && C > R) { d = 0.0; } else if (C < L && C < R) { d = select(-1.0, 1.0, hash13(vec3f(p.x / ${S}, p.y / ${S}, uniforms.time)) > 0.5); } else if (L < R) { d = 1.0; } else if (R < L) { d = -1.0; } var rnd = hash13(vec3f(p.x / ${S}, p.y / ${S}, uniforms.time)) * (0.01 * TWO_PI) * select(-1.0, 1.0, hash11(uniforms.time) > 0.5); let da = ra * d; var next_angle = shft(a + da + rnd, TWO_PI); var next_pos = vec2f( p.x + cos(next_angle) * step_dist, p.y + sin(next_angle) * step_dist, ); // TODO optimize if (next_pos.x < 0.0) { next_pos.x = 0.0; next_angle += PI; } else if (next_pos.y < 0.0) { next_pos.y = 0.0; next_angle += PI; } else if (next_pos.x >= f32(texSize.x)) { next_pos.x = f32(texSize.x - 1); next_angle += PI; } else if (next_pos.y >= f32(texSize.y)) { next_pos.y = f32(texSize.y - 1); next_angle += PI; } return Agent(next_pos, next_angle % TWO_PI, 0, vec4f(0)); } @compute @workgroup_size(64, 1, 1) fn cs( @builtin(global_invocation_id) gid: vec3u, @builtin(local_invocation_id) lid: vec3u, ) { let agent_index = gid.x; if (agent_index > arrayLength(&agentsIn)) { return; } let agent = agentsIn[agent_index]; let texSize = textureDimensions(trails_in); let next_agent = next_agent_state(agent, texSize); agentsOut[agent_index].pos = next_agent.pos; agentsOut[agent_index].heading = next_agent.heading; // add to trail counts let trail_index = grid_index_from_agent_pos(vec2u(u32(next_agent.pos.x), u32(next_agent.pos.y))); atomicAdd(&trailCounts[trail_index], 1); } `, trailCombine: ` struct Uniforms { time: f32, sensor_angle: f32, sensor_distance: f32, rotation_angle: f32, step_distance: f32, decay_rate: f32, deposit_amount: f32, blur_strength: f32, } @group(0) @binding(0) var uniforms: Uniforms; @group(0) @binding(3) var trailCounts: array>; @group(0) @binding(4) var inputTexture: texture_2d; @group(0) @binding(5) var outputTexture: texture_storage_2d; @group(0) @binding(6) var externalTexture: texture_2d; const tileSize: vec2u = vec2u(16, 16); const blurRadius: i32 = 1; const count: f32 = pow(f32(blurRadius) * 2 + 1, 2); @compute @workgroup_size(16, 16, 1) fn cs(@builtin(global_invocation_id) global_id: vec3u) { let texSize: vec2u = textureDimensions(inputTexture).xy; let tileNW: vec2u = (global_id.xy / tileSize) * tileSize; let localPos: vec2u = global_id.xy % tileSize; let texPos: vec2u = tileNW + localPos; let index = texPos.x + texPos.y * texSize.x; if (texPos.x < texSize.x && texPos.y < texSize.y) { var colorSum: vec4f = vec4f(0.0, 0.0, 0.0, 0.0); let externalColor = textureLoad(externalTexture, texPos, 0); if (externalColor.a > 0.0) { colorSum = vec4f(0.5); } for (var y = -blurRadius; y <= blurRadius; y++) { for (var x = -blurRadius; x <= blurRadius; x++) { let samplePos = vec2i(texPos) + vec2i(x, y); if ( samplePos.x >= 0 && samplePos.x < i32(texSize.x) && samplePos.y >= 0 && samplePos.y < i32(texSize.y) ) { colorSum = colorSum + textureLoad(inputTexture, samplePos, 0); } } } let blurred: vec4f = colorSum / count; let count = f32(atomicLoad(&trailCounts[index])) * uniforms.deposit_amount; var color = blurred - vec4f(uniforms.decay_rate) + count; color = clamp(color, vec4f(0), vec4f(1)); textureStore(outputTexture, texPos, color); } // reset atomicStore(&trailCounts[index], 0); } ` })34:Tb57,class TextureRenderer { device = null texture = null context = null sampler = null pipeline = null bindGroup = null constructor( device /* : GPUDevice */, texture /* : GPUTexture */, { colorScheme /* ?: GPUTexture */, binding, format = null, alphaMode = 'premultiplied', style = {}, } = {} ) { format ??= gpu.format() this.device = device this.context = gpu.context(texture.width, texture.height); this.context.configure({ device, format, alphaMode }) for (const key in style) { this.context.canvas.style[key] = style[key] } const module = device.createShaderModule({ code: TextureRenderer.Shader }) this.sampler = gpu.sampler(device, gpu.LinearSampler) this.pipeline = device.createRenderPipeline({ layout: 'auto', vertex: { module, entryPoint: 'vs', }, fragment: { module, entryPoint: 'fs', targets: [{ format }], }, }) this.bindGroup = device.createBindGroup({ layout: this.pipeline.getBindGroupLayout(0), entries: [ { binding: 0, resource: this.sampler }, { binding: 1, resource: texture.createView() }, ...(colorScheme ? [{ binding: 2, resource: colorScheme.createView() }] : []) ], }) } get canvas() { return this.context.canvas } render() { const encoder = this.device.createCommandEncoder(); const pass = encoder.beginRenderPass({ colorAttachments: [ { view: this.context.getCurrentTexture().createView(), clearValue: [0, 0, 0, 1], loadOp: 'clear', storeOp: 'store', }, ], }); pass.setPipeline(this.pipeline); pass.setBindGroup(0, this.bindGroup); pass.draw(6); pass.end(); this.device.queue.submit([encoder.finish()]); } static Shader = ` struct VertexOut { @builtin(position) position: vec4f, @location(0) texcoord: vec2f, } @group(0) @binding(0) var tex_sampler: sampler; @group(0) @binding(1) var tex: texture_2d; // @group(0) @binding(2) var colorScheme: texture_2d; ${shaderFragments.hsl2rgb} @vertex fn vs( @builtin(vertex_index) vertexIndex : u32 ) -> VertexOut { let quad = array( vec2f(0.0, 0.0), vec2f(1.0, 0.0), vec2f(0.0, 1.0), vec2f(0.0, 1.0), vec2f(1.0, 0.0), vec2f(1.0, 1.0), ); let texcoord = quad[vertexIndex]; return VertexOut( vec4f((texcoord - 0.5) * 2, 0, 1), texcoord ); } // this is just a dumping ground for color combinations @fragment fn fs(vs_out: VertexOut) -> @location(0) vec4f { let color = textureSample(tex, tex_sampler, vs_out.texcoord); return ${fragColors[fragColor]}; } ` }35:[{"id":"e7a6f869c1496c787e7a36ec8564de887dad8dd7947721b1d8978d5368787d7f27b2c3f65c357c31d9b00cf66c4ce13ccd48b98ae6f4468b3f6d780569a8bdcd","href":"https://static.observableusercontent.com/files/e7a6f869c1496c787e7a36ec8564de887dad8dd7947721b1d8978d5368787d7f27b2c3f65c357c31d9b00cf66c4ce13ccd48b98ae6f4468b3f6d780569a8bdcd","name":"MangoGrotesque-Black.otf","type":"font/otf","lastModified":1716568304479.089,"size":32592}] 2f:{"title":"🌱 Slime Mold Experiments | Seed/Randomness","cells":[{"id":0,"value":"# 🌱 Slime Mold Experiments | Seed/Randomness\n\nAlso interactive! Press and drag to add trails (growth not guaranteed).\n\n⚠️ [**Chrome only**](https://caniuse.com/webgpu)","pinned":false,"hidden":false,"mode":"md"},{"id":42,"value":"renderable.display","pinned":false,"hidden":false,"mode":"ojs"},{"id":564,"value":"viewof config = Inputs.select(new Map(configs.map((c, i) => [i, c])), { value: 0, label: 'behavior' })","pinned":false,"hidden":false,"mode":"ojs"},{"id":455,"value":"viewof fragColor = Inputs.select(util.arr(fragColors.length, i => i), { value: 0, label: 'color option' })","pinned":false,"hidden":false,"mode":"ojs"},{"id":758,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":220,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"fragColors = `\n vec4f(color.r, 0.0, 1.0 - color.r, color.a);\n vec4f(color.r, 0.0, 0.0, 1.0) * color.a; // nice\n vec4f(hsl2rgb(vec3f(color.r, 1.0, 1.0 - color.r)), 1.0);\n color;\n vec4f(hsl2rgb(vec3f(mix(90.0 / 360.0, 350.0 / 360.0, color.r), 1.0, 0.65)), 1.0);\n vec4f(hsl2rgb(vec3f(mix(200.0 / 360.0, 0.95, color.r), 1.0, mix(0.4, 1.0, color.r))), 1.0);\n vec4f(hsl2rgb(vec3f(mix(200.0 / 360.0, 0.95, color.r), mix(0.3, 1.0, 1.0 - color.r), mix(0.1, 0.7, color.r))), 1.0);\n vec4f(hsl2rgb(vec3f(color.r, 1.0, 1.0 - color.r)), 1.0) * color.a;\n`.trim().split('\\n').filter(line => !!line && !line.startsWith('//'))","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"interaction = {\n // await font.load()\n \n const context = gpu.context(S, S, '2d')\n context.canvas.style.background = '#000'\n\n function draw(text = 'hello') {\n context.clearRect(0, 0, S, S)\n context.fillStyle = '#ffffff'\n // context.font = 'bold 500pt CustomFont'\n context.font = 'bold 300pt Helvetica'\n context.textAlign = 'center'\n context.textBaseline = 'middle'\n // context.fillText('⚛', S / 2, S / 2)\n context.fillText(text, S / 2, S / 2)\n }\n\n draw()\n \n return { context, draw }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"S = 1024","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"{\n while (true) {\n renderable.render();\n yield null;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"sample = {\n const size = 64\n const count = 1024 / size\n const ctx = gpu.context(1024, 1024, '2d')\n ctx.fillStyle = '#ff0000'\n // ctx.fillStyle = '#000'\n\n // ctx.font = 'bold 300px Helvetica'\n // ctx.textAlign = 'center'\n // ctx.fillText('slime', S / 2, S / 2)\n \n // for (let y = 0; y < count; y++) {\n // for (let x = -1; x < count; x += 2) {\n // ctx.fillRect(x * size + y % 2 * size, y * size, size, size)\n // }\n // }\n\n // for (let i = 0; i < 500; i++) {\n // ctx.beginPath()\n // ctx.arc(util.randi(S), util.randi(S), util.rand(30) + 5, 0, util.TWO_PI)\n // ctx.fill()\n // // ctx.fillRect(util.randi(S), util.randi(S), util.rand(100) + 5, util.rand(100) + 5)\n // }\n \n return ctx\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":760,"value":"font = {\n const url = await FileAttachment('MangoGrotesque-Black.otf').url()\n const font = new FontFace('CustomFont', `url(${url})`);\n await font.load()\n document.fonts.add(font)\n return font\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":39,"value":"### Imports","pinned":false,"hidden":false,"mode":"md"},{"id":33,"value":"import { shaderFragments } from '@miketahani/webgpu-particles-2d-compute-sim-interaction'","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"import { gpu, util } from '@miketahani/gpu-utils'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}