[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"guide-nav":3,"doc-\u002Fdocs\u002Fprimitives\u002Fsim-agentrender":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":2242,"categorySlug":2243,"categoryTitle":9,"curated":449,"description":2244,"editUrl":2245,"extension":2246,"group":2247,"groupTitle":2248,"kind":9,"meta":2249,"navigation":449,"path":2250,"seo":2251,"sourceUrl":2252,"stem":2253,"wordCount":597,"__hash__":2254},"primitives\u002Fdocs\u002Fprimitives\u002F43.sim-agentrender\u002Findex.md","Agent rendering",{"type":149,"value":150,"toc":2236},"minimark",[151,155,184,236,265,270,398,402,1953,1957,2093,2097,2232],[152,153,147],"h1",{"id":154},"agent-rendering",[156,157,158,159,163,164,167,168,171,172,175,176,183],"p",{},"How agents become a picture. Every agent frame ends the same way: each agent stamps its shape\ninto a shared canvas (the ",[160,161,162],"strong",{},"splat","), then one pass turns the canvas into the output picture\nand clears it for the next frame (the ",[160,165,166],{},"resolve","). ",[8,169,170],{},"renderAgents"," in ",[8,173,174],{},"sim.agents"," pairs a\nsplat with its resolve for you; reach into this module when you need another pairing, or for\nthe ",[177,178,180],"a",{"href":179},"\u002Fdocs\u002Fprimitives\u002Fsim-agentrender\u002Fpointslot",[8,181,182],{},"pointSlot"," parts that give round motes their placement, brightness and size.",[156,185,186,187,193,194,200,201,207,208,214,215,221,222,228,229,235],{},"Four splats match the four kinds of agent: ",[177,188,190],{"href":189},"\u002Fdocs\u002Fprimitives\u002Fsim-agentrender\u002Fsplat-orientedworld",[8,191,192],{},"splat.orientedWorld"," draws a shape along the\nagent's heading in canvas units; ",[177,195,197],{"href":196},"\u002Fdocs\u002Fprimitives\u002Fsim-agentrender\u002Fsplat-pointworld",[8,198,199],{},"splat.pointWorld"," draws round motes with a live softness;\n",[177,202,204],{"href":203},"\u002Fdocs\u002Fprimitives\u002Fsim-agentrender\u002Fsplat-volume",[8,205,206],{},"splat.volume"," draws a 3D swarm in perspective; ",[177,209,211],{"href":210},"\u002Fdocs\u002Fprimitives\u002Fsim-agentrender\u002Fsplat-relief",[8,212,213],{},"splat.relief"," draws particles standing on an\nimage through a camera. Three resolves close them: ",[177,216,218],{"href":217},"\u002Fdocs\u002Fprimitives\u002Fsim-agentrender\u002Fresolve-ramp",[8,219,220],{},"resolve.ramp"," colors from a rest color to\nan excited color, with optional trails; ",[177,223,225],{"href":224},"\u002Fdocs\u002Fprimitives\u002Fsim-agentrender\u002Fresolve-tint",[8,226,227],{},"resolve.tint"," gives one color an alpha from coverage;\n",[177,230,232],{"href":231},"\u002Fdocs\u002Fprimitives\u002Fsim-agentrender\u002Fresolve-weightedcolor",[8,233,234],{},"resolve.weightedColor"," averages the colors that landed, nearest first. A splat dispatches over\nthe agents; a resolve dispatches over every texel of the canvas, because it also clears it.",[237,238,243],"pre",{"className":239,"code":240,"language":241,"meta":242,"style":242},"language-ts shiki shiki-themes github-dark","import {sim} from 'shaders\u002Fstd'\n","ts","",[8,244,245],{"__ignoreMap":242},[246,247,250,254,258,261],"span",{"class":248,"line":249},"line",1,[246,251,253],{"class":252},"snl16","import",[246,255,257],{"class":256},"s95oV"," {sim} ",[246,259,260],{"class":252},"from",[246,262,264],{"class":263},"sU2Wk"," 'shaders\u002Fstd'\n",[266,267,269],"h2",{"id":268},"reach-for-it-when","Reach for it when",[271,272,273,286],"table",{},[274,275,276],"thead",{},[277,278,279,283],"tr",{},[280,281,282],"th",{},"When you need",[280,284,285],{},"Use",[287,288,289,299,325,341,356,371,386],"tbody",{},[277,290,291,295],{},[292,293,294],"td",{},"a splat and resolve paired for you",[292,296,297],{},[8,298,170],{},[277,300,301,304],{},[292,302,303],{},"motes that wander in small circles, twinkle, and vary in size",[292,305,306,312,313,312,319],{},[177,307,309],{"href":308},"\u002Fdocs\u002Fprimitives\u002Fsim-agentrender\u002Fpointslot-orbitalplace",[8,310,311],{},"pointSlot.orbitalPlace",", ",[177,314,316],{"href":315},"\u002Fdocs\u002Fprimitives\u002Fsim-agentrender\u002Fpointslot-twinklebrightness",[8,317,318],{},"pointSlot.twinkleBrightness",[177,320,322],{"href":321},"\u002Fdocs\u002Fprimitives\u002Fsim-agentrender\u002Fpointslot-presenceradius",[8,323,324],{},"pointSlot.presenceRadius",[277,326,327,330],{},[292,328,329],{},"arrows, streaks or comets along the heading",[292,331,332,336,337],{},[177,333,334],{"href":189},[8,335,192],{}," with ",[177,338,339],{"href":217},[8,340,220],{},[277,342,343,346],{},[292,344,345],{},"round motes in one color",[292,347,348,336,352],{},[177,349,350],{"href":196},[8,351,199],{},[177,353,354],{"href":224},[8,355,227],{},[277,357,358,361],{},[292,359,360],{},"a 3D swarm, nearer particles larger and brighter",[292,362,363,336,367],{},[177,364,365],{"href":203},[8,366,206],{},[177,368,369],{"href":217},[8,370,220],{},[277,372,373,376],{},[292,374,375],{},"particles carrying the child's color, nearer ones in front",[292,377,378,336,382],{},[177,379,380],{"href":210},[8,381,213],{},[177,383,384],{"href":231},[8,385,234],{},[277,387,388,391],{},[292,389,390],{},"motion trails behind the agents",[292,392,393,394],{},"the trails option of ",[177,395,396],{"href":217},[8,397,220],{},[266,399,401],{"id":400},"example","Example",[237,403,405],{"className":239,"code":404,"language":241,"meta":242,"style":242},"import {defineShader, sim, transformColor} 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, force, drift, integrator, agentFrame} = sim.agents\nconst {splat, resolve, pointSlot} = sim.agentRender\n\nconst MAX_MOTES = 8192\nconst RES = resolveRenderRes({desktop: 1024, mobile: 512})\n\nconst SimParams = d.struct({\n  color: d.vec4f,\n  count: d.f32, dt: d.f32, time: d.f32, aspect: d.f32, domainX: d.f32,\n  driftBase: d.f32, angleRad: d.f32, speedVar: d.f32, angleVarRad: d.f32,\n  randomness: d.f32, twinkle: d.f32, softness: d.f32,\n  bodyR: d.f32,\n  cursorX: d.f32, cursorY: d.f32, cursorRadSq: d.f32, cursorForce: d.f32, dragMul: d.f32,\n})\nconst simLayout = tgpu.bindGroupLayout({\n  agents: {storage: d.arrayOf(d.vec4f, MAX_MOTES), access: 'mutable'},\n  accumE: {storage: d.arrayOf(d.atomic(d.u32), RES * RES), access: 'mutable'},\n  params: {uniform: SimParams},\n  outTex: {storageTexture: d.textureStorage2d('rgba16float', 'write-only')},\n})\n\nconst motesInit = agents.makeUniformScatterInit(simLayout, 'motesInit')\nconst motesUpdate = integrator.drift2d(simLayout, {drift: drift.variedHeading(simLayout), gust: force.cursorGust(simLayout), name: 'motesUpdate'})\n\n\u002F\u002F The look, paired by hand: a point splat whose placement, brightness and size are pointSlot\n\u002F\u002F parts, closed by the tint resolve over the same canvas.\nconst motesSplat = splat.pointWorld(simLayout, {\n  shape: 'glow', res: RES,\n  place: pointSlot.orbitalPlace(simLayout, {radius: 0.035, rate: 1.4}),\n  brightness: pointSlot.twinkleBrightness(simLayout, {freq: 2}),\n  bodyRadius: pointSlot.presenceRadius(simLayout),\n  name: 'motesSplat',\n})\nconst motesResolve = resolve.tint(simLayout, {res: RES, name: 'motesResolve'})\n\n\u002F\u002F Motes: soft drifting points that twinkle and circle lazily around their path.\nexport const Motes = defineShader({\n  name: 'Motes',\n  usesPointer: true,\n  props: {\n    particleColor: {default: '#ffffff', transform: transformColor},\n    count: {default: 1200},\n    speed: {default: 0.25},\n    randomness: {default: 0.25},\n    twinkle: {default: 0.5},\n    softness: {default: 0.1},\n    particleSize: {default: 1.2},\n  },\n  ...agentSim\u003Ctypeof SimParams>({\n    layout: simLayout,\n    params: SimParams,\n    maxAgents: MAX_MOTES,\n    countCap: {desktop: MAX_MOTES, mobile: 3000},\n    output: {key: 'outTex', name: 'particleTexture', size: [RES, RES], format: 'rgba16float'},\n    bake: () => ({\n      pipelines: {\n        init: {kernel: motesInit, threads: 'max'},\n        update: {kernel: motesUpdate, threads: 'agents'},\n        splat: {kernel: motesSplat, threads: 'agents'},\n        resolve: {kernel: motesResolve, threads: 'fixed', size: [RES, RES]},\n      },\n      initStep: 'init',\n      program: ['update', 'splat', 'resolve'],\n    }),\n    frame: (sys, {getCpuValue}) => {\n      const g = makeCpuValueGetter(getCpuValue)\n      let localTime = 0\n      return (frameParams) => {\n        const {dt, aspect, pointerX, pointerY} = readAgentFrame(frameParams)\n        localTime += dt\n        const count = sys.resolveCount(g('count', 1200))\n        const col = getCpuValue('particleColor') as {x: number; y: number; z: number; w: number} | undefined\n        sys.writeParams({\n          color: d.vec4f(col?.x ?? 1, col?.y ?? 1, col?.z ?? 1, col?.w ?? 1),\n          count, dt, time: localTime, aspect, domainX: Math.max(aspect, 0.01),\n          driftBase: Math.min(Math.max(g('speed', 0.25), 0), 1.5) * 0.48,\n          angleRad: Math.PI * 1.5,\n          speedVar: 0.3,\n          angleVarRad: Math.PI \u002F 6,\n          randomness: Math.min(Math.max(g('randomness', 0.25), 0), 1),\n          twinkle: Math.min(Math.max(g('twinkle', 0.5), 0), 1),\n          softness: Math.min(Math.max(g('softness', 0.1), 0), 1),\n          bodyR: Math.min(Math.max(g('particleSize', 1.2), 0.3), 4) * 2 \u002F SIZE_REF_RES,\n          cursorX: pointerX * aspect, cursorY: pointerY,\n          cursorRadSq: 0.22 * 0.22,\n          cursorForce: 0,\n          dragMul: agentFrame.expDecay(1.1, dt),\n        })\n        return sys.frame({count})\n      }\n    },\n    fragment: {output: 'particleTexture', fallback: 'transparent'},\n  }),\n})\n",[8,406,407,418,431,444,451,493,517,522,536,565,570,589,595,601,607,613,619,625,630,648,672,703,709,732,737,742,767,803,808,815,821,840,857,881,898,910,921,926,955,960,966,985,995,1006,1012,1024,1035,1046,1056,1067,1078,1089,1095,1112,1118,1124,1134,1149,1179,1194,1200,1211,1222,1232,1252,1258,1269,1291,1297,1324,1341,1355,1374,1410,1422,1455,1525,1536,1578,1595,1643,1659,1670,1686,1722,1757,1792,1840,1851,1867,1877,1894,1900,1914,1920,1926,1942,1948],{"__ignoreMap":242},[246,408,409,411,414,416],{"class":248,"line":249},[246,410,253],{"class":252},[246,412,413],{"class":256}," {defineShader, sim, transformColor} ",[246,415,260],{"class":252},[246,417,264],{"class":263},[246,419,421,423,426,428],{"class":248,"line":420},2,[246,422,253],{"class":252},[246,424,425],{"class":256}," {tgpu, d, agents} ",[246,427,260],{"class":252},[246,429,430],{"class":263}," '@coreroot\u002Fgpu\u002Fkit'\n",[246,432,434,436,439,441],{"class":248,"line":433},3,[246,435,253],{"class":252},[246,437,438],{"class":256}," {makeCpuValueGetter, readAgentFrame, resolveRenderRes, SIZE_REF_RES} ",[246,440,260],{"class":252},[246,442,443],{"class":263}," '@coreroot\u002Fgpu\u002Fporters'\n",[246,445,447],{"class":248,"line":446},4,[246,448,450],{"emptyLinePlaceholder":449},true,"\n",[246,452,454,457,460,464,466,469,471,474,476,479,481,484,487,490],{"class":248,"line":453},5,[246,455,456],{"class":252},"const",[246,458,459],{"class":256}," {",[246,461,463],{"class":462},"sDLfK","agentSim",[246,465,312],{"class":256},[246,467,468],{"class":462},"force",[246,470,312],{"class":256},[246,472,473],{"class":462},"drift",[246,475,312],{"class":256},[246,477,478],{"class":462},"integrator",[246,480,312],{"class":256},[246,482,483],{"class":462},"agentFrame",[246,485,486],{"class":256},"} ",[246,488,489],{"class":252},"=",[246,491,492],{"class":256}," sim.agents\n",[246,494,496,498,500,502,504,506,508,510,512,514],{"class":248,"line":495},6,[246,497,456],{"class":252},[246,499,459],{"class":256},[246,501,162],{"class":462},[246,503,312],{"class":256},[246,505,166],{"class":462},[246,507,312],{"class":256},[246,509,182],{"class":462},[246,511,486],{"class":256},[246,513,489],{"class":252},[246,515,516],{"class":256}," sim.agentRender\n",[246,518,520],{"class":248,"line":519},7,[246,521,450],{"emptyLinePlaceholder":449},[246,523,525,527,530,533],{"class":248,"line":524},8,[246,526,456],{"class":252},[246,528,529],{"class":462}," MAX_MOTES",[246,531,532],{"class":252}," =",[246,534,535],{"class":462}," 8192\n",[246,537,539,541,544,546,550,553,556,559,562],{"class":248,"line":538},9,[246,540,456],{"class":252},[246,542,543],{"class":462}," RES",[246,545,532],{"class":252},[246,547,549],{"class":548},"svObZ"," resolveRenderRes",[246,551,552],{"class":256},"({desktop: ",[246,554,555],{"class":462},"1024",[246,557,558],{"class":256},", mobile: ",[246,560,561],{"class":462},"512",[246,563,564],{"class":256},"})\n",[246,566,568],{"class":248,"line":567},10,[246,569,450],{"emptyLinePlaceholder":449},[246,571,573,575,578,580,583,586],{"class":248,"line":572},11,[246,574,456],{"class":252},[246,576,577],{"class":462}," SimParams",[246,579,532],{"class":252},[246,581,582],{"class":256}," d.",[246,584,585],{"class":548},"struct",[246,587,588],{"class":256},"({\n",[246,590,592],{"class":248,"line":591},12,[246,593,594],{"class":256},"  color: d.vec4f,\n",[246,596,598],{"class":248,"line":597},13,[246,599,600],{"class":256},"  count: d.f32, dt: d.f32, time: d.f32, aspect: d.f32, domainX: d.f32,\n",[246,602,604],{"class":248,"line":603},14,[246,605,606],{"class":256},"  driftBase: d.f32, angleRad: d.f32, speedVar: d.f32, angleVarRad: d.f32,\n",[246,608,610],{"class":248,"line":609},15,[246,611,612],{"class":256},"  randomness: d.f32, twinkle: d.f32, softness: d.f32,\n",[246,614,616],{"class":248,"line":615},16,[246,617,618],{"class":256},"  bodyR: d.f32,\n",[246,620,622],{"class":248,"line":621},17,[246,623,624],{"class":256},"  cursorX: d.f32, cursorY: d.f32, cursorRadSq: d.f32, cursorForce: d.f32, dragMul: d.f32,\n",[246,626,628],{"class":248,"line":627},18,[246,629,564],{"class":256},[246,631,633,635,638,640,643,646],{"class":248,"line":632},19,[246,634,456],{"class":252},[246,636,637],{"class":462}," simLayout",[246,639,532],{"class":252},[246,641,642],{"class":256}," tgpu.",[246,644,645],{"class":548},"bindGroupLayout",[246,647,588],{"class":256},[246,649,651,654,657,660,663,666,669],{"class":248,"line":650},20,[246,652,653],{"class":256},"  agents: {storage: d.",[246,655,656],{"class":548},"arrayOf",[246,658,659],{"class":256},"(d.vec4f, ",[246,661,662],{"class":462},"MAX_MOTES",[246,664,665],{"class":256},"), access: ",[246,667,668],{"class":263},"'mutable'",[246,670,671],{"class":256},"},\n",[246,673,675,678,680,683,686,689,692,695,697,699,701],{"class":248,"line":674},21,[246,676,677],{"class":256},"  accumE: {storage: d.",[246,679,656],{"class":548},[246,681,682],{"class":256},"(d.",[246,684,685],{"class":548},"atomic",[246,687,688],{"class":256},"(d.u32), ",[246,690,691],{"class":462},"RES",[246,693,694],{"class":252}," *",[246,696,543],{"class":462},[246,698,665],{"class":256},[246,700,668],{"class":263},[246,702,671],{"class":256},[246,704,706],{"class":248,"line":705},22,[246,707,708],{"class":256},"  params: {uniform: SimParams},\n",[246,710,712,715,718,721,724,726,729],{"class":248,"line":711},23,[246,713,714],{"class":256},"  outTex: {storageTexture: d.",[246,716,717],{"class":548},"textureStorage2d",[246,719,720],{"class":256},"(",[246,722,723],{"class":263},"'rgba16float'",[246,725,312],{"class":256},[246,727,728],{"class":263},"'write-only'",[246,730,731],{"class":256},")},\n",[246,733,735],{"class":248,"line":734},24,[246,736,564],{"class":256},[246,738,740],{"class":248,"line":739},25,[246,741,450],{"emptyLinePlaceholder":449},[246,743,745,747,750,752,755,758,761,764],{"class":248,"line":744},26,[246,746,456],{"class":252},[246,748,749],{"class":462}," motesInit",[246,751,532],{"class":252},[246,753,754],{"class":256}," agents.",[246,756,757],{"class":548},"makeUniformScatterInit",[246,759,760],{"class":256},"(simLayout, ",[246,762,763],{"class":263},"'motesInit'",[246,765,766],{"class":256},")\n",[246,768,770,772,775,777,780,783,786,789,792,795,798,801],{"class":248,"line":769},27,[246,771,456],{"class":252},[246,773,774],{"class":462}," motesUpdate",[246,776,532],{"class":252},[246,778,779],{"class":256}," integrator.",[246,781,782],{"class":548},"drift2d",[246,784,785],{"class":256},"(simLayout, {drift: drift.",[246,787,788],{"class":548},"variedHeading",[246,790,791],{"class":256},"(simLayout), gust: force.",[246,793,794],{"class":548},"cursorGust",[246,796,797],{"class":256},"(simLayout), name: ",[246,799,800],{"class":263},"'motesUpdate'",[246,802,564],{"class":256},[246,804,806],{"class":248,"line":805},28,[246,807,450],{"emptyLinePlaceholder":449},[246,809,811],{"class":248,"line":810},29,[246,812,814],{"class":813},"sAwPA","\u002F\u002F The look, paired by hand: a point splat whose placement, brightness and size are pointSlot\n",[246,816,818],{"class":248,"line":817},30,[246,819,820],{"class":813},"\u002F\u002F parts, closed by the tint resolve over the same canvas.\n",[246,822,824,826,829,831,834,837],{"class":248,"line":823},31,[246,825,456],{"class":252},[246,827,828],{"class":462}," motesSplat",[246,830,532],{"class":252},[246,832,833],{"class":256}," splat.",[246,835,836],{"class":548},"pointWorld",[246,838,839],{"class":256},"(simLayout, {\n",[246,841,843,846,849,852,854],{"class":248,"line":842},32,[246,844,845],{"class":256},"  shape: ",[246,847,848],{"class":263},"'glow'",[246,850,851],{"class":256},", res: ",[246,853,691],{"class":462},[246,855,856],{"class":256},",\n",[246,858,860,863,866,869,872,875,878],{"class":248,"line":859},33,[246,861,862],{"class":256},"  place: pointSlot.",[246,864,865],{"class":548},"orbitalPlace",[246,867,868],{"class":256},"(simLayout, {radius: ",[246,870,871],{"class":462},"0.035",[246,873,874],{"class":256},", rate: ",[246,876,877],{"class":462},"1.4",[246,879,880],{"class":256},"}),\n",[246,882,884,887,890,893,896],{"class":248,"line":883},34,[246,885,886],{"class":256},"  brightness: pointSlot.",[246,888,889],{"class":548},"twinkleBrightness",[246,891,892],{"class":256},"(simLayout, {freq: ",[246,894,895],{"class":462},"2",[246,897,880],{"class":256},[246,899,901,904,907],{"class":248,"line":900},35,[246,902,903],{"class":256},"  bodyRadius: pointSlot.",[246,905,906],{"class":548},"presenceRadius",[246,908,909],{"class":256},"(simLayout),\n",[246,911,913,916,919],{"class":248,"line":912},36,[246,914,915],{"class":256},"  name: ",[246,917,918],{"class":263},"'motesSplat'",[246,920,856],{"class":256},[246,922,924],{"class":248,"line":923},37,[246,925,564],{"class":256},[246,927,929,931,934,936,939,942,945,947,950,953],{"class":248,"line":928},38,[246,930,456],{"class":252},[246,932,933],{"class":462}," motesResolve",[246,935,532],{"class":252},[246,937,938],{"class":256}," resolve.",[246,940,941],{"class":548},"tint",[246,943,944],{"class":256},"(simLayout, {res: ",[246,946,691],{"class":462},[246,948,949],{"class":256},", name: ",[246,951,952],{"class":263},"'motesResolve'",[246,954,564],{"class":256},[246,956,958],{"class":248,"line":957},39,[246,959,450],{"emptyLinePlaceholder":449},[246,961,963],{"class":248,"line":962},40,[246,964,965],{"class":813},"\u002F\u002F Motes: soft drifting points that twinkle and circle lazily around their path.\n",[246,967,969,972,975,978,980,983],{"class":248,"line":968},41,[246,970,971],{"class":252},"export",[246,973,974],{"class":252}," const",[246,976,977],{"class":462}," Motes",[246,979,532],{"class":252},[246,981,982],{"class":548}," defineShader",[246,984,588],{"class":256},[246,986,988,990,993],{"class":248,"line":987},42,[246,989,915],{"class":256},[246,991,992],{"class":263},"'Motes'",[246,994,856],{"class":256},[246,996,998,1001,1004],{"class":248,"line":997},43,[246,999,1000],{"class":256},"  usesPointer: ",[246,1002,1003],{"class":462},"true",[246,1005,856],{"class":256},[246,1007,1009],{"class":248,"line":1008},44,[246,1010,1011],{"class":256},"  props: {\n",[246,1013,1015,1018,1021],{"class":248,"line":1014},45,[246,1016,1017],{"class":256},"    particleColor: {default: ",[246,1019,1020],{"class":263},"'#ffffff'",[246,1022,1023],{"class":256},", transform: transformColor},\n",[246,1025,1027,1030,1033],{"class":248,"line":1026},46,[246,1028,1029],{"class":256},"    count: {default: ",[246,1031,1032],{"class":462},"1200",[246,1034,671],{"class":256},[246,1036,1038,1041,1044],{"class":248,"line":1037},47,[246,1039,1040],{"class":256},"    speed: {default: ",[246,1042,1043],{"class":462},"0.25",[246,1045,671],{"class":256},[246,1047,1049,1052,1054],{"class":248,"line":1048},48,[246,1050,1051],{"class":256},"    randomness: {default: ",[246,1053,1043],{"class":462},[246,1055,671],{"class":256},[246,1057,1059,1062,1065],{"class":248,"line":1058},49,[246,1060,1061],{"class":256},"    twinkle: {default: ",[246,1063,1064],{"class":462},"0.5",[246,1066,671],{"class":256},[246,1068,1070,1073,1076],{"class":248,"line":1069},50,[246,1071,1072],{"class":256},"    softness: {default: ",[246,1074,1075],{"class":462},"0.1",[246,1077,671],{"class":256},[246,1079,1081,1084,1087],{"class":248,"line":1080},51,[246,1082,1083],{"class":256},"    particleSize: {default: ",[246,1085,1086],{"class":462},"1.2",[246,1088,671],{"class":256},[246,1090,1092],{"class":248,"line":1091},52,[246,1093,1094],{"class":256},"  },\n",[246,1096,1098,1101,1103,1106,1109],{"class":248,"line":1097},53,[246,1099,1100],{"class":252},"  ...",[246,1102,463],{"class":548},[246,1104,1105],{"class":256},"\u003C",[246,1107,1108],{"class":252},"typeof",[246,1110,1111],{"class":256}," SimParams>({\n",[246,1113,1115],{"class":248,"line":1114},54,[246,1116,1117],{"class":256},"    layout: simLayout,\n",[246,1119,1121],{"class":248,"line":1120},55,[246,1122,1123],{"class":256},"    params: SimParams,\n",[246,1125,1127,1130,1132],{"class":248,"line":1126},56,[246,1128,1129],{"class":256},"    maxAgents: ",[246,1131,662],{"class":462},[246,1133,856],{"class":256},[246,1135,1137,1140,1142,1144,1147],{"class":248,"line":1136},57,[246,1138,1139],{"class":256},"    countCap: {desktop: ",[246,1141,662],{"class":462},[246,1143,558],{"class":256},[246,1145,1146],{"class":462},"3000",[246,1148,671],{"class":256},[246,1150,1152,1155,1158,1160,1163,1166,1168,1170,1172,1175,1177],{"class":248,"line":1151},58,[246,1153,1154],{"class":256},"    output: {key: ",[246,1156,1157],{"class":263},"'outTex'",[246,1159,949],{"class":256},[246,1161,1162],{"class":263},"'particleTexture'",[246,1164,1165],{"class":256},", size: [",[246,1167,691],{"class":462},[246,1169,312],{"class":256},[246,1171,691],{"class":462},[246,1173,1174],{"class":256},"], format: ",[246,1176,723],{"class":263},[246,1178,671],{"class":256},[246,1180,1182,1185,1188,1191],{"class":248,"line":1181},59,[246,1183,1184],{"class":548},"    bake",[246,1186,1187],{"class":256},": () ",[246,1189,1190],{"class":252},"=>",[246,1192,1193],{"class":256}," ({\n",[246,1195,1197],{"class":248,"line":1196},60,[246,1198,1199],{"class":256},"      pipelines: {\n",[246,1201,1203,1206,1209],{"class":248,"line":1202},61,[246,1204,1205],{"class":256},"        init: {kernel: motesInit, threads: ",[246,1207,1208],{"class":263},"'max'",[246,1210,671],{"class":256},[246,1212,1214,1217,1220],{"class":248,"line":1213},62,[246,1215,1216],{"class":256},"        update: {kernel: motesUpdate, threads: ",[246,1218,1219],{"class":263},"'agents'",[246,1221,671],{"class":256},[246,1223,1225,1228,1230],{"class":248,"line":1224},63,[246,1226,1227],{"class":256},"        splat: {kernel: motesSplat, threads: ",[246,1229,1219],{"class":263},[246,1231,671],{"class":256},[246,1233,1235,1238,1241,1243,1245,1247,1249],{"class":248,"line":1234},64,[246,1236,1237],{"class":256},"        resolve: {kernel: motesResolve, threads: ",[246,1239,1240],{"class":263},"'fixed'",[246,1242,1165],{"class":256},[246,1244,691],{"class":462},[246,1246,312],{"class":256},[246,1248,691],{"class":462},[246,1250,1251],{"class":256},"]},\n",[246,1253,1255],{"class":248,"line":1254},65,[246,1256,1257],{"class":256},"      },\n",[246,1259,1261,1264,1267],{"class":248,"line":1260},66,[246,1262,1263],{"class":256},"      initStep: ",[246,1265,1266],{"class":263},"'init'",[246,1268,856],{"class":256},[246,1270,1272,1275,1278,1280,1283,1285,1288],{"class":248,"line":1271},67,[246,1273,1274],{"class":256},"      program: [",[246,1276,1277],{"class":263},"'update'",[246,1279,312],{"class":256},[246,1281,1282],{"class":263},"'splat'",[246,1284,312],{"class":256},[246,1286,1287],{"class":263},"'resolve'",[246,1289,1290],{"class":256},"],\n",[246,1292,1294],{"class":248,"line":1293},68,[246,1295,1296],{"class":256},"    }),\n",[246,1298,1300,1303,1306,1310,1313,1316,1319,1321],{"class":248,"line":1299},69,[246,1301,1302],{"class":548},"    frame",[246,1304,1305],{"class":256},": (",[246,1307,1309],{"class":1308},"s9osk","sys",[246,1311,1312],{"class":256},", {",[246,1314,1315],{"class":1308},"getCpuValue",[246,1317,1318],{"class":256},"}) ",[246,1320,1190],{"class":252},[246,1322,1323],{"class":256}," {\n",[246,1325,1327,1330,1333,1335,1338],{"class":248,"line":1326},70,[246,1328,1329],{"class":252},"      const",[246,1331,1332],{"class":462}," g",[246,1334,532],{"class":252},[246,1336,1337],{"class":548}," makeCpuValueGetter",[246,1339,1340],{"class":256},"(getCpuValue)\n",[246,1342,1344,1347,1350,1352],{"class":248,"line":1343},71,[246,1345,1346],{"class":252},"      let",[246,1348,1349],{"class":256}," localTime ",[246,1351,489],{"class":252},[246,1353,1354],{"class":462}," 0\n",[246,1356,1358,1361,1364,1367,1370,1372],{"class":248,"line":1357},72,[246,1359,1360],{"class":252},"      return",[246,1362,1363],{"class":256}," (",[246,1365,1366],{"class":1308},"frameParams",[246,1368,1369],{"class":256},") ",[246,1371,1190],{"class":252},[246,1373,1323],{"class":256},[246,1375,1377,1380,1382,1385,1387,1390,1392,1395,1397,1400,1402,1404,1407],{"class":248,"line":1376},73,[246,1378,1379],{"class":252},"        const",[246,1381,459],{"class":256},[246,1383,1384],{"class":462},"dt",[246,1386,312],{"class":256},[246,1388,1389],{"class":462},"aspect",[246,1391,312],{"class":256},[246,1393,1394],{"class":462},"pointerX",[246,1396,312],{"class":256},[246,1398,1399],{"class":462},"pointerY",[246,1401,486],{"class":256},[246,1403,489],{"class":252},[246,1405,1406],{"class":548}," readAgentFrame",[246,1408,1409],{"class":256},"(frameParams)\n",[246,1411,1413,1416,1419],{"class":248,"line":1412},74,[246,1414,1415],{"class":256},"        localTime ",[246,1417,1418],{"class":252},"+=",[246,1420,1421],{"class":256}," dt\n",[246,1423,1425,1427,1430,1432,1435,1438,1440,1443,1445,1448,1450,1452],{"class":248,"line":1424},75,[246,1426,1379],{"class":252},[246,1428,1429],{"class":462}," count",[246,1431,532],{"class":252},[246,1433,1434],{"class":256}," sys.",[246,1436,1437],{"class":548},"resolveCount",[246,1439,720],{"class":256},[246,1441,1442],{"class":548},"g",[246,1444,720],{"class":256},[246,1446,1447],{"class":263},"'count'",[246,1449,312],{"class":256},[246,1451,1032],{"class":462},[246,1453,1454],{"class":256},"))\n",[246,1456,1458,1460,1463,1465,1468,1470,1473,1475,1478,1480,1483,1486,1489,1492,1495,1497,1499,1501,1504,1506,1508,1510,1513,1515,1517,1519,1522],{"class":248,"line":1457},76,[246,1459,1379],{"class":252},[246,1461,1462],{"class":462}," col",[246,1464,532],{"class":252},[246,1466,1467],{"class":548}," getCpuValue",[246,1469,720],{"class":256},[246,1471,1472],{"class":263},"'particleColor'",[246,1474,1369],{"class":256},[246,1476,1477],{"class":252},"as",[246,1479,459],{"class":256},[246,1481,1482],{"class":1308},"x",[246,1484,1485],{"class":252},":",[246,1487,1488],{"class":462}," number",[246,1490,1491],{"class":256},"; ",[246,1493,1494],{"class":1308},"y",[246,1496,1485],{"class":252},[246,1498,1488],{"class":462},[246,1500,1491],{"class":256},[246,1502,1503],{"class":1308},"z",[246,1505,1485],{"class":252},[246,1507,1488],{"class":462},[246,1509,1491],{"class":256},[246,1511,1512],{"class":1308},"w",[246,1514,1485],{"class":252},[246,1516,1488],{"class":462},[246,1518,486],{"class":256},[246,1520,1521],{"class":252},"|",[246,1523,1524],{"class":462}," undefined\n",[246,1526,1528,1531,1534],{"class":248,"line":1527},77,[246,1529,1530],{"class":256},"        sys.",[246,1532,1533],{"class":548},"writeParams",[246,1535,588],{"class":256},[246,1537,1539,1542,1545,1548,1551,1554,1557,1559,1561,1564,1566,1568,1571,1573,1575],{"class":248,"line":1538},78,[246,1540,1541],{"class":256},"          color: d.",[246,1543,1544],{"class":548},"vec4f",[246,1546,1547],{"class":256},"(col?.x ",[246,1549,1550],{"class":252},"??",[246,1552,1553],{"class":462}," 1",[246,1555,1556],{"class":256},", col?.y ",[246,1558,1550],{"class":252},[246,1560,1553],{"class":462},[246,1562,1563],{"class":256},", col?.z ",[246,1565,1550],{"class":252},[246,1567,1553],{"class":462},[246,1569,1570],{"class":256},", col?.w ",[246,1572,1550],{"class":252},[246,1574,1553],{"class":462},[246,1576,1577],{"class":256},"),\n",[246,1579,1581,1584,1587,1590,1593],{"class":248,"line":1580},79,[246,1582,1583],{"class":256},"          count, dt, time: localTime, aspect, domainX: Math.",[246,1585,1586],{"class":548},"max",[246,1588,1589],{"class":256},"(aspect, ",[246,1591,1592],{"class":462},"0.01",[246,1594,1577],{"class":256},[246,1596,1598,1601,1604,1607,1609,1611,1613,1615,1618,1620,1622,1625,1628,1630,1633,1635,1638,1641],{"class":248,"line":1597},80,[246,1599,1600],{"class":256},"          driftBase: Math.",[246,1602,1603],{"class":548},"min",[246,1605,1606],{"class":256},"(Math.",[246,1608,1586],{"class":548},[246,1610,720],{"class":256},[246,1612,1442],{"class":548},[246,1614,720],{"class":256},[246,1616,1617],{"class":263},"'speed'",[246,1619,312],{"class":256},[246,1621,1043],{"class":462},[246,1623,1624],{"class":256},"), ",[246,1626,1627],{"class":462},"0",[246,1629,1624],{"class":256},[246,1631,1632],{"class":462},"1.5",[246,1634,1369],{"class":256},[246,1636,1637],{"class":252},"*",[246,1639,1640],{"class":462}," 0.48",[246,1642,856],{"class":256},[246,1644,1646,1649,1652,1654,1657],{"class":248,"line":1645},81,[246,1647,1648],{"class":256},"          angleRad: Math.",[246,1650,1651],{"class":462},"PI",[246,1653,694],{"class":252},[246,1655,1656],{"class":462}," 1.5",[246,1658,856],{"class":256},[246,1660,1662,1665,1668],{"class":248,"line":1661},82,[246,1663,1664],{"class":256},"          speedVar: ",[246,1666,1667],{"class":462},"0.3",[246,1669,856],{"class":256},[246,1671,1673,1676,1678,1681,1684],{"class":248,"line":1672},83,[246,1674,1675],{"class":256},"          angleVarRad: Math.",[246,1677,1651],{"class":462},[246,1679,1680],{"class":252}," \u002F",[246,1682,1683],{"class":462}," 6",[246,1685,856],{"class":256},[246,1687,1689,1692,1694,1696,1698,1700,1702,1704,1707,1709,1711,1713,1715,1717,1720],{"class":248,"line":1688},84,[246,1690,1691],{"class":256},"          randomness: Math.",[246,1693,1603],{"class":548},[246,1695,1606],{"class":256},[246,1697,1586],{"class":548},[246,1699,720],{"class":256},[246,1701,1442],{"class":548},[246,1703,720],{"class":256},[246,1705,1706],{"class":263},"'randomness'",[246,1708,312],{"class":256},[246,1710,1043],{"class":462},[246,1712,1624],{"class":256},[246,1714,1627],{"class":462},[246,1716,1624],{"class":256},[246,1718,1719],{"class":462},"1",[246,1721,1577],{"class":256},[246,1723,1725,1728,1730,1732,1734,1736,1738,1740,1743,1745,1747,1749,1751,1753,1755],{"class":248,"line":1724},85,[246,1726,1727],{"class":256},"          twinkle: Math.",[246,1729,1603],{"class":548},[246,1731,1606],{"class":256},[246,1733,1586],{"class":548},[246,1735,720],{"class":256},[246,1737,1442],{"class":548},[246,1739,720],{"class":256},[246,1741,1742],{"class":263},"'twinkle'",[246,1744,312],{"class":256},[246,1746,1064],{"class":462},[246,1748,1624],{"class":256},[246,1750,1627],{"class":462},[246,1752,1624],{"class":256},[246,1754,1719],{"class":462},[246,1756,1577],{"class":256},[246,1758,1760,1763,1765,1767,1769,1771,1773,1775,1778,1780,1782,1784,1786,1788,1790],{"class":248,"line":1759},86,[246,1761,1762],{"class":256},"          softness: Math.",[246,1764,1603],{"class":548},[246,1766,1606],{"class":256},[246,1768,1586],{"class":548},[246,1770,720],{"class":256},[246,1772,1442],{"class":548},[246,1774,720],{"class":256},[246,1776,1777],{"class":263},"'softness'",[246,1779,312],{"class":256},[246,1781,1075],{"class":462},[246,1783,1624],{"class":256},[246,1785,1627],{"class":462},[246,1787,1624],{"class":256},[246,1789,1719],{"class":462},[246,1791,1577],{"class":256},[246,1793,1795,1798,1800,1802,1804,1806,1808,1810,1813,1815,1817,1819,1821,1823,1826,1828,1830,1833,1835,1838],{"class":248,"line":1794},87,[246,1796,1797],{"class":256},"          bodyR: Math.",[246,1799,1603],{"class":548},[246,1801,1606],{"class":256},[246,1803,1586],{"class":548},[246,1805,720],{"class":256},[246,1807,1442],{"class":548},[246,1809,720],{"class":256},[246,1811,1812],{"class":263},"'particleSize'",[246,1814,312],{"class":256},[246,1816,1086],{"class":462},[246,1818,1624],{"class":256},[246,1820,1667],{"class":462},[246,1822,1624],{"class":256},[246,1824,1825],{"class":462},"4",[246,1827,1369],{"class":256},[246,1829,1637],{"class":252},[246,1831,1832],{"class":462}," 2",[246,1834,1680],{"class":252},[246,1836,1837],{"class":462}," SIZE_REF_RES",[246,1839,856],{"class":256},[246,1841,1843,1846,1848],{"class":248,"line":1842},88,[246,1844,1845],{"class":256},"          cursorX: pointerX ",[246,1847,1637],{"class":252},[246,1849,1850],{"class":256}," aspect, cursorY: pointerY,\n",[246,1852,1854,1857,1860,1862,1865],{"class":248,"line":1853},89,[246,1855,1856],{"class":256},"          cursorRadSq: ",[246,1858,1859],{"class":462},"0.22",[246,1861,694],{"class":252},[246,1863,1864],{"class":462}," 0.22",[246,1866,856],{"class":256},[246,1868,1870,1873,1875],{"class":248,"line":1869},90,[246,1871,1872],{"class":256},"          cursorForce: ",[246,1874,1627],{"class":462},[246,1876,856],{"class":256},[246,1878,1880,1883,1886,1888,1891],{"class":248,"line":1879},91,[246,1881,1882],{"class":256},"          dragMul: agentFrame.",[246,1884,1885],{"class":548},"expDecay",[246,1887,720],{"class":256},[246,1889,1890],{"class":462},"1.1",[246,1892,1893],{"class":256},", dt),\n",[246,1895,1897],{"class":248,"line":1896},92,[246,1898,1899],{"class":256},"        })\n",[246,1901,1903,1906,1908,1911],{"class":248,"line":1902},93,[246,1904,1905],{"class":252},"        return",[246,1907,1434],{"class":256},[246,1909,1910],{"class":548},"frame",[246,1912,1913],{"class":256},"({count})\n",[246,1915,1917],{"class":248,"line":1916},94,[246,1918,1919],{"class":256},"      }\n",[246,1921,1923],{"class":248,"line":1922},95,[246,1924,1925],{"class":256},"    },\n",[246,1927,1929,1932,1934,1937,1940],{"class":248,"line":1928},96,[246,1930,1931],{"class":256},"    fragment: {output: ",[246,1933,1162],{"class":263},[246,1935,1936],{"class":256},", fallback: ",[246,1938,1939],{"class":263},"'transparent'",[246,1941,671],{"class":256},[246,1943,1945],{"class":248,"line":1944},97,[246,1946,1947],{"class":256},"  }),\n",[246,1949,1951],{"class":248,"line":1950},98,[246,1952,564],{"class":256},[266,1954,1956],{"id":1955},"types","Types",[271,1958,1959,1969],{},[274,1960,1961],{},[277,1962,1963,1966],{},[280,1964,1965],{},"Type",[280,1967,1968],{},"What it is",[287,1970,1971,1981,1994,2020,2030,2050,2060,2070],{},[277,1972,1973,1978],{},[292,1974,1975],{},[8,1976,1977],{},"OrientedWorldSplatConfig",[292,1979,1980],{},"How agents with a heading are drawn.",[277,1982,1983,1988],{},[292,1984,1985],{},[8,1986,1987],{},"PointWorldSplatConfig",[292,1989,1990,1991,1993],{},"How round motes are drawn: the shape, the canvas size, and the three ",[8,1992,182],{}," parts.",[277,1995,1996,2001],{},[292,1997,1998],{},[8,1999,2000],{},"PointWorldSplatLayout",[292,2002,2003,2004,2007,2008,2011,2012,2015,2016,2019],{},"What a point splat's layout must name: ",[8,2005,2006],{},"agents",", the ",[8,2009,2010],{},"accumE"," canvas, and ",[8,2013,2014],{},"params.aspect"," and ",[8,2017,2018],{},"params.softness",".",[277,2021,2022,2027],{},[292,2023,2024],{},[8,2025,2026],{},"RampResolveConfig",[292,2028,2029],{},"How the rest-to-excited color resolve behaves.",[277,2031,2032,2037],{},[292,2033,2034],{},[8,2035,2036],{},"RampResolveLayout",[292,2038,2039,2040,2043,2044,2015,2047,2019],{},"What a ramp resolve's layout must name: the two canvases, the output texture ",[8,2041,2042],{},"outTex",", and the two colors ",[8,2045,2046],{},"params.colA",[8,2048,2049],{},"params.colB",[277,2051,2052,2057],{},[292,2053,2054],{},[8,2055,2056],{},"ReliefSplatConfig",[292,2058,2059],{},"How particles standing on an image are drawn.",[277,2061,2062,2067],{},[292,2063,2064],{},[8,2065,2066],{},"VolumeSplatConfig",[292,2068,2069],{},"How a 3D swarm is drawn: the shape, the output size, the largest particle, and the reach of each particle's profile.",[277,2071,2072,2077],{},[292,2073,2074],{},[8,2075,2076],{},"WorldSplatLayout",[292,2078,2079,2080,2007,2082,2015,2084,2087,2088,2015,2090,2019],{},"What an oriented splat's layout must name: ",[8,2081,2006],{},[8,2083,2010],{},[8,2085,2086],{},"accumS"," canvases, and ",[8,2089,2014],{},[8,2091,2092],{},"params.bodyR",[266,2094,2096],{"id":2095},"words","Words",[2098,2099,2101],"primitive-words",{":words":2100},"[{\"name\":\"pointSlot\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fsim-agentrender\u002Fpointslot\",\"summary\":\"The three parts a round mote is drawn with: where it sits (`orbitalPlace`), how bright it is (`twinkleBrightness`) and how big it is (`presenceRadius`).\"},{\"name\":\"pointSlot.orbitalPlace\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fsim-agentrender\u002Fpointslot-orbitalplace\",\"summary\":\"The mote's drawn position: its stored position plus a slow circle of `radius` (canvas heights) at `rate` turns per second, both scaled by `params.randomness` and varied per mote.\"},{\"name\":\"pointSlot.twinkleBrightness\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fsim-agentrender\u002Fpointslot-twinklebrightness\",\"summary\":\"The mote's brightness: a twinkle at `freq` cycles per second, blended in by `params.twinkle` (0 steady, 1 full shimmer), times a per-mote presence so some motes read nearer than others.\"},{\"name\":\"pointSlot.presenceRadius\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fsim-agentrender\u002Fpointslot-presenceradius\",\"summary\":\"The mote's size: `params.bodyR` scaled by the same per-mote presence as the brightness, so the motes that read nearer are bigger and brighter together.\"},{\"name\":\"splat\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fsim-agentrender\u002Fsplat\",\"summary\":\"The step that draws every agent into the shared canvas, one variant per kind of agent.\"},{\"name\":\"splat.orientedWorld\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fsim-agentrender\u002Fsplat-orientedworld\",\"summary\":\"Agents with a heading: arrows, streaks, squares, dots or comets drawn along the way they point.\"},{\"name\":\"splat.pointWorld\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fsim-agentrender\u002Fsplat-pointworld\",\"summary\":\"Round motes with a live softness, placed, brightened and sized by `pointSlot` parts.\"},{\"name\":\"splat.volume\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fsim-agentrender\u002Fsplat-volume\",\"summary\":\"A 3D swarm in perspective, recording speed for the ramp resolve.\"},{\"name\":\"splat.relief\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fsim-agentrender\u002Fsplat-relief\",\"summary\":\"Particles standing on an image, drawn in the child's color through a camera.\"},{\"name\":\"resolve\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fsim-agentrender\u002Fresolve\",\"summary\":\"The step that turns the shared canvas into the output picture and clears it for the next frame.\"},{\"name\":\"resolve.ramp\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fsim-agentrender\u002Fresolve-ramp\",\"summary\":\"Rest-to-excited color from two colors, with optional motion trails.\"},{\"name\":\"resolve.tint\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fsim-agentrender\u002Fresolve-tint\",\"summary\":\"One color, with an alpha from coverage.\"},{\"name\":\"resolve.weightedColor\",\"path\":\"\u002Fdocs\u002Fprimitives\u002Fsim-agentrender\u002Fresolve-weightedcolor\",\"summary\":\"The average of the colors that landed, nearer particles first.\"}]",[2102,2103,2104,2121,2140,2155,2165,2173,2180,2189,2196,2203,2211,2218,2225],"ul",{},[2105,2106,2107,2111,2112,2114,2115,2117,2118,2120],"li",{},[177,2108,2109],{"href":179},[8,2110,182],{}," — The three parts a round mote is drawn with: where it sits (",[8,2113,865],{},"), how bright it is (",[8,2116,889],{},") and how big it is (",[8,2119,906],{},").",[2105,2122,2123,2127,2128,2131,2132,2135,2136,2139],{},[177,2124,2125],{"href":308},[8,2126,311],{}," — The mote's drawn position: its stored position plus a slow circle of ",[8,2129,2130],{},"radius"," (canvas heights) at ",[8,2133,2134],{},"rate"," turns per second, both scaled by ",[8,2137,2138],{},"params.randomness"," and varied per mote.",[2105,2141,2142,2146,2147,2150,2151,2154],{},[177,2143,2144],{"href":315},[8,2145,318],{}," — The mote's brightness: a twinkle at ",[8,2148,2149],{},"freq"," cycles per second, blended in by ",[8,2152,2153],{},"params.twinkle"," (0 steady, 1 full shimmer), times a per-mote presence so some motes read nearer than others.",[2105,2156,2157,2161,2162,2164],{},[177,2158,2159],{"href":321},[8,2160,324],{}," — The mote's size: ",[8,2163,2092],{}," scaled by the same per-mote presence as the brightness, so the motes that read nearer are bigger and brighter together.",[2105,2166,2167,2172],{},[177,2168,2170],{"href":2169},"\u002Fdocs\u002Fprimitives\u002Fsim-agentrender\u002Fsplat",[8,2171,162],{}," — The step that draws every agent into the shared canvas, one variant per kind of agent.",[2105,2174,2175,2179],{},[177,2176,2177],{"href":189},[8,2178,192],{}," — Agents with a heading: arrows, streaks, squares, dots or comets drawn along the way they point.",[2105,2181,2182,2186,2187,1993],{},[177,2183,2184],{"href":196},[8,2185,199],{}," — Round motes with a live softness, placed, brightened and sized by ",[8,2188,182],{},[2105,2190,2191,2195],{},[177,2192,2193],{"href":203},[8,2194,206],{}," — A 3D swarm in perspective, recording speed for the ramp resolve.",[2105,2197,2198,2202],{},[177,2199,2200],{"href":210},[8,2201,213],{}," — Particles standing on an image, drawn in the child's color through a camera.",[2105,2204,2205,2210],{},[177,2206,2208],{"href":2207},"\u002Fdocs\u002Fprimitives\u002Fsim-agentrender\u002Fresolve",[8,2209,166],{}," — The step that turns the shared canvas into the output picture and clears it for the next frame.",[2105,2212,2213,2217],{},[177,2214,2215],{"href":217},[8,2216,220],{}," — Rest-to-excited color from two colors, with optional motion trails.",[2105,2219,2220,2224],{},[177,2221,2222],{"href":224},[8,2223,227],{}," — One color, with an alpha from coverage.",[2105,2226,2227,2231],{},[177,2228,2229],{"href":231},[8,2230,234],{}," — The average of the colors that landed, nearer particles first.",[2233,2234,2235],"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":242,"searchDepth":420,"depth":420,"links":2237},[2238,2239,2240,2241],{"id":268,"depth":420,"text":269},{"id":400,"depth":420,"text":401},{"id":1955,"depth":420,"text":1956},{"id":2095,"depth":420,"text":2096},"sim.agentRender","sim-agentrender","How agents become a picture.","https:\u002F\u002Fgithub.com\u002Fshader-effects-inc\u002Fshaders\u002Fedit\u002Fmain\u002Fpackages\u002Fcore\u002Fdocs\u002Fstd\u002Fsim.agentRender.md","md","simulation","Simulation",{},"\u002Fdocs\u002Fprimitives\u002Fsim-agentrender",{"title":147,"description":2244},"https:\u002F\u002Fgithub.com\u002Fshader-effects-inc\u002Fshaders\u002Fblob\u002Fmain\u002Fpackages\u002Fcore\u002Fsrc\u002Fstd\u002Fsim\u002FagentRender.ts","docs\u002Fprimitives\u002F43.sim-agentrender\u002Findex","3JIhcwa6mfuhpBDhvsNLZJLxcTDvAsgtaNggMB7B13g"]