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