[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"github-stars":3,"guide-nav":5,"doc-\u002Fdocs\u002Fprimitives\u002Fsim-agents":129},{"stars":4},5505,[6,11,15,19,23,27,31,35,39,43,47,51,55,59,63,67,72,76,80,84,88,93,97,101,105,109,113,117,121,125],{"path":7,"title":8,"description":9,"category":10},"\u002Fdocs\u002Fguide","Getting started","Shaders is a library of GPU effect components for Vue, React, Svelte, Solid, JavaScript and Framer, with a design editor for building with them.","code",{"path":12,"title":13,"description":14,"category":10},"\u002Fdocs\u002Fguide\u002Fquickstart","Quickstart","Install Shaders, render your first effect, and drive a prop from state.",{"path":16,"title":17,"description":18,"category":10},"\u002Fdocs\u002Fguide\u002Fcomposing-effects","Composing effects","Stack components as layers and nest them to control which layers an effect touches.",{"path":20,"title":21,"description":22,"category":10},"\u002Fdocs\u002Fguide\u002Fblending-masking","Blending and masking","Control how a layer mixes with the layers below it, and reveal one layer through another.",{"path":24,"title":25,"description":26,"category":10},"\u002Fdocs\u002Fguide\u002Fprops-reactivity","Props and reactivity","Bind props to your framework's state so effects update when it changes, and animate props with an animation library.",{"path":28,"title":29,"description":30,"category":10},"\u002Fdocs\u002Fguide\u002Fdynamic-props","Dynamic props","Drive any numeric or position prop from time, the cursor, or another layer, without writing animation code.",{"path":32,"title":33,"description":34,"category":10},"\u002Fdocs\u002Fguide\u002Flayout-positioning","Layout and positioning","Size and place a shader in your page with CSS, as a background, a fill, or an inline block.",{"path":36,"title":37,"description":38,"category":10},"\u002Fdocs\u002Fguide\u002Fsizing-and-units","Sizing and units","Size and place layers in CSS units (px, %, vw, rem, and canvas units) that stay correct as the canvas and window resize.",{"path":40,"title":41,"description":42,"category":10},"\u002Fdocs\u002Fguide\u002Ftransforms","Transforms","Position, size, and rotate any layer inside the canvas with a bounding box, in any CSS unit.",{"path":44,"title":45,"description":46,"category":10},"\u002Fdocs\u002Fguide\u002Fshape-effects","Shape effects","Pick the 2D, 3D or custom SVG shape that Glass, Neon, Emboss and other shape effects draw inside.",{"path":48,"title":49,"description":50,"category":10},"\u002Fdocs\u002Fguide\u002Fcolor-space","Color space","Match colors to your design tool with the output color space, and keep bright layers from clipping with tone mapping.",{"path":52,"title":53,"description":54,"category":10},"\u002Fdocs\u002Fguide\u002Fhooks-events","Hooks and events","Run code when an effect is ready to show, and show a fallback when the GPU can't run it.",{"path":56,"title":57,"description":58,"category":10},"\u002Fdocs\u002Fguide\u002Fperformance","Performance","Learn what makes an effect expensive on the GPU and how to keep it inside the frame budget.",{"path":60,"title":61,"description":62,"category":10},"\u002Fdocs\u002Fguide\u002Fcustom-shaders","Custom components","Write your own component in TypeScript, use it like any component in the library, and write WGSL by hand when you need to.",{"path":64,"title":65,"description":66,"category":10},"\u002Fdocs\u002Fguide\u002Ftelemetry","Telemetry","The `\u003CShader>` component occasionally sends an anonymous performance report to help us improve the engine over time.",{"path":68,"title":69,"description":70,"category":71},"\u002Fdocs\u002Fguide\u002Fmcp","Shaders MCP","Connect your AI coding agent to Shaders so it can find, install and edit effects in your codebase.","workflows",{"path":73,"title":74,"description":75,"category":71},"\u002Fdocs\u002Fguide\u002Fcli","Shaders CLI","Install your own shaders and Pro shaders into your codebase as component files, and keep them in sync with the design editor.",{"path":77,"title":78,"description":79,"category":71},"\u002Fdocs\u002Fguide\u002Fagent-skill","Agent skill","Give your coding agent a skill that teaches it to build with Shaders components, the CLI and Pro shaders.",{"path":81,"title":82,"description":83,"category":10},"\u002Fdocs\u002Fguide\u002Fvideo-rendering","Rendering to video","Turn a shader effect into a video file, from the design editor or from a frame-by-frame pipeline such as Remotion, Hyperframes or Puppeteer.",{"path":85,"title":86,"description":87,"category":10},"\u002Fdocs\u002Fguide\u002Fssr","Server rendering","Render Shaders in Next.js, Nuxt, SvelteKit, SolidStart and other SSR apps by keeping each shader on the client.",{"path":89,"title":90,"description":91,"category":92},"\u002Fdocs\u002Fguide\u002Fquick-tour-of-the-design-editor","Quick tour of the design editor","A short walkthrough of the full Shaders workflow, from designing on the infinite canvas to exporting code.","editor",{"path":94,"title":95,"description":96,"category":92},"\u002Fdocs\u002Fguide\u002Fintro-to-the-interface","Intro to the interface","A tour of the design editor interface: the canvas, layers, the Properties panel, and the ways to share and export.",{"path":98,"title":99,"description":100,"category":92},"\u002Fdocs\u002Fguide\u002Fcomposing-your-first-shader-effect","Composing your first shader effect","Building a first shader effect in the design editor by stacking and nesting components as layers.",{"path":102,"title":103,"description":104,"category":92},"\u002Fdocs\u002Fguide\u002Fmasking-and-blending","Masking and blending","How blend modes and masks combine components in the design editor.",{"path":106,"title":107,"description":108,"category":92},"\u002Fdocs\u002Fguide\u002Fdynamic-prop-mapping","Dynamic prop mapping","Turning static props into dynamic ones in the design editor: mapping one layer's output into another's prop, following the cursor, or animating automatically.",{"path":110,"title":111,"description":112,"category":92},"\u002Fdocs\u002Fguide\u002Fcustom-media-and-transformations","Custom media and transformations","Uploading images, videos, and SVG files to the media gallery, adding them to a composition, and placing them with transformations.",{"path":114,"title":115,"description":116,"category":92},"\u002Fdocs\u002Fguide\u002Finstalling-a-shader-via-mcp","Installing a shader via MCP","Installing a shader from the design editor into a hero section with the Shaders MCP.",{"path":118,"title":119,"description":120,"category":92},"\u002Fdocs\u002Fguide\u002Fexploring-shape-effects","Exploring shape effects","Applying shape effects such as liquid glass, liquid metal, and glowing edges to built-in shapes and your own SVG.",{"path":122,"title":123,"description":124,"category":92},"\u002Fdocs\u002Fguide\u002Fglass-component-spotlight","Component spotlight: Glass","A short look at the Glass component and the liquid-glass look it creates.",{"path":126,"title":127,"description":128,"category":92},"\u002Fdocs\u002Fguide\u002Fdigital-looks-component-spotlight","Component spotlight: Digital looks","A look at the digital stylization components for glitchy, futuristic, or technical effects.",{"id":130,"title":131,"body":132,"categoryId":2415,"categorySlug":2416,"categoryTitle":2417,"curated":399,"description":2418,"editUrl":2419,"extension":2420,"group":2421,"groupTitle":2422,"kind":2417,"meta":2423,"navigation":399,"path":2424,"seo":2425,"sourceUrl":2426,"stem":2427,"wordCount":437,"__hash__":2428},"primitives\u002Fdocs\u002Fprimitives\u002F40.sim-agents\u002Findex.md","Agents",{"type":133,"value":134,"toc":2409},"minimark",[135,139,151,202,205,234,239,348,352,2263,2267,2345,2349,2405],[136,137,131],"h1",{"id":138},"agents",[140,141,142,143,150],"p",{},"Thousands of small things that move: flocks, motes, filings, swarms, particles standing on an\nimage. An agent simulation keeps a state per agent, moves every agent one step per frame, draws\neach one into a shared canvas, and hands the result to the layer. ",[144,145,147],"a",{"href":146},"\u002Fdocs\u002Fprimitives\u002Fsim-agents\u002Fagentsim",[10,148,149],{},"agentSim"," owns the plumbing:\nthe state buffers, the output texture, the spawn on the first frame and again on a seed change,\nthe lower count on phones, the child's picture when one is needed, and the fragment that\nsamples the picture over the full canvas.",[140,152,153,154,158,159,162,163,166,167,170,171,174,175,178,179,185,186,189,190,193,194,197,198,201],{},"You declare three things. The ",[155,156,157],"strong",{},"physics",": a list of ",[10,160,161],{},"force"," or ",[10,164,165],{},"torque"," parts folded into one\nupdate step by an ",[10,168,169],{},"integrator"," (see ",[10,172,173],{},"sim.agentForces","). The ",[155,176,177],{},"look",": one ",[144,180,182],{"href":181},"\u002Fdocs\u002Fprimitives\u002Fsim-agents\u002Frenderagents",[10,183,184],{},"renderAgents","\nvariant that pairs a splat (each agent stamps its shape) with its resolve (the canvas becomes\nthe picture and is cleared for the next frame). The ",[155,187,188],{},"frame",": a callback that turns props and\nthe pointer into the values the steps read, with ",[10,191,192],{},"agentFrame"," helpers for the arithmetic, and\nreturns ",[10,195,196],{},"sys.frame({count})",". ",[10,199,200],{},"bake"," runs once per composition with the compile-time props\n(shape, color space) and assembles the steps and their order.",[140,203,204],{},"Agents live in canvas units: x from 0 to the aspect ratio, y from 0 to 1, so one unit is the\ncanvas height and distances are the same in every direction. This module re-exports the whole\nagent vocabulary, so one import covers forces, render parts, shape fields and frame helpers.",[206,207,212],"pre",{"className":208,"code":209,"language":210,"meta":211,"style":211},"language-ts shiki shiki-themes github-dark","import {sim} from 'shaders\u002Fstd'\n","ts","",[10,213,214],{"__ignoreMap":211},[215,216,219,223,227,230],"span",{"class":217,"line":218},"line",1,[215,220,222],{"class":221},"snl16","import",[215,224,226],{"class":225},"s95oV"," {sim} ",[215,228,229],{"class":221},"from",[215,231,233],{"class":232},"sU2Wk"," 'shaders\u002Fstd'\n",[235,236,238],"h2",{"id":237},"reach-for-it-when","Reach for it when",[240,241,242,255],"table",{},[243,244,245],"thead",{},[246,247,248,252],"tr",{},[249,250,251],"th",{},"When you need",[249,253,254],{},"Use",[256,257,258,276,289,302,315,328,340],"tbody",{},[246,259,260,264],{},[261,262,263],"td",{},"a flock, a swarm, drifting motes, iron filings",[261,265,266,270,271,275],{},[144,267,268],{"href":146},[10,269,149],{}," with an integrator and a ",[144,272,273],{"href":181},[10,274,184],{}," variant",[246,277,278,281],{},[261,279,280],{},"agents drawn as arrows or streaks along their heading, colored from calm to excited",[261,282,283],{},[144,284,286],{"href":285},"\u002Fdocs\u002Fprimitives\u002Fsim-agents\u002Frenderagents-orientedworld",[10,287,288],{},"renderAgents.orientedWorld",[246,290,291,294],{},[261,292,293],{},"round motes in one color that twinkle",[261,295,296],{},[144,297,299],{"href":298},"\u002Fdocs\u002Fprimitives\u002Fsim-agents\u002Frenderagents-pointworld",[10,300,301],{},"renderAgents.pointWorld",[246,303,304,307],{},[261,305,306],{},"a 3D swarm seen in perspective",[261,308,309],{},[144,310,312],{"href":311},"\u002Fdocs\u002Fprimitives\u002Fsim-agents\u002Frenderagents-volume",[10,313,314],{},"renderAgents.volume",[246,316,317,320],{},[261,318,319],{},"particles standing on the layer inside, seen through a camera",[261,321,322],{},[144,323,325],{"href":324},"\u002Fdocs\u002Fprimitives\u002Fsim-agents\u002Frenderagents-relief",[10,326,327],{},"renderAgents.relief",[246,329,330,333],{},[261,331,332],{},"fewer agents on phones without changing the prop's range",[261,334,335,336],{},"the countCap option of ",[144,337,338],{"href":146},[10,339,149],{},[246,341,342,345],{},[261,343,344],{},"a spawn that re-rolls from a seed prop",[261,346,347],{},"the initStep returned by bake, with reseed passed to the frame",[235,349,351],{"id":350},"example","Example",[206,353,355],{"className":208,"code":354,"language":210,"meta":211,"style":211},"import {defineShader, sim, transformColor, transformColorSpace, colorSpaceOptions} from 'shaders\u002Fstd'\nimport {tgpu, d, agents} from '@coreroot\u002Fgpu\u002Fkit'\nimport {makeCpuValueGetter, readAgentFrame, resolveRenderRes, SIZE_REF_RES} from '@coreroot\u002Fgpu\u002Fporters'\n\nconst {agentSim, renderAgents, force, integrator} = sim.agents\n\nconst MAX_AGENTS = 4096\nconst RES = resolveRenderRes({desktop: 1024, mobile: 640})\n\n\u002F\u002F The values every step reads each frame, written from the props in `frame`.\nconst SimParams = d.struct({\n  colA: d.vec4f, colB: d.vec4f,\n  count: d.f32, trails: d.f32,\n  dt: d.f32, aspect: d.f32, domainX: d.f32,\n  maxSpeed: d.f32, maxForce: d.f32,\n  perceptionSq: d.f32, sepRadiusSq: d.f32,\n  sepW: d.f32, aliW: d.f32, cohW: d.f32,\n  cursorX: d.f32, cursorY: d.f32, cursorMode: d.f32, cursorRadius: d.f32, cursorRadiusSq: d.f32, cursorForce: d.f32,\n  bodyR: d.f32,\n  margin: d.f32, turnForce: d.f32,\n  seed: d.f32,\n})\n\u002F\u002F Per-agent state (position + velocity), an excitement value, the two canvases, a trail canvas, the output.\nconst simLayout = tgpu.bindGroupLayout({\n  agents: {storage: d.arrayOf(d.vec4f, MAX_AGENTS), access: 'mutable'},\n  agit: {storage: d.arrayOf(d.f32, MAX_AGENTS), access: 'mutable'},\n  accumE: {storage: d.arrayOf(d.atomic(d.u32), RES * RES), access: 'mutable'},\n  accumS: {storage: d.arrayOf(d.atomic(d.u32), RES * RES), access: 'mutable'},\n  trailBuf: {storage: d.arrayOf(d.vec4f, RES * RES), access: 'mutable'},\n  params: {uniform: SimParams},\n  outTex: {storageTexture: d.textureStorage2d('rgba16float', 'write-only')},\n})\n\n\u002F\u002F Spawn already in formation, so frame one reads as a murmuration.\nconst boidsInit = agents.makeClusterFormationInit(simLayout, 'boidsInit')\n\n\u002F\u002F The physics: flocking, the cursor, and a soft turn at the edges, folded into one update step.\nconst boidsUpdate = integrator.steering2d(simLayout, {\n  forces: [force.flocking(simLayout, {maxAgents: MAX_AGENTS}), force.cursorSteer(simLayout), force.wallTurn(simLayout)],\n  agitation: {rest: 1.5, gain: 0.4545, cool: 1.3},\n  cruiseFloor: 0.35,\n  wallRestitution: 0.6,\n  name: 'boidsUpdate',\n})\n\n\u002F\u002F The look: comets along the heading, colored from rest to excited, into a trail canvas.\nconst boidsRender = (shape: string, colorSpace: number) => renderAgents.orientedWorld(simLayout, {\n  shape, res: RES, splatRCap: 16, heading: 'velocity', agitation: 'buffer', comet: true,\n  ramp: {colorSpace, trails: 'on'},\n  names: {splat: 'boidsSplat', resolve: 'boidsResolve'},\n})\n\n\u002F\u002F Boids: a living murmuration that flashes toward an excited color when the cursor scatters it.\nexport const Boids = defineShader({\n  name: 'Boids',\n  usesPointer: true,\n  props: {\n    colorA: {default: '#8ec5ff', transform: transformColor},\n    colorB: {default: '#ff7ad9', transform: transformColor},\n    colorSpace: {default: 'oklab', transform: transformColorSpace, compileTime: true, ui: {type: 'select', options: colorSpaceOptions}},\n    agentShape: {default: 'arrow', compileTime: true, ui: {type: 'select', options: agents.orientedShapeOptions}},\n    count: {default: 2000},\n    speed: {default: 2},\n    seed: {default: 0},\n    size: {default: 1.5},\n    trails: {default: 0},\n    perception: {default: 0.12},\n    cursorStrength: {default: 1.5},\n  },\n  ...agentSim\u003Ctypeof SimParams>({\n    layout: simLayout,\n    params: SimParams,\n    maxAgents: MAX_AGENTS,\n    countCap: {desktop: MAX_AGENTS, mobile: 1200},\n    output: {key: 'outTex', name: 'boidsTexture', size: [RES, RES], format: 'rgba16float'},\n    bake: ({getCpuValue}) => {\n      const render = boidsRender((getCpuValue('agentShape') as string) || 'arrow', (getCpuValue('colorSpace') as number) ?? 2)\n      return {\n        pipelines: {\n          init: {kernel: boidsInit, threads: 'max'},\n          update: {kernel: boidsUpdate, threads: 'agents'},\n          splat: render.splat,\n          resolve: render.resolve,\n        },\n        initStep: 'init',\n        program: ['update', 'splat', 'resolve'],\n      }\n    },\n    frame: (sys, {getCpuValue}) => {\n      const g = makeCpuValueGetter(getCpuValue)\n      return (frameParams) => {\n        const {dt, aspect, pointerX, pointerY} = readAgentFrame(frameParams)\n        const count = sys.resolveCount(g('count', 2000))\n        const maxSpeed = 0.13 * g('speed', 2)\n        const perception = g('perception', 0.12)\n        const colA = getCpuValue('colorA') as {x: number; y: number; z: number; w: number} | undefined\n        const colB = getCpuValue('colorB') as {x: number; y: number; z: number; w: number} | undefined\n        sys.writeParams({\n          colA: d.vec4f(colA?.x ?? 0.56, colA?.y ?? 0.77, colA?.z ?? 1, colA?.w ?? 1),\n          colB: d.vec4f(colB?.x ?? 1, colB?.y ?? 0.48, colB?.z ?? 0.85, colB?.w ?? 1),\n          count, trails: Math.min(Math.max(g('trails', 0), 0), 1) * 0.92,\n          dt, aspect, domainX: Math.max(aspect, 0.01),\n          maxSpeed, maxForce: maxSpeed * 3.5,\n          perceptionSq: perception * perception,\n          sepRadiusSq: (perception * 0.5) * (perception * 0.5),\n          sepW: 1.7, aliW: 1.5, cohW: 1,\n          cursorX: pointerX * aspect, cursorY: pointerY, cursorMode: 2,\n          cursorRadius: 0.22, cursorRadiusSq: 0.22 * 0.22,\n          cursorForce: g('cursorStrength', 1.5) * maxSpeed * 12,\n          bodyR: Math.min(Math.max(g('size', 1.5), 0.5), 3) * 2 \u002F SIZE_REF_RES,\n          margin: 0.07, turnForce: maxSpeed * 2.2,\n          seed: g('seed', 0),\n        })\n        return sys.frame({count, reseed: g('seed', 0)})\n      }\n    },\n    fragment: {output: 'boidsTexture', fallback: 'transparent'},\n  }),\n})\n",[10,356,357,368,381,394,401,435,440,454,483,488,495,514,520,526,532,538,544,550,556,562,568,574,579,585,603,627,646,677,703,725,731,754,759,764,770,795,800,806,825,854,877,889,900,911,916,921,927,974,1008,1019,1036,1041,1046,1052,1071,1081,1091,1097,1109,1120,1143,1164,1175,1186,1197,1207,1217,1228,1238,1244,1261,1267,1273,1283,1298,1329,1349,1413,1421,1427,1438,1449,1455,1461,1467,1478,1500,1506,1512,1535,1551,1567,1603,1636,1664,1687,1754,1813,1824,1867,1907,1955,1971,1984,1995,2019,2040,2055,2076,2107,2156,2175,2194,2200,2226,2231,2236,2252,2258],{"__ignoreMap":211},[215,358,359,361,364,366],{"class":217,"line":218},[215,360,222],{"class":221},[215,362,363],{"class":225}," {defineShader, sim, transformColor, transformColorSpace, colorSpaceOptions} ",[215,365,229],{"class":221},[215,367,233],{"class":232},[215,369,371,373,376,378],{"class":217,"line":370},2,[215,372,222],{"class":221},[215,374,375],{"class":225}," {tgpu, d, agents} ",[215,377,229],{"class":221},[215,379,380],{"class":232}," '@coreroot\u002Fgpu\u002Fkit'\n",[215,382,384,386,389,391],{"class":217,"line":383},3,[215,385,222],{"class":221},[215,387,388],{"class":225}," {makeCpuValueGetter, readAgentFrame, resolveRenderRes, SIZE_REF_RES} ",[215,390,229],{"class":221},[215,392,393],{"class":232}," '@coreroot\u002Fgpu\u002Fporters'\n",[215,395,397],{"class":217,"line":396},4,[215,398,400],{"emptyLinePlaceholder":399},true,"\n",[215,402,404,407,410,413,416,418,420,422,424,426,429,432],{"class":217,"line":403},5,[215,405,406],{"class":221},"const",[215,408,409],{"class":225}," {",[215,411,149],{"class":412},"sDLfK",[215,414,415],{"class":225},", ",[215,417,184],{"class":412},[215,419,415],{"class":225},[215,421,161],{"class":412},[215,423,415],{"class":225},[215,425,169],{"class":412},[215,427,428],{"class":225},"} ",[215,430,431],{"class":221},"=",[215,433,434],{"class":225}," sim.agents\n",[215,436,438],{"class":217,"line":437},6,[215,439,400],{"emptyLinePlaceholder":399},[215,441,443,445,448,451],{"class":217,"line":442},7,[215,444,406],{"class":221},[215,446,447],{"class":412}," MAX_AGENTS",[215,449,450],{"class":221}," =",[215,452,453],{"class":412}," 4096\n",[215,455,457,459,462,464,468,471,474,477,480],{"class":217,"line":456},8,[215,458,406],{"class":221},[215,460,461],{"class":412}," RES",[215,463,450],{"class":221},[215,465,467],{"class":466},"svObZ"," resolveRenderRes",[215,469,470],{"class":225},"({desktop: ",[215,472,473],{"class":412},"1024",[215,475,476],{"class":225},", mobile: ",[215,478,479],{"class":412},"640",[215,481,482],{"class":225},"})\n",[215,484,486],{"class":217,"line":485},9,[215,487,400],{"emptyLinePlaceholder":399},[215,489,491],{"class":217,"line":490},10,[215,492,494],{"class":493},"sAwPA","\u002F\u002F The values every step reads each frame, written from the props in `frame`.\n",[215,496,498,500,503,505,508,511],{"class":217,"line":497},11,[215,499,406],{"class":221},[215,501,502],{"class":412}," SimParams",[215,504,450],{"class":221},[215,506,507],{"class":225}," d.",[215,509,510],{"class":466},"struct",[215,512,513],{"class":225},"({\n",[215,515,517],{"class":217,"line":516},12,[215,518,519],{"class":225},"  colA: d.vec4f, colB: d.vec4f,\n",[215,521,523],{"class":217,"line":522},13,[215,524,525],{"class":225},"  count: d.f32, trails: d.f32,\n",[215,527,529],{"class":217,"line":528},14,[215,530,531],{"class":225},"  dt: d.f32, aspect: d.f32, domainX: d.f32,\n",[215,533,535],{"class":217,"line":534},15,[215,536,537],{"class":225},"  maxSpeed: d.f32, maxForce: d.f32,\n",[215,539,541],{"class":217,"line":540},16,[215,542,543],{"class":225},"  perceptionSq: d.f32, sepRadiusSq: d.f32,\n",[215,545,547],{"class":217,"line":546},17,[215,548,549],{"class":225},"  sepW: d.f32, aliW: d.f32, cohW: d.f32,\n",[215,551,553],{"class":217,"line":552},18,[215,554,555],{"class":225},"  cursorX: d.f32, cursorY: d.f32, cursorMode: d.f32, cursorRadius: d.f32, cursorRadiusSq: d.f32, cursorForce: d.f32,\n",[215,557,559],{"class":217,"line":558},19,[215,560,561],{"class":225},"  bodyR: d.f32,\n",[215,563,565],{"class":217,"line":564},20,[215,566,567],{"class":225},"  margin: d.f32, turnForce: d.f32,\n",[215,569,571],{"class":217,"line":570},21,[215,572,573],{"class":225},"  seed: d.f32,\n",[215,575,577],{"class":217,"line":576},22,[215,578,482],{"class":225},[215,580,582],{"class":217,"line":581},23,[215,583,584],{"class":493},"\u002F\u002F Per-agent state (position + velocity), an excitement value, the two canvases, a trail canvas, the output.\n",[215,586,588,590,593,595,598,601],{"class":217,"line":587},24,[215,589,406],{"class":221},[215,591,592],{"class":412}," simLayout",[215,594,450],{"class":221},[215,596,597],{"class":225}," tgpu.",[215,599,600],{"class":466},"bindGroupLayout",[215,602,513],{"class":225},[215,604,606,609,612,615,618,621,624],{"class":217,"line":605},25,[215,607,608],{"class":225},"  agents: {storage: d.",[215,610,611],{"class":466},"arrayOf",[215,613,614],{"class":225},"(d.vec4f, ",[215,616,617],{"class":412},"MAX_AGENTS",[215,619,620],{"class":225},"), access: ",[215,622,623],{"class":232},"'mutable'",[215,625,626],{"class":225},"},\n",[215,628,630,633,635,638,640,642,644],{"class":217,"line":629},26,[215,631,632],{"class":225},"  agit: {storage: d.",[215,634,611],{"class":466},[215,636,637],{"class":225},"(d.f32, ",[215,639,617],{"class":412},[215,641,620],{"class":225},[215,643,623],{"class":232},[215,645,626],{"class":225},[215,647,649,652,654,657,660,663,666,669,671,673,675],{"class":217,"line":648},27,[215,650,651],{"class":225},"  accumE: {storage: d.",[215,653,611],{"class":466},[215,655,656],{"class":225},"(d.",[215,658,659],{"class":466},"atomic",[215,661,662],{"class":225},"(d.u32), ",[215,664,665],{"class":412},"RES",[215,667,668],{"class":221}," *",[215,670,461],{"class":412},[215,672,620],{"class":225},[215,674,623],{"class":232},[215,676,626],{"class":225},[215,678,680,683,685,687,689,691,693,695,697,699,701],{"class":217,"line":679},28,[215,681,682],{"class":225},"  accumS: {storage: d.",[215,684,611],{"class":466},[215,686,656],{"class":225},[215,688,659],{"class":466},[215,690,662],{"class":225},[215,692,665],{"class":412},[215,694,668],{"class":221},[215,696,461],{"class":412},[215,698,620],{"class":225},[215,700,623],{"class":232},[215,702,626],{"class":225},[215,704,706,709,711,713,715,717,719,721,723],{"class":217,"line":705},29,[215,707,708],{"class":225},"  trailBuf: {storage: d.",[215,710,611],{"class":466},[215,712,614],{"class":225},[215,714,665],{"class":412},[215,716,668],{"class":221},[215,718,461],{"class":412},[215,720,620],{"class":225},[215,722,623],{"class":232},[215,724,626],{"class":225},[215,726,728],{"class":217,"line":727},30,[215,729,730],{"class":225},"  params: {uniform: SimParams},\n",[215,732,734,737,740,743,746,748,751],{"class":217,"line":733},31,[215,735,736],{"class":225},"  outTex: {storageTexture: d.",[215,738,739],{"class":466},"textureStorage2d",[215,741,742],{"class":225},"(",[215,744,745],{"class":232},"'rgba16float'",[215,747,415],{"class":225},[215,749,750],{"class":232},"'write-only'",[215,752,753],{"class":225},")},\n",[215,755,757],{"class":217,"line":756},32,[215,758,482],{"class":225},[215,760,762],{"class":217,"line":761},33,[215,763,400],{"emptyLinePlaceholder":399},[215,765,767],{"class":217,"line":766},34,[215,768,769],{"class":493},"\u002F\u002F Spawn already in formation, so frame one reads as a murmuration.\n",[215,771,773,775,778,780,783,786,789,792],{"class":217,"line":772},35,[215,774,406],{"class":221},[215,776,777],{"class":412}," boidsInit",[215,779,450],{"class":221},[215,781,782],{"class":225}," agents.",[215,784,785],{"class":466},"makeClusterFormationInit",[215,787,788],{"class":225},"(simLayout, ",[215,790,791],{"class":232},"'boidsInit'",[215,793,794],{"class":225},")\n",[215,796,798],{"class":217,"line":797},36,[215,799,400],{"emptyLinePlaceholder":399},[215,801,803],{"class":217,"line":802},37,[215,804,805],{"class":493},"\u002F\u002F The physics: flocking, the cursor, and a soft turn at the edges, folded into one update step.\n",[215,807,809,811,814,816,819,822],{"class":217,"line":808},38,[215,810,406],{"class":221},[215,812,813],{"class":412}," boidsUpdate",[215,815,450],{"class":221},[215,817,818],{"class":225}," integrator.",[215,820,821],{"class":466},"steering2d",[215,823,824],{"class":225},"(simLayout, {\n",[215,826,828,831,834,837,839,842,845,848,851],{"class":217,"line":827},39,[215,829,830],{"class":225},"  forces: [force.",[215,832,833],{"class":466},"flocking",[215,835,836],{"class":225},"(simLayout, {maxAgents: ",[215,838,617],{"class":412},[215,840,841],{"class":225},"}), force.",[215,843,844],{"class":466},"cursorSteer",[215,846,847],{"class":225},"(simLayout), force.",[215,849,850],{"class":466},"wallTurn",[215,852,853],{"class":225},"(simLayout)],\n",[215,855,857,860,863,866,869,872,875],{"class":217,"line":856},40,[215,858,859],{"class":225},"  agitation: {rest: ",[215,861,862],{"class":412},"1.5",[215,864,865],{"class":225},", gain: ",[215,867,868],{"class":412},"0.4545",[215,870,871],{"class":225},", cool: ",[215,873,874],{"class":412},"1.3",[215,876,626],{"class":225},[215,878,880,883,886],{"class":217,"line":879},41,[215,881,882],{"class":225},"  cruiseFloor: ",[215,884,885],{"class":412},"0.35",[215,887,888],{"class":225},",\n",[215,890,892,895,898],{"class":217,"line":891},42,[215,893,894],{"class":225},"  wallRestitution: ",[215,896,897],{"class":412},"0.6",[215,899,888],{"class":225},[215,901,903,906,909],{"class":217,"line":902},43,[215,904,905],{"class":225},"  name: ",[215,907,908],{"class":232},"'boidsUpdate'",[215,910,888],{"class":225},[215,912,914],{"class":217,"line":913},44,[215,915,482],{"class":225},[215,917,919],{"class":217,"line":918},45,[215,920,400],{"emptyLinePlaceholder":399},[215,922,924],{"class":217,"line":923},46,[215,925,926],{"class":493},"\u002F\u002F The look: comets along the heading, colored from rest to excited, into a trail canvas.\n",[215,928,930,932,935,937,940,944,947,950,952,955,957,960,963,966,969,972],{"class":217,"line":929},47,[215,931,406],{"class":221},[215,933,934],{"class":466}," boidsRender",[215,936,450],{"class":221},[215,938,939],{"class":225}," (",[215,941,943],{"class":942},"s9osk","shape",[215,945,946],{"class":221},":",[215,948,949],{"class":412}," string",[215,951,415],{"class":225},[215,953,954],{"class":942},"colorSpace",[215,956,946],{"class":221},[215,958,959],{"class":412}," number",[215,961,962],{"class":225},") ",[215,964,965],{"class":221},"=>",[215,967,968],{"class":225}," renderAgents.",[215,970,971],{"class":466},"orientedWorld",[215,973,824],{"class":225},[215,975,977,980,982,985,988,991,994,997,1000,1003,1006],{"class":217,"line":976},48,[215,978,979],{"class":225},"  shape, res: ",[215,981,665],{"class":412},[215,983,984],{"class":225},", splatRCap: ",[215,986,987],{"class":412},"16",[215,989,990],{"class":225},", heading: ",[215,992,993],{"class":232},"'velocity'",[215,995,996],{"class":225},", agitation: ",[215,998,999],{"class":232},"'buffer'",[215,1001,1002],{"class":225},", comet: ",[215,1004,1005],{"class":412},"true",[215,1007,888],{"class":225},[215,1009,1011,1014,1017],{"class":217,"line":1010},49,[215,1012,1013],{"class":225},"  ramp: {colorSpace, trails: ",[215,1015,1016],{"class":232},"'on'",[215,1018,626],{"class":225},[215,1020,1022,1025,1028,1031,1034],{"class":217,"line":1021},50,[215,1023,1024],{"class":225},"  names: {splat: ",[215,1026,1027],{"class":232},"'boidsSplat'",[215,1029,1030],{"class":225},", resolve: ",[215,1032,1033],{"class":232},"'boidsResolve'",[215,1035,626],{"class":225},[215,1037,1039],{"class":217,"line":1038},51,[215,1040,482],{"class":225},[215,1042,1044],{"class":217,"line":1043},52,[215,1045,400],{"emptyLinePlaceholder":399},[215,1047,1049],{"class":217,"line":1048},53,[215,1050,1051],{"class":493},"\u002F\u002F Boids: a living murmuration that flashes toward an excited color when the cursor scatters it.\n",[215,1053,1055,1058,1061,1064,1066,1069],{"class":217,"line":1054},54,[215,1056,1057],{"class":221},"export",[215,1059,1060],{"class":221}," const",[215,1062,1063],{"class":412}," Boids",[215,1065,450],{"class":221},[215,1067,1068],{"class":466}," defineShader",[215,1070,513],{"class":225},[215,1072,1074,1076,1079],{"class":217,"line":1073},55,[215,1075,905],{"class":225},[215,1077,1078],{"class":232},"'Boids'",[215,1080,888],{"class":225},[215,1082,1084,1087,1089],{"class":217,"line":1083},56,[215,1085,1086],{"class":225},"  usesPointer: ",[215,1088,1005],{"class":412},[215,1090,888],{"class":225},[215,1092,1094],{"class":217,"line":1093},57,[215,1095,1096],{"class":225},"  props: {\n",[215,1098,1100,1103,1106],{"class":217,"line":1099},58,[215,1101,1102],{"class":225},"    colorA: {default: ",[215,1104,1105],{"class":232},"'#8ec5ff'",[215,1107,1108],{"class":225},", transform: transformColor},\n",[215,1110,1112,1115,1118],{"class":217,"line":1111},59,[215,1113,1114],{"class":225},"    colorB: {default: ",[215,1116,1117],{"class":232},"'#ff7ad9'",[215,1119,1108],{"class":225},[215,1121,1123,1126,1129,1132,1134,1137,1140],{"class":217,"line":1122},60,[215,1124,1125],{"class":225},"    colorSpace: {default: ",[215,1127,1128],{"class":232},"'oklab'",[215,1130,1131],{"class":225},", transform: transformColorSpace, compileTime: ",[215,1133,1005],{"class":412},[215,1135,1136],{"class":225},", ui: {type: ",[215,1138,1139],{"class":232},"'select'",[215,1141,1142],{"class":225},", options: colorSpaceOptions}},\n",[215,1144,1146,1149,1152,1155,1157,1159,1161],{"class":217,"line":1145},61,[215,1147,1148],{"class":225},"    agentShape: {default: ",[215,1150,1151],{"class":232},"'arrow'",[215,1153,1154],{"class":225},", compileTime: ",[215,1156,1005],{"class":412},[215,1158,1136],{"class":225},[215,1160,1139],{"class":232},[215,1162,1163],{"class":225},", options: agents.orientedShapeOptions}},\n",[215,1165,1167,1170,1173],{"class":217,"line":1166},62,[215,1168,1169],{"class":225},"    count: {default: ",[215,1171,1172],{"class":412},"2000",[215,1174,626],{"class":225},[215,1176,1178,1181,1184],{"class":217,"line":1177},63,[215,1179,1180],{"class":225},"    speed: {default: ",[215,1182,1183],{"class":412},"2",[215,1185,626],{"class":225},[215,1187,1189,1192,1195],{"class":217,"line":1188},64,[215,1190,1191],{"class":225},"    seed: {default: ",[215,1193,1194],{"class":412},"0",[215,1196,626],{"class":225},[215,1198,1200,1203,1205],{"class":217,"line":1199},65,[215,1201,1202],{"class":225},"    size: {default: ",[215,1204,862],{"class":412},[215,1206,626],{"class":225},[215,1208,1210,1213,1215],{"class":217,"line":1209},66,[215,1211,1212],{"class":225},"    trails: {default: ",[215,1214,1194],{"class":412},[215,1216,626],{"class":225},[215,1218,1220,1223,1226],{"class":217,"line":1219},67,[215,1221,1222],{"class":225},"    perception: {default: ",[215,1224,1225],{"class":412},"0.12",[215,1227,626],{"class":225},[215,1229,1231,1234,1236],{"class":217,"line":1230},68,[215,1232,1233],{"class":225},"    cursorStrength: {default: ",[215,1235,862],{"class":412},[215,1237,626],{"class":225},[215,1239,1241],{"class":217,"line":1240},69,[215,1242,1243],{"class":225},"  },\n",[215,1245,1247,1250,1252,1255,1258],{"class":217,"line":1246},70,[215,1248,1249],{"class":221},"  ...",[215,1251,149],{"class":466},[215,1253,1254],{"class":225},"\u003C",[215,1256,1257],{"class":221},"typeof",[215,1259,1260],{"class":225}," SimParams>({\n",[215,1262,1264],{"class":217,"line":1263},71,[215,1265,1266],{"class":225},"    layout: simLayout,\n",[215,1268,1270],{"class":217,"line":1269},72,[215,1271,1272],{"class":225},"    params: SimParams,\n",[215,1274,1276,1279,1281],{"class":217,"line":1275},73,[215,1277,1278],{"class":225},"    maxAgents: ",[215,1280,617],{"class":412},[215,1282,888],{"class":225},[215,1284,1286,1289,1291,1293,1296],{"class":217,"line":1285},74,[215,1287,1288],{"class":225},"    countCap: {desktop: ",[215,1290,617],{"class":412},[215,1292,476],{"class":225},[215,1294,1295],{"class":412},"1200",[215,1297,626],{"class":225},[215,1299,1301,1304,1307,1310,1313,1316,1318,1320,1322,1325,1327],{"class":217,"line":1300},75,[215,1302,1303],{"class":225},"    output: {key: ",[215,1305,1306],{"class":232},"'outTex'",[215,1308,1309],{"class":225},", name: ",[215,1311,1312],{"class":232},"'boidsTexture'",[215,1314,1315],{"class":225},", size: [",[215,1317,665],{"class":412},[215,1319,415],{"class":225},[215,1321,665],{"class":412},[215,1323,1324],{"class":225},"], format: ",[215,1326,745],{"class":232},[215,1328,626],{"class":225},[215,1330,1332,1335,1338,1341,1344,1346],{"class":217,"line":1331},76,[215,1333,1334],{"class":466},"    bake",[215,1336,1337],{"class":225},": ({",[215,1339,1340],{"class":942},"getCpuValue",[215,1342,1343],{"class":225},"}) ",[215,1345,965],{"class":221},[215,1347,1348],{"class":225}," {\n",[215,1350,1352,1355,1358,1360,1362,1365,1367,1369,1372,1374,1377,1379,1381,1384,1387,1390,1392,1394,1397,1399,1401,1403,1405,1408,1411],{"class":217,"line":1351},77,[215,1353,1354],{"class":221},"      const",[215,1356,1357],{"class":412}," render",[215,1359,450],{"class":221},[215,1361,934],{"class":466},[215,1363,1364],{"class":225},"((",[215,1366,1340],{"class":466},[215,1368,742],{"class":225},[215,1370,1371],{"class":232},"'agentShape'",[215,1373,962],{"class":225},[215,1375,1376],{"class":221},"as",[215,1378,949],{"class":412},[215,1380,962],{"class":225},[215,1382,1383],{"class":221},"||",[215,1385,1386],{"class":232}," 'arrow'",[215,1388,1389],{"class":225},", (",[215,1391,1340],{"class":466},[215,1393,742],{"class":225},[215,1395,1396],{"class":232},"'colorSpace'",[215,1398,962],{"class":225},[215,1400,1376],{"class":221},[215,1402,959],{"class":412},[215,1404,962],{"class":225},[215,1406,1407],{"class":221},"??",[215,1409,1410],{"class":412}," 2",[215,1412,794],{"class":225},[215,1414,1416,1419],{"class":217,"line":1415},78,[215,1417,1418],{"class":221},"      return",[215,1420,1348],{"class":225},[215,1422,1424],{"class":217,"line":1423},79,[215,1425,1426],{"class":225},"        pipelines: {\n",[215,1428,1430,1433,1436],{"class":217,"line":1429},80,[215,1431,1432],{"class":225},"          init: {kernel: boidsInit, threads: ",[215,1434,1435],{"class":232},"'max'",[215,1437,626],{"class":225},[215,1439,1441,1444,1447],{"class":217,"line":1440},81,[215,1442,1443],{"class":225},"          update: {kernel: boidsUpdate, threads: ",[215,1445,1446],{"class":232},"'agents'",[215,1448,626],{"class":225},[215,1450,1452],{"class":217,"line":1451},82,[215,1453,1454],{"class":225},"          splat: render.splat,\n",[215,1456,1458],{"class":217,"line":1457},83,[215,1459,1460],{"class":225},"          resolve: render.resolve,\n",[215,1462,1464],{"class":217,"line":1463},84,[215,1465,1466],{"class":225},"        },\n",[215,1468,1470,1473,1476],{"class":217,"line":1469},85,[215,1471,1472],{"class":225},"        initStep: ",[215,1474,1475],{"class":232},"'init'",[215,1477,888],{"class":225},[215,1479,1481,1484,1487,1489,1492,1494,1497],{"class":217,"line":1480},86,[215,1482,1483],{"class":225},"        program: [",[215,1485,1486],{"class":232},"'update'",[215,1488,415],{"class":225},[215,1490,1491],{"class":232},"'splat'",[215,1493,415],{"class":225},[215,1495,1496],{"class":232},"'resolve'",[215,1498,1499],{"class":225},"],\n",[215,1501,1503],{"class":217,"line":1502},87,[215,1504,1505],{"class":225},"      }\n",[215,1507,1509],{"class":217,"line":1508},88,[215,1510,1511],{"class":225},"    },\n",[215,1513,1515,1518,1521,1524,1527,1529,1531,1533],{"class":217,"line":1514},89,[215,1516,1517],{"class":466},"    frame",[215,1519,1520],{"class":225},": (",[215,1522,1523],{"class":942},"sys",[215,1525,1526],{"class":225},", {",[215,1528,1340],{"class":942},[215,1530,1343],{"class":225},[215,1532,965],{"class":221},[215,1534,1348],{"class":225},[215,1536,1538,1540,1543,1545,1548],{"class":217,"line":1537},90,[215,1539,1354],{"class":221},[215,1541,1542],{"class":412}," g",[215,1544,450],{"class":221},[215,1546,1547],{"class":466}," makeCpuValueGetter",[215,1549,1550],{"class":225},"(getCpuValue)\n",[215,1552,1554,1556,1558,1561,1563,1565],{"class":217,"line":1553},91,[215,1555,1418],{"class":221},[215,1557,939],{"class":225},[215,1559,1560],{"class":942},"frameParams",[215,1562,962],{"class":225},[215,1564,965],{"class":221},[215,1566,1348],{"class":225},[215,1568,1570,1573,1575,1578,1580,1583,1585,1588,1590,1593,1595,1597,1600],{"class":217,"line":1569},92,[215,1571,1572],{"class":221},"        const",[215,1574,409],{"class":225},[215,1576,1577],{"class":412},"dt",[215,1579,415],{"class":225},[215,1581,1582],{"class":412},"aspect",[215,1584,415],{"class":225},[215,1586,1587],{"class":412},"pointerX",[215,1589,415],{"class":225},[215,1591,1592],{"class":412},"pointerY",[215,1594,428],{"class":225},[215,1596,431],{"class":221},[215,1598,1599],{"class":466}," readAgentFrame",[215,1601,1602],{"class":225},"(frameParams)\n",[215,1604,1606,1608,1611,1613,1616,1619,1621,1624,1626,1629,1631,1633],{"class":217,"line":1605},93,[215,1607,1572],{"class":221},[215,1609,1610],{"class":412}," count",[215,1612,450],{"class":221},[215,1614,1615],{"class":225}," sys.",[215,1617,1618],{"class":466},"resolveCount",[215,1620,742],{"class":225},[215,1622,1623],{"class":466},"g",[215,1625,742],{"class":225},[215,1627,1628],{"class":232},"'count'",[215,1630,415],{"class":225},[215,1632,1172],{"class":412},[215,1634,1635],{"class":225},"))\n",[215,1637,1639,1641,1644,1646,1649,1651,1653,1655,1658,1660,1662],{"class":217,"line":1638},94,[215,1640,1572],{"class":221},[215,1642,1643],{"class":412}," maxSpeed",[215,1645,450],{"class":221},[215,1647,1648],{"class":412}," 0.13",[215,1650,668],{"class":221},[215,1652,1542],{"class":466},[215,1654,742],{"class":225},[215,1656,1657],{"class":232},"'speed'",[215,1659,415],{"class":225},[215,1661,1183],{"class":412},[215,1663,794],{"class":225},[215,1665,1667,1669,1672,1674,1676,1678,1681,1683,1685],{"class":217,"line":1666},95,[215,1668,1572],{"class":221},[215,1670,1671],{"class":412}," perception",[215,1673,450],{"class":221},[215,1675,1542],{"class":466},[215,1677,742],{"class":225},[215,1679,1680],{"class":232},"'perception'",[215,1682,415],{"class":225},[215,1684,1225],{"class":412},[215,1686,794],{"class":225},[215,1688,1690,1692,1695,1697,1700,1702,1705,1707,1709,1711,1714,1716,1718,1721,1724,1726,1728,1730,1733,1735,1737,1739,1742,1744,1746,1748,1751],{"class":217,"line":1689},96,[215,1691,1572],{"class":221},[215,1693,1694],{"class":412}," colA",[215,1696,450],{"class":221},[215,1698,1699],{"class":466}," getCpuValue",[215,1701,742],{"class":225},[215,1703,1704],{"class":232},"'colorA'",[215,1706,962],{"class":225},[215,1708,1376],{"class":221},[215,1710,409],{"class":225},[215,1712,1713],{"class":942},"x",[215,1715,946],{"class":221},[215,1717,959],{"class":412},[215,1719,1720],{"class":225},"; ",[215,1722,1723],{"class":942},"y",[215,1725,946],{"class":221},[215,1727,959],{"class":412},[215,1729,1720],{"class":225},[215,1731,1732],{"class":942},"z",[215,1734,946],{"class":221},[215,1736,959],{"class":412},[215,1738,1720],{"class":225},[215,1740,1741],{"class":942},"w",[215,1743,946],{"class":221},[215,1745,959],{"class":412},[215,1747,428],{"class":225},[215,1749,1750],{"class":221},"|",[215,1752,1753],{"class":412}," undefined\n",[215,1755,1757,1759,1762,1764,1766,1768,1771,1773,1775,1777,1779,1781,1783,1785,1787,1789,1791,1793,1795,1797,1799,1801,1803,1805,1807,1809,1811],{"class":217,"line":1756},97,[215,1758,1572],{"class":221},[215,1760,1761],{"class":412}," colB",[215,1763,450],{"class":221},[215,1765,1699],{"class":466},[215,1767,742],{"class":225},[215,1769,1770],{"class":232},"'colorB'",[215,1772,962],{"class":225},[215,1774,1376],{"class":221},[215,1776,409],{"class":225},[215,1778,1713],{"class":942},[215,1780,946],{"class":221},[215,1782,959],{"class":412},[215,1784,1720],{"class":225},[215,1786,1723],{"class":942},[215,1788,946],{"class":221},[215,1790,959],{"class":412},[215,1792,1720],{"class":225},[215,1794,1732],{"class":942},[215,1796,946],{"class":221},[215,1798,959],{"class":412},[215,1800,1720],{"class":225},[215,1802,1741],{"class":942},[215,1804,946],{"class":221},[215,1806,959],{"class":412},[215,1808,428],{"class":225},[215,1810,1750],{"class":221},[215,1812,1753],{"class":412},[215,1814,1816,1819,1822],{"class":217,"line":1815},98,[215,1817,1818],{"class":225},"        sys.",[215,1820,1821],{"class":466},"writeParams",[215,1823,513],{"class":225},[215,1825,1827,1830,1833,1836,1838,1841,1844,1846,1849,1852,1854,1857,1860,1862,1864],{"class":217,"line":1826},99,[215,1828,1829],{"class":225},"          colA: d.",[215,1831,1832],{"class":466},"vec4f",[215,1834,1835],{"class":225},"(colA?.x ",[215,1837,1407],{"class":221},[215,1839,1840],{"class":412}," 0.56",[215,1842,1843],{"class":225},", colA?.y ",[215,1845,1407],{"class":221},[215,1847,1848],{"class":412}," 0.77",[215,1850,1851],{"class":225},", colA?.z ",[215,1853,1407],{"class":221},[215,1855,1856],{"class":412}," 1",[215,1858,1859],{"class":225},", colA?.w ",[215,1861,1407],{"class":221},[215,1863,1856],{"class":412},[215,1865,1866],{"class":225},"),\n",[215,1868,1870,1873,1875,1878,1880,1882,1885,1887,1890,1893,1895,1898,1901,1903,1905],{"class":217,"line":1869},100,[215,1871,1872],{"class":225},"          colB: d.",[215,1874,1832],{"class":466},[215,1876,1877],{"class":225},"(colB?.x ",[215,1879,1407],{"class":221},[215,1881,1856],{"class":412},[215,1883,1884],{"class":225},", colB?.y ",[215,1886,1407],{"class":221},[215,1888,1889],{"class":412}," 0.48",[215,1891,1892],{"class":225},", colB?.z ",[215,1894,1407],{"class":221},[215,1896,1897],{"class":412}," 0.85",[215,1899,1900],{"class":225},", colB?.w ",[215,1902,1407],{"class":221},[215,1904,1856],{"class":412},[215,1906,1866],{"class":225},[215,1908,1910,1913,1916,1919,1922,1924,1926,1928,1931,1933,1935,1938,1940,1942,1945,1947,1950,1953],{"class":217,"line":1909},101,[215,1911,1912],{"class":225},"          count, trails: Math.",[215,1914,1915],{"class":466},"min",[215,1917,1918],{"class":225},"(Math.",[215,1920,1921],{"class":466},"max",[215,1923,742],{"class":225},[215,1925,1623],{"class":466},[215,1927,742],{"class":225},[215,1929,1930],{"class":232},"'trails'",[215,1932,415],{"class":225},[215,1934,1194],{"class":412},[215,1936,1937],{"class":225},"), ",[215,1939,1194],{"class":412},[215,1941,1937],{"class":225},[215,1943,1944],{"class":412},"1",[215,1946,962],{"class":225},[215,1948,1949],{"class":221},"*",[215,1951,1952],{"class":412}," 0.92",[215,1954,888],{"class":225},[215,1956,1958,1961,1963,1966,1969],{"class":217,"line":1957},102,[215,1959,1960],{"class":225},"          dt, aspect, domainX: Math.",[215,1962,1921],{"class":466},[215,1964,1965],{"class":225},"(aspect, ",[215,1967,1968],{"class":412},"0.01",[215,1970,1866],{"class":225},[215,1972,1974,1977,1979,1982],{"class":217,"line":1973},103,[215,1975,1976],{"class":225},"          maxSpeed, maxForce: maxSpeed ",[215,1978,1949],{"class":221},[215,1980,1981],{"class":412}," 3.5",[215,1983,888],{"class":225},[215,1985,1987,1990,1992],{"class":217,"line":1986},104,[215,1988,1989],{"class":225},"          perceptionSq: perception ",[215,1991,1949],{"class":221},[215,1993,1994],{"class":225}," perception,\n",[215,1996,1998,2001,2003,2006,2008,2010,2013,2015,2017],{"class":217,"line":1997},105,[215,1999,2000],{"class":225},"          sepRadiusSq: (perception ",[215,2002,1949],{"class":221},[215,2004,2005],{"class":412}," 0.5",[215,2007,962],{"class":225},[215,2009,1949],{"class":221},[215,2011,2012],{"class":225}," (perception ",[215,2014,1949],{"class":221},[215,2016,2005],{"class":412},[215,2018,1866],{"class":225},[215,2020,2022,2025,2028,2031,2033,2036,2038],{"class":217,"line":2021},106,[215,2023,2024],{"class":225},"          sepW: ",[215,2026,2027],{"class":412},"1.7",[215,2029,2030],{"class":225},", aliW: ",[215,2032,862],{"class":412},[215,2034,2035],{"class":225},", cohW: ",[215,2037,1944],{"class":412},[215,2039,888],{"class":225},[215,2041,2043,2046,2048,2051,2053],{"class":217,"line":2042},107,[215,2044,2045],{"class":225},"          cursorX: pointerX ",[215,2047,1949],{"class":221},[215,2049,2050],{"class":225}," aspect, cursorY: pointerY, cursorMode: ",[215,2052,1183],{"class":412},[215,2054,888],{"class":225},[215,2056,2058,2061,2064,2067,2069,2071,2074],{"class":217,"line":2057},108,[215,2059,2060],{"class":225},"          cursorRadius: ",[215,2062,2063],{"class":412},"0.22",[215,2065,2066],{"class":225},", cursorRadiusSq: ",[215,2068,2063],{"class":412},[215,2070,668],{"class":221},[215,2072,2073],{"class":412}," 0.22",[215,2075,888],{"class":225},[215,2077,2079,2082,2084,2086,2089,2091,2093,2095,2097,2100,2102,2105],{"class":217,"line":2078},109,[215,2080,2081],{"class":225},"          cursorForce: ",[215,2083,1623],{"class":466},[215,2085,742],{"class":225},[215,2087,2088],{"class":232},"'cursorStrength'",[215,2090,415],{"class":225},[215,2092,862],{"class":412},[215,2094,962],{"class":225},[215,2096,1949],{"class":221},[215,2098,2099],{"class":225}," maxSpeed ",[215,2101,1949],{"class":221},[215,2103,2104],{"class":412}," 12",[215,2106,888],{"class":225},[215,2108,2110,2113,2115,2117,2119,2121,2123,2125,2128,2130,2132,2134,2137,2139,2142,2144,2146,2148,2151,2154],{"class":217,"line":2109},110,[215,2111,2112],{"class":225},"          bodyR: Math.",[215,2114,1915],{"class":466},[215,2116,1918],{"class":225},[215,2118,1921],{"class":466},[215,2120,742],{"class":225},[215,2122,1623],{"class":466},[215,2124,742],{"class":225},[215,2126,2127],{"class":232},"'size'",[215,2129,415],{"class":225},[215,2131,862],{"class":412},[215,2133,1937],{"class":225},[215,2135,2136],{"class":412},"0.5",[215,2138,1937],{"class":225},[215,2140,2141],{"class":412},"3",[215,2143,962],{"class":225},[215,2145,1949],{"class":221},[215,2147,1410],{"class":412},[215,2149,2150],{"class":221}," \u002F",[215,2152,2153],{"class":412}," SIZE_REF_RES",[215,2155,888],{"class":225},[215,2157,2159,2162,2165,2168,2170,2173],{"class":217,"line":2158},111,[215,2160,2161],{"class":225},"          margin: ",[215,2163,2164],{"class":412},"0.07",[215,2166,2167],{"class":225},", turnForce: maxSpeed ",[215,2169,1949],{"class":221},[215,2171,2172],{"class":412}," 2.2",[215,2174,888],{"class":225},[215,2176,2178,2181,2183,2185,2188,2190,2192],{"class":217,"line":2177},112,[215,2179,2180],{"class":225},"          seed: ",[215,2182,1623],{"class":466},[215,2184,742],{"class":225},[215,2186,2187],{"class":232},"'seed'",[215,2189,415],{"class":225},[215,2191,1194],{"class":412},[215,2193,1866],{"class":225},[215,2195,2197],{"class":217,"line":2196},113,[215,2198,2199],{"class":225},"        })\n",[215,2201,2203,2206,2208,2210,2213,2215,2217,2219,2221,2223],{"class":217,"line":2202},114,[215,2204,2205],{"class":221},"        return",[215,2207,1615],{"class":225},[215,2209,188],{"class":466},[215,2211,2212],{"class":225},"({count, reseed: ",[215,2214,1623],{"class":466},[215,2216,742],{"class":225},[215,2218,2187],{"class":232},[215,2220,415],{"class":225},[215,2222,1194],{"class":412},[215,2224,2225],{"class":225},")})\n",[215,2227,2229],{"class":217,"line":2228},115,[215,2230,1505],{"class":225},[215,2232,2234],{"class":217,"line":2233},116,[215,2235,1511],{"class":225},[215,2237,2239,2242,2244,2247,2250],{"class":217,"line":2238},117,[215,2240,2241],{"class":225},"    fragment: {output: ",[215,2243,1312],{"class":232},[215,2245,2246],{"class":225},", fallback: ",[215,2248,2249],{"class":232},"'transparent'",[215,2251,626],{"class":225},[215,2253,2255],{"class":217,"line":2254},118,[215,2256,2257],{"class":225},"  }),\n",[215,2259,2261],{"class":217,"line":2260},119,[215,2262,482],{"class":225},[235,2264,2266],{"id":2265},"types","Types",[240,2268,2269,2279],{},[243,2270,2271],{},[246,2272,2273,2276],{},[249,2274,2275],{},"Type",[249,2277,2278],{},"What it is",[256,2280,2281,2294,2304,2314,2327],{},[246,2282,2283,2288],{},[261,2284,2285],{},[10,2286,2287],{},"AgentSimBaked",[261,2289,2290,2291,2293],{},"What ",[10,2292,200],{}," returns: the steps, their order, and anything the frame needs from composition.",[246,2295,2296,2301],{},[261,2297,2298],{},[10,2299,2300],{},"AgentSimConfig",[261,2302,2303],{},"What an agent simulation declares: its state layout, its values, its count, its output, and the bake, frame and fragment halves.",[246,2305,2306,2311],{},[261,2307,2308],{},[10,2309,2310],{},"AgentSimFragmentConfig",[261,2312,2313],{},"How the layer samples the simulation's picture.",[246,2315,2316,2321],{},[261,2317,2318],{},[10,2319,2320],{},"AgentSimSpread",[261,2322,2323,2324,2326],{},"The two halves ",[10,2325,149],{}," adds to a definition: the simulation and the fragment that samples it.",[246,2328,2329,2334],{},[261,2330,2331],{},[10,2332,2333],{},"RenderAgentsPipelines",[261,2335,2336,2337,2340,2341,2344],{},"The two draw steps every agent frame ends with: ",[10,2338,2339],{},"splat"," draws the agents, ",[10,2342,2343],{},"resolve"," turns the drawing into the output picture.",[235,2346,2348],{"id":2347},"words","Words",[2350,2351,2353],"primitive-words",{":words":2352},"[{\"name\":\"agentSim\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fsim-agents\u002Fagentsim\",\"summary\":\"A simulation of many agents, spread into a definition: `bake` assembles the steps from your declared parts, `frame` writes the per-frame values, and the fragment samples the picture.\"},{\"name\":\"renderAgents\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fsim-agents\u002Frenderagents\",\"summary\":\"How the agents are drawn, as one declared part: a splat (each agent stamps its shape into a shared canvas) paired with the matching resolve (the canvas becomes the output picture).\"},{\"name\":\"renderAgents.orientedWorld\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fsim-agents\u002Frenderagents-orientedworld\",\"summary\":\"Agents with a heading, drawn as a shape pointing the way they move (or the way they are turned), colored from a rest color to an excited color.\"},{\"name\":\"renderAgents.pointWorld\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fsim-agents\u002Frenderagents-pointworld\",\"summary\":\"Round motes with no heading, drawn in one tint with a live softness.\"},{\"name\":\"renderAgents.volume\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fsim-agents\u002Frenderagents-volume\",\"summary\":\"A 3D swarm seen in perspective: nearer particles draw larger and brighter, and the color runs from rest to excited with speed.\"},{\"name\":\"renderAgents.relief\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fsim-agents\u002Frenderagents-relief\",\"summary\":\"Particles standing on an image, seen through a camera: each carries the child's color at its home, and nearer particles win the color where they overlap.\"}]",[2354,2355,2356,2370,2377,2384,2391,2398],"ul",{},[2357,2358,2359,2363,2364,2366,2367,2369],"li",{},[144,2360,2361],{"href":146},[10,2362,149],{}," — A simulation of many agents, spread into a definition: ",[10,2365,200],{}," assembles the steps from your declared parts, ",[10,2368,188],{}," writes the per-frame values, and the fragment samples the picture.",[2357,2371,2372,2376],{},[144,2373,2374],{"href":181},[10,2375,184],{}," — How the agents are drawn, as one declared part: a splat (each agent stamps its shape into a shared canvas) paired with the matching resolve (the canvas becomes the output picture).",[2357,2378,2379,2383],{},[144,2380,2381],{"href":285},[10,2382,288],{}," — Agents with a heading, drawn as a shape pointing the way they move (or the way they are turned), colored from a rest color to an excited color.",[2357,2385,2386,2390],{},[144,2387,2388],{"href":298},[10,2389,301],{}," — Round motes with no heading, drawn in one tint with a live softness.",[2357,2392,2393,2397],{},[144,2394,2395],{"href":311},[10,2396,314],{}," — A 3D swarm seen in perspective: nearer particles draw larger and brighter, and the color runs from rest to excited with speed.",[2357,2399,2400,2404],{},[144,2401,2402],{"href":324},[10,2403,327],{}," — Particles standing on an image, seen through a camera: each carries the child's color at its home, and nearer particles win the color where they overlap.",[2406,2407,2408],"style",{},"html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .s9osk, html code.shiki .s9osk{--shiki-default:#FFAB70}",{"title":211,"searchDepth":370,"depth":370,"links":2410},[2411,2412,2413,2414],{"id":237,"depth":370,"text":238},{"id":350,"depth":370,"text":351},{"id":2265,"depth":370,"text":2266},{"id":2347,"depth":370,"text":2348},"sim.agents","sim-agents",null,"Thousands of small things that move: flocks, motes, filings, swarms, particles standing on an image.","https:\u002F\u002Fgithub.com\u002Fshader-effects-inc\u002Fshaders\u002Fedit\u002Fmain\u002Fpackages\u002Fcore\u002Fdocs\u002Fstd\u002Fsim.agents.md","md","simulation","Simulation",{},"\u002Fdocs\u002Fprimitives\u002Fsim-agents",{"title":131,"description":2418},"https:\u002F\u002Fgithub.com\u002Fshader-effects-inc\u002Fshaders\u002Fblob\u002Fmain\u002Fpackages\u002Fcore\u002Fsrc\u002Fstd\u002Fsim\u002Fagents.ts","docs\u002Fprimitives\u002F40.sim-agents\u002Findex","Pe9SOKpv5H1Y1vP9HMnyB5xc2MBR2kP5-mzM-UX2_7k"]