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