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