Shaders

https://shaders.com/docs
Admin
Shaders is a library or tool providing documentation and integration for various front-end...
Tokens:716,515
Snippets:8,094
Trust Score:6.7
Update:2 days ago
Show doc for...
Tokens:
Raw
### Using createShader in JavaScript

Source: https://shaders.com/docs/guide/custom-shaders

Example of initializing a shader setup using preset JSON and passing component definitions.

```javascript
import {createShader} from 'shaders/js'
import {MyGradient} from './my-gradient'

// Preset JSON names components by `type`; pass yours so the name resolves
await createShader(document.querySelector('canvas'), {
  components: [
    {type: 'Blur', props: {intensity: 8}, children: [
      {type: 'MyGradient', props: {colorA: '#ffffff'}},
    ]},
  ],
}, {components: [MyGradient]})
```

--------------------------------

### Magnetic Filings Simulation Setup

Source: https://shaders.com/docs/primitives/sim-agentforces

This example demonstrates the initialization of a simulation layout, physics integration for orientation, and rendering of oriented agents.

```typescript
import {defineShader, sim, transformColor} from 'shaders/std'
import {tgpu, d, agents} from '@coreroot/gpu/kit'
import {makeCpuValueGetter, readAgentFrame, resolveRenderRes, SIZE_REF_RES} from '@coreroot/gpu/porters'

const {agentSim, renderAgents, torque, field, integrator, agentFrame} = sim.agents

const MAX_FILINGS = 12288
const RES = resolveRenderRes({desktop: 1024, mobile: 768})
const OVERSCAN = 0.14

// The values the torques, the field and the home read each frame.
const SimParams = d.struct({
  colA: d.vec4f, colB: d.vec4f,
  count: d.f32,
  dt: d.f32, aspect: d.f32, domainX: d.f32,
  cursorX: d.f32, cursorY: d.f32, axisX: d.f32, axisY: d.f32,
  fieldType: d.f32, restMode: d.f32,
  strength: d.f32, reachSq: d.f32,
  alignK: d.f32, damping: d.f32, restK: d.f32, pullK: d.f32, homeK: d.f32,
  omegaRef: d.f32, agitCool: d.f32,
  gridCols: d.f32, cellW: d.f32, cellH: d.f32, jitter: d.f32,
  bodyR: d.f32,
})
// Per-agent state (offset from home, angle, spin), excitement, the two canvases, the output.
const simLayout = tgpu.bindGroupLayout({
  agents: {storage: d.arrayOf(d.vec4f, MAX_FILINGS), access: 'mutable'},
  agit: {storage: d.arrayOf(d.f32, MAX_FILINGS), access: 'mutable'},
  accumE: {storage: d.arrayOf(d.atomic(d.u32), RES * RES), access: 'mutable'},
  accumS: {storage: d.arrayOf(d.atomic(d.u32), RES * RES), access: 'mutable'},
  params: {uniform: SimParams},
  outTex: {storageTexture: d.textureStorage2d('rgba16float', 'write-only')},
})

const filingsInit = agents.makeRestingDirectorInit(simLayout, 'filingsInit')

// The physics: every filing rests on a jittered grid, samples the magnet at the cursor, and
// swings onto its field line, with a weak pull back to its rest angle where the field is faint.
const filingsHome = field.jitteredGridHome(simLayout, {overscan: OVERSCAN})
const filingsUpdate = integrator.orientation2d(simLayout, {
  home: filingsHome,
  fieldAt: field.dipoleOrRadial(simLayout),
  torques: [torque.alignToField(simLayout), torque.rest(simLayout)],
  maxOffset: 0.12,
  name: 'filingsUpdate',
})

// The look: slivers drawn along each filing's own angle, colored calm to excited.
const filingsRender = renderAgents.orientedWorld(simLayout, {
  shape: 'streak', res: RES, splatRCap: 14, heading: 'angle', agitation: 'buffer', comet: false, home: filingsHome,
  ramp: {colorSpace: 2, trails: 'none'},
  names: {splat: 'filingsSplat', resolve: 'filingsResolve'},
})
```

--------------------------------

### Install skill during project setup

Source: https://shaders.com/docs/guide/agent-skill

Use this command to add the Shaders skill while simultaneously setting up your project.

```bash
npx shaders connect
```

--------------------------------

### Preview and install shaders

Source: https://shaders.com/docs/guide/cli

Preview a shader in the browser and install it into your project.

```bash
npx shaders preview offsets-1
npx shaders install offsets-1
```

--------------------------------

### channel.saturation usage example

Source: https://shaders.com/docs/primitives/sim-agentforces/channel-saturation

Example showing how to assign the saturation channel.

```text
channel: channel.saturation
```

--------------------------------

### Run the Shaders CLI guided flow

Source: https://shaders.com/docs/guide/cli

Execute the CLI without arguments to start the interactive guided flow for project setup and shader management.

```bash
npx shaders
```

--------------------------------

### op.readyWhen usage example

Source: https://shaders.com/docs/primitives/sim-grids/op-readywhen

An example of using op.readyWhen to wait for a lumaReady condition.

```javascript
op.readyWhen(() => lumaReady)
```

--------------------------------

### easeIn usage example

Source: https://shaders.com/docs/primitives/motion/easein

Example showing how to apply motion.easeIn to a progress variable.

```javascript
const grow = motion.easeIn(progress)
```

--------------------------------

### sphereFrame usage example

Source: https://shaders.com/docs/primitives/effects-blurs/sphereframe

An example of initializing sphereFrame with parameters provided by p().

```javascript
const sphere = sphereFrame({center: p('center'), radius: p('radius'), depth: p('depth')})
```

--------------------------------

### Simulation configuration example

Source: https://shaders.com/docs/primitives/simulate/op

Example showing how to configure step and derive properties using op operations.

```javascript
step: [op.wave({damping: p('decay')}), op.splat({at: pointer({teleportGuard: 'on'}), amount: pointerSpeed({max: 2}), radius: p('radius')})],
derive: {displacement: op.gradient()},
```

--------------------------------

### viewRay usage example

Source: https://shaders.com/docs/primitives/materials/viewray

Example of calling viewRay with params and field to get the view direction.

```typescript
const view = viewRay(params, field)

```

--------------------------------

### glyphFor usage example

Source: https://shaders.com/docs/primitives/effects-stylize/glyphfor

An example of initializing glyphFor with grid, cell, gamma, and an atlas setup function.

```typescript
glyph: glyphFor({grid, cell, gamma: p('gamma'), atlas: setupGlyphAtlas})
```

--------------------------------

### shapedSurface usage example

Source: https://shaders.com/docs/primitives/materials/shapedsurface

An example of using shapedSurface to define a material surface, starting with surfaceField and ending with guarded around insideShape.

```javascript
...shapedSurface({
  pattern: 'raw',
  surface: (frame, params) => {
    const u = params.uniforms
    const field = surfaceField(frame, params, {scale: u.scale})
    const n = geometricNormal(frame, field, {bevelWidth: u.bevelWidth, bevelShape: u.bevelShape})
    const key = keyLightAt(direction(u.lightAngle), -0.7)
    const rgb = mul(u.color.member('rgb'), lambert(n, key.member('L'), {wrap: 0.3}))
    return guarded(insideShape(field.sdf, field.pxH), vec4(rgb, silhouette(field, u.edgeSoftness)), vec4(0, 0, 0, 0))
  },
}),
```

--------------------------------

### Install skill via skills CLI

Source: https://shaders.com/docs/guide/agent-skill

Install the skill directly from the public repository using the skills CLI.

```bash
npx skills add shader-effects-inc/shaders
```

--------------------------------

### fract usage example

Source: https://shaders.com/docs/primitives/math/fract

Example of using math.fract to get the fractional part of a coordinate multiplied by a tile count, producing a value in the range 0..1 inside each tile.

```javascript
const inCell = fract(mul(uv, params.uniforms.tiles)) // 0..1 inside each tile

```

--------------------------------

### keyLightXY usage example

Source: https://shaders.com/docs/primitives/materials/keylightxy

An example of initializing a fill light using keyLightXY with negative multiplication for the x component.

```javascript
const fill = keyLightXY(mul(ly, -1), lx, -0.4, 'fill')
```

--------------------------------

### restoreToward usage example

Source: https://shaders.com/docs/primitives/sim-fluids/restoretoward

Example of how to include restoreToward within a solve configuration using a color restore kernel.

```text
solve: [restoreToward(colorRestoreKernel)]
```

--------------------------------

### Get registered shader names

Source: https://shaders.com/docs/primitives/define/getregisteredshaders

Example showing how to retrieve the names of all registered shaders by mapping over the array returned by getRegisteredShaders.

```javascript
const names = getRegisteredShaders().map((d) => d.name)
```

--------------------------------

### Registering a shader and creating a shader instance

Source: https://shaders.com/docs/primitives/define/registershader

Example showing how to import and register a shader, then use it within a createShader call via its name.

```javascript
import {createShader} from 'shaders/js'
import {Halo} from './halo'

registerShader(Halo)
const shader = await createShader(canvas, {components: [{type: 'Halo', props: {bands: 6}}]})
```

--------------------------------

### Using CustomShader in Vue

Source: https://shaders.com/docs/guide/custom-shaders

Example of nesting a CustomShader within a Blur component using Vue's script setup syntax.

```vue-html
<script setup>
import {Shader, CustomShader, Blur} from 'shaders/vue'
import {MyGradient} from './my-gradient'
</script>

<template>
  <Shader>
    <Blur :intensity="8">
      <CustomShader :src="MyGradient" color-a="#ffffff" />
    </Blur>
  </Shader>
</template>
```

--------------------------------

### keyLightAt usage example

Source: https://shaders.com/docs/primitives/materials/keylightat

An example of initializing a key light using a direction vector and a negative elevation value.

```typescript
const key = keyLightAt(direction(u.lightAngle), -0.7)
```

--------------------------------

### Connect and install shaders in CI

Source: https://shaders.com/docs/guide/cli

Use these commands in scripts or CI environments to connect a project and install a specific library shader.

```bash
npx shaders connect
npx shaders install offsets-1
```

--------------------------------

### Using placementPoint to get light position in shape coordinates

Source: https://shaders.com/docs/primitives/materials/placementpoint

Example usage of placementPoint to transform the light position into the shape's own coordinates, allowing comparison with the field.

```typescript
const lightUV = placementPoint(params, params.uniforms.lightPosition)

```

--------------------------------

### Define a Spotlight shader using invoke primitives

Source: https://shaders.com/docs/primitives/invoke

This example demonstrates using paintFrame to get UV coordinates and uniformOf to access shader props like center, color, and radius within a paint function.

```ts
import {defineShader, p, paintFrame, uniformOf, animatedTime, math, transformColor, transformPosition} from 'shaders/std'

const {sub, mul, add, vec2, vec4, length, smoothstep, mix, sin} = math

// A spotlight: a soft disc around a draggable point that breathes on the layer's own clock.
export const Spotlight = defineShader({
  name: 'Spotlight',
  animatedTime: {speed: 'speed'},
  props: {
    colorA: {default: '#0b1026', transform: transformColor},
    colorB: {default: '#ffd27a', transform: transformColor},
    center: {default: {x: 0.5, y: 0.5}, transform: transformPosition},
    radius: {default: 0.4},
    speed: {default: 1},
  },
  paint: (params) => {
    const {uv} = paintFrame(params)
    const center = uniformOf(p('center'), params)
    const colorA = uniformOf(p('colorA'), params)
    const colorB = uniformOf(p('colorB'), params)
    // A position prop's y is stored flipped; undo it to compare with uv.
    const toCenter = sub(uv, vec2(center.member('x'), sub(1, center.member('y'))))
    const d = length(mul(toCenter, vec2(params.ctx.aspect, 1)))
    const breath = add(1, mul(0.1, sin(animatedTime(params))))
    const t = sub(1, smoothstep(0, mul(uniformOf(p('radius'), params), breath), d))
    return vec4(mix(colorA.member('rgb'), colorB.member('rgb'), t), 1)
  },
})
```

--------------------------------

### add usage example

Source: https://shaders.com/docs/primitives/math/add

An example showing how to use add to shift a noise signal from a -1 to 1 range into a 0 to 1 range.

```javascript
const lifted = add(mul(noise, 0.5), 0.5) // a −1..1 signal moved into 0..1
```

--------------------------------

### Define a Smoke Fluid Shader

Source: https://shaders.com/docs/primitives/sim-fluids

This example shows the setup for a fluid simulation using custom GPU kernels and a shader definition. It includes the definition of fluid parameters, bind group layouts, and the integration of the simulation into a shader.

```typescript
import {defineShader, p, sim, transformColor, transformPosition} from 'shaders/std'
import {tgpu, d} from '@coreroot/gpu/kit'
import {buildStableFluidsKernels, buildEmitterSplatKernel, buildFluidOutputKernel, mixExpr, vec4, ZERO} from '@coreroot/gpu/porters'
import type {GpuFragmentParams, KitTexture, Expr} from '@coreroot/gpu/porters'

const {fluidSim, splat} = sim.fluids

const N = 256
const COUNT = N * N

// The values every pass reads each frame. dt, curlStrength, velFade, dyeFade and colorDecay are the
// solver's; the rest drive the emitter and the cursor shove.
const FluidParams = d.struct({
  dt: d.f32, emitX: d.f32, emitY: d.f32, emitVelX: d.f32, emitVelY: d.f32,
  perpDirX: d.f32, perpDirY: d.f32, spreadFactor: d.f32, emitRad: d.f32, emitIntensity: d.f32,
  dyeFade: d.f32, velFade: d.f32, curlStrength: d.f32, gravity: d.f32, cursorX: d.f32, cursorY: d.f32,
  cursorVelX: d.f32, cursorVelY: d.f32, mouseActive: d.f32, mouseRadSq: d.f32, colorDecay: d.f32,
})
// The fluid's buffers, by the names the solver expects.
const fluidLayout = tgpu.bindGroupLayout({
  velA: {storage: d.arrayOf(d.vec4f, COUNT), access: 'mutable'},
  velB: {storage: d.arrayOf(d.vec4f, COUNT), access: 'mutable'},
  dyeA: {storage: d.arrayOf(d.vec4f, COUNT), access: 'mutable'},
  dyeB: {storage: d.arrayOf(d.vec4f, COUNT), access: 'mutable'},
  pressure: {storage: d.arrayOf(d.f32, COUNT), access: 'mutable'},
  divergence: {storage: d.arrayOf(d.f32, COUNT), access: 'mutable'},
  params: {uniform: FluidParams},
})
const outputLayout = tgpu.bindGroupLayout({
  dyeA: {storage: d.arrayOf(d.vec4f, COUNT), access: 'readonly'},
  outTex: {storageTexture: d.textureStorage2d('rgba16float', 'write-only')},
})

// The one pass that is this shader's own: a cone emitter at a fixed source, plus the cursor shove.
const splatKernel = buildEmitterSplatKernel(fluidLayout, {n: N, namePrefix: 'smoke', cone: true, cursorPush: true, densityGain: 8, velocityBlendGain: 3})
// Everything else is the shared solve over a density-and-age dye.
const solverKernels = buildStableFluidsKernels(fluidLayout, {n: N, namePrefix: 'smoke', boundary: 'clamped', dye: 'densityAge', dyeDissipation: true, ageAdvance: true})
const outputKernel = buildFluidOutputKernel(outputLayout, {n: N, namePrefix: 'smoke', dye: 'densityAge'})

// Smoke: fresh smoke in colorA ages toward colorB as it rises and dissipates.
export const Smoke = defineShader({
  name: 'Smoke',
  usesPointer: true,
  props: {
    colorA: {default: '#fc83f9', transform: transformColor},
    colorB: {default: '#c21c79', transform: transformColor},
    emitFrom: {default: {x: 0.5, y: 1}, transform: transformPosition},
    speed: {default: 20},
    emitRadius: {default: 0.08},
    dissipation: {default: 0.2},
    detail: {default: 25},
    mouseInfluence: {default: 0.1},
  },
  ...fluidSim(() => ({
    resolution: N,
    layout: fluidLayout, outputLayout, paramsSchema: FluidParams,
    solver: {kernels: solverKernels, jacobiIters: 10},
    output: {kernel: outputKernel, key: 'smokeTexture'},
    pointer: {minDrag: 0.0005},
    inject: [splat({kernel: splatKernel})],
    values: (f) => {
      const emit = f.getCpuValue('emitFrom') as {x: number; y: number} | undefined
      const velMag = f.num('speed', 20) * N * 0.15
      const ptr = f.ptr!
      const mouseInf = f.num('mouseInfluence', 0.1)
      const active = ptr.moving && mouseInf > 0
      const mouseRadGrid = 0.1 * N
      return {
        dt: f.dt,
        emitX: (emit?.x ?? 0.5) * N,
        emitY: (1 - (emit?.y ?? 0)) * N,
        emitVelX: 0, emitVelY: -velMag,
        perpDirX: 1, perpDirY: 0,
        spreadFactor: Math.tan(Math.PI / 6),
        emitRad: f.num('emitRadius', 0.08) * N,
        emitIntensity: 1,
        dyeFade: f.num('dissipation', 0.2),
        velFade: 0.2,
        curlStrength: f.num('detail', 25),
        gravity: 0.5,
        colorDecay: 0.4,
        cursorX: active ? ptr.x * N : 0,
        cursorY: active ? ptr.y * N : 0,
        cursorVelX: active ? ptr.dx * N * 15 * mouseInf : 0,
        cursorVelY: active ? ptr.dy * N * 15 * mouseInf : 0,
        mouseActive: active ? 1 : 0,
        mouseRadSq: mouseRadGrid * mouseRadGrid,
      }
    },
  })),
  gpu: {
    fragment: ({ctx, computeOutputs, uniforms}: GpuFragmentParams): Expr => {
      const field = computeOutputs?.smokeTexture as KitTexture | undefined
      if (!field) return ZERO // no GPU: transparent
      const s = field.sample(ctx.uv, 'linearClamp') // x = density, y = age
      const color = mixExpr(uniforms.colorA, uniforms.colorB, s.member('y'))
      return vec4(color.member('rgb'), color.member('a').mul(s.member('x')))
    },
  },
})
```

--------------------------------

### glyphTint usage example

Source: https://shaders.com/docs/primitives/effects-stylize/glyphtint

An example of how to implement glyphTint within a gpu fragment configuration.

```javascript
gpu: {fragment: glyphTint({grid, cell, glyph, alphaThreshold: p('alphaThreshold'), preserveAlpha: p('preserveAlpha')})}
```

--------------------------------

### Switch between static and dynamic props with shader.update()

Source: https://shaders.com/docs/guide/dynamic-props

JavaScript example showing how to start with a static radius, switch to an animated radius using auto-animate with ping-pong mode, and switch back to static. Uses createShader and shader.update() with component id 'c'.

```javascript
// Start with a static value
const shader = await createShader(canvas, {
  components: [
    { type: 'Circle', id: 'c', props: { radius: 0.4 } }
  ]
})

// Later: switch to animated
shader.update('c', {
  radius: {
    type: 'auto-animate',
    mode: 'ping-pong',
    outputMin: 0.2,
    outputMax: 0.7
  }
})

// Later: switch back to static
shader.update('c', { radius: 0.4 })
```

--------------------------------

### isoCubeFaces usage example

Source: https://shaders.com/docs/primitives/patterns/isocubefaces

An example showing how to initialize isoCubeFaces with a cellFrame and apply the resulting tone and wire properties to paint a cube.

```javascript
const faces = isoCubeFaces({frame: cellFrame({cells: p('cells'), rotation: p('rotation'), convention: 'clockwise'}), thickness: p('thickness'), softness: p('softness')})
// paint: opaque(mixOf(times(rgbOf(cubeColor), faces.tone), rgbOf(p('lineColor')), faces.wire))
```

--------------------------------

### layers usage example

Source: https://shaders.com/docs/primitives/compose/layers

An example demonstrating how to stack multiple layers with varying opacity, background settings, and blend modes.

```ts
const rgb = layers([
  {paint: sky, opacity: 0.6},
  {paint: stars, behind: fog.transmittance},
  {paint: glow, blend: 'screen'},
])
```

--------------------------------

### op.cache usage example

Source: https://shaders.com/docs/primitives/sim-grids/op-cache

Example usage of op.cache with a lumaPipeline.

```typescript
op.cache(() => lumaPipeline)

```

--------------------------------

### channel.luminance usage example

Source: https://shaders.com/docs/primitives/sim-agentforces/channel-luminance

An example showing the assignment of channel.luminance.

```text
channel: channel.luminance
```

--------------------------------

### Open the design editor

Source: https://shaders.com/docs/guide/cli

Launch the design editor for your connected project.

```bash
npx shaders open
```

--------------------------------

### channel.luminanceInverted Usage Example

Source: https://shaders.com/docs/primitives/sim-agentforces/channel-luminanceinverted

An example showing how to assign the channel.luminanceInverted property.

```text
channel: channel.luminanceInverted
```

--------------------------------

### stages configuration example

Source: https://shaders.com/docs/primitives/sim-grids/op

An example of defining a stages array using various op methods to control simulation flow.

```javascript
stages: [op.readyWhen(() => ready), op.values('write', (f) => paramsU.write({dt: f.dt})), op.iterate({count: () => 8, step: (i, nodes) => nodes.push(react.with(i % 2 ? groupBA : groupAB))}), op.publish(() => output)]
```

--------------------------------

### min usage example

Source: https://shaders.com/docs/primitives/math/min

An example showing how to use min to cap a brightness value at 1.

```javascript
const capped = min(brightness, 1)
```

--------------------------------

### zigzagBands usage example

Source: https://shaders.com/docs/primitives/patterns/zigzagbands

An example of initializing zigzagBands with property references.

```javascript
const bands = zigzagBands({count: p('count'), angle: p('angle'), balance: p('balance'), softness: p('softness'), offset: p('offset')})
```

--------------------------------

### additive usage example

Source: https://shaders.com/docs/primitives/light/additive

Example showing how to sum multiple light components like glare, halo, and core.

```javascript
const total = additive(glare, halo, core)
```

--------------------------------

### fractalNoise usage example

Source: https://shaders.com/docs/primitives/noise/fractalnoise

An example of how to invoke fractalNoise with property references.

```javascript
paint: fractalNoise({angle: p('angle'), detail: p('detail'), contrast: p('contrast'), octaves: p('octaves'), seed: p('seed'), space: p('colorSpace')})
```

--------------------------------

### noiseRays usage example

Source: https://shaders.com/docs/primitives/light/noiserays

An example of using noiseRays within a seamlessRadialFrame.

```javascript
coverage: withFrame(seamlessRadialFrame(p('center')), noiseRays({density: p('density'), intensity: p('intensity'), spotty: p('spotty')}))
```

--------------------------------

### Defining and using a list prop

Source: https://shaders.com/docs/primitives/lists

A complete example showing how to define a list of point lights using listPropConfig and process them in a shader using listOf and accumulate.

```javascript
import {defineShader, p, listPropConfig, paintFrame, uniformOf, listOf, accumulate, math, transformColor} from 'shaders/std'

const {sub, mul, add, div, vec2, vec4, length, clamp, splat3, local} = math

// Point lights: each item in the list adds its colored glow over a background.
export const PointLights = defineShader({
  name: 'PointLights',
  props: {
    background: {default: '#0b1026', transform: transformColor},
    lights: listPropConfig({
      maxItems: 6,
      minItems: 1,
      itemLabel: 'Light',
      item: {
        position: {kind: 'position', default: {x: 0.5, y: 0.5}, label: 'Position'},
        color: {kind: 'color', default: '#ffb347', label: 'Color'},
        intensity: {kind: 'number', default: 1, label: 'Intensity', min: 0, max: 4, step: 0.01},
      },
    }, {
      default: [
        {position: {x: 0.3, y: 0.3}, color: '#ffb347', intensity: 1},
        {position: {x: 0.7, y: 0.7}, color: '#7a5cff', intensity: 1},
      ],
      description: 'The lights, each with its own position, color and brightness',
      label: 'Lights',
      group: 'Lights',
    }),
  },
  paint: (params) => {
    const {uv} = paintFrame(params)
    const lights = listOf(params, 'lights')
    const lit = accumulate(lights, (i) => {
      const light = lights.at(i)
      const pos = light.position('position')
      // A position field's y is stored flipped; undo it to compare with uv.
      const toLight = sub(uv, vec2(pos.member('x'), sub(1, pos.member('y'))))
      const d = local(length(mul(toLight, vec2(params.ctx.aspect, 1))), 'lightDist')
      return mul(light.color('color').member('rgb'), div(mul(light.number('intensity'), 0.05), add(0.01, mul(d, d))))
    }, {zero: 'vec3f', deps: [uv], hint: 'lightSum'})
    const base = uniformOf(p('background'), params).member('rgb')
    return vec4(clamp(add(base, lit), splat3(0), splat3(1)), 1)
  },
})
```

--------------------------------

### sineStroke usage example

Source: https://shaders.com/docs/primitives/figures/sinestroke

An example of how to invoke sineStroke with its required parameters.

```javascript
paint: sineStroke({position: p('position'), angle: p('angle'), frequency: p('frequency'), amplitude: p('amplitude'), thickness: p('thickness'), softness: p('softness'), color: p('color')})
```

--------------------------------

### agentSim configuration example

Source: https://shaders.com/docs/primitives/sim-agents/agentsim

An example of configuring agentSim with layout, parameters, agent limits, and pipeline definitions for initialization, updates, and rendering.

```typescript
...agentSim<typeof SimParams>({layout: simLayout, params: SimParams, maxAgents: 4096, countCap: {desktop: 4096, mobile: 1200}, output: {key: 'outTex', name: 'boidsTexture', size: [1024, 1024], format: 'rgba16float'}, bake: ({getCpuValue}) => { const render = boidsRender(getCpuValue('agentShape') as string); return {pipelines: {init: {kernel: boidsInitKernel, threads: 'max'}, update: {kernel: boidsUpdateKernel, threads: 'agents'}, splat: render.splat, resolve: render.resolve}, initStep: 'init', program: ['update', 'splat', 'resolve']} }, frame: (sys, {getCpuValue}) => (frameParams) => { const {dt, aspect} = readAgentFrame(frameParams); const count = sys.resolveCount(getCpuValue('count') as number); sys.writeParams({...}); return sys.frame({count}) }, fragment: {output: 'boidsTexture', fallback: 'transparent'}})
```

--------------------------------

### BandedCoverage Usage Example

Source: https://shaders.com/docs/primitives/effects-reveal/bandedcoverage

Example of applying radial coverage with bands.

```text
coverage: coverage.radial(p('center')).bands(p('rings'))
```

--------------------------------

### brightnessContrast usage example

Source: https://shaders.com/docs/primitives/effects-color/brightnesscontrast

An example of applying the brightnessContrast effect with parameters.

```javascript
effect: brightnessContrast({brightness: p('brightness'), contrast: p('contrast')})
```

--------------------------------

### webcamMedia usage example

Source: https://shaders.com/docs/primitives/media/webcammedia

An example of invoking webcamMedia with fit, mirror, decode, constraints, and naturalSizeKey parameters.

```javascript
...webcamMedia({fit: p('objectFit'), mirror: p('mirror'), decode: 'srgb-linear-alpha-cut', constraints: {video: {facingMode: 'user'}}, naturalSizeKey: 'webcam'})

```

--------------------------------

### lensGhost usage example

Source: https://shaders.com/docs/primitives/light/lensghost

Example showing how to initialize a ghost effect and combine multiple ghost discs using the additive function.

```javascript
const ghost = lensGhost({intensity: p('ghostIntensity'), spread: p('ghostSpread'), chroma: p('ghostChroma')})
const ghosts = additive(ghost(flare, [0.15, 0.20, 0.30, 0.10], [1.0, 0.95, 0.90, 0.0], params), ghost(flare, [0.30, 0.12, 0.25, 0.65], [1.0, 0.85, 0.55, 2.17], params))
```

--------------------------------

### flowNoise usage example

Source: https://shaders.com/docs/primitives/warps/flownoise

An example of how to implement flowNoise within a map configuration.

```javascript
map: warps.flowNoise({strength: p('strength'), detail: p('detail'), seed: p('seed')})
```

--------------------------------

### easeInOut usage example

Source: https://shaders.com/docs/primitives/motion/easeinout

Example showing how to apply the easeInOut motion function to a progress variable.

```javascript
const glide = motion.easeInOut(progress)
```

--------------------------------

### concentricRings usage example

Source: https://shaders.com/docs/primitives/warps/concentricrings

An example of how to implement concentricRings within a map configuration.

```javascript
map: warps.concentricRings({center: p('center'), intensity: p('intensity'), rings: p('rings'), smoothness: p('smoothness'), seed: p('seed'), speedRandomness: p('speedRandomness')})
```

--------------------------------

### resolve.tint usage example

Source: https://shaders.com/docs/primitives/sim-agentrender/resolve-tint

An example of how to use resolve.tint within a kernel configuration, specifying the simulation layout and resolution settings.

```javascript
resolve: {kernel: resolve.tint(simLayout, {res: 1024, name: 'motesResolve'}), threads: 'fixed', size: [1024, 1024]}
```

--------------------------------

### Initialize pixelGrid

Source: https://shaders.com/docs/primitives/patterns/pixelgrid

Example of initializing a pixel grid using a pixelSize property reference.

```javascript
const grid = pixelGrid({size: p('pixelSize')})
```

--------------------------------

### op.pass usage example

Source: https://shaders.com/docs/primitives/sim-grids/op-pass

A basic example of calling op.pass with an update step.

```javascript
op.pass(update)
```

--------------------------------

### feedbackSim usage example

Source: https://shaders.com/docs/primitives/sim-feedback/feedbacksim

An example of configuring feedbackSim with size, format, bind groups, and a kernel step.

```javascript
...feedbackSim((params, root) => ({size: 768, format: 'rgba16float', speedProp: 'speed', paramsSchema: decoder.Params, bindGroups: ({childTexture, display, paramsBuffer}, read, write) => root.createBindGroup(decoder.layout, {src: childTexture, prev: read.state, next: write.state, display, params: paramsBuffer} as never), step: decoder.kernel, values: ({dt, localTime}) => ({time: localTime, dt, intensity: params.getCpuValue('intensity') as number})))

```

--------------------------------

### pointerToShapeLocal usage example

Source: https://shaders.com/docs/primitives/sim-agentframe/pointertoshapelocal

A basic example of calling pointerToShapeLocal with the required parameters.

```javascript
const cursor = agentFrame.pointerToShapeLocal({pointerX, pointerY, centerX, centerYv, scale, rotC, rotS, aspect})
```

--------------------------------

### fitJitteredGrid usage example

Source: https://shaders.com/docs/primitives/sim-agentframe/fitjitteredgrid

Example showing how to destructure the return values of fitJitteredGrid.

```javascript
const {cols, cellW, cellH} = agentFrame.fitJitteredGrid(count, domainX, 0.1)
```

--------------------------------

### Using channel.green in configuration

Source: https://shaders.com/docs/primitives/sim-agentforces/channel-green

Example usage of the green channel within a configuration context.

```text
channel: channel.green
```

--------------------------------

### kuwahara usage example

Source: https://shaders.com/docs/primitives/effects-stylize/kuwahara

An example of initializing the kuwahara brush with a sample position and a compile-time radius property.

```text
brush: kuwahara({at: wet, radius: p('radius')})
```

--------------------------------

### FieldSample usage example

Source: https://shaders.com/docs/primitives/sim-agentforces/fieldsample

An example of returning a FieldSample within an AgentFieldAt implementation.

```javascript
return FieldSample({rhat, strength: fieldStr, phi: std.atan2(B.y, B.x)})
```

--------------------------------

### step usage example

Source: https://shaders.com/docs/primitives/math/step

Example of using step to create a hard edge based on a uniform threshold and brightness value.

```javascript
const lit = step(params.uniforms.threshold, brightness)
```

--------------------------------

### inkPlate usage example

Source: https://shaders.com/docs/primitives/patterns/inkplate

An example of calling inkPlate with a cyan channel configuration.

```javascript
inkPlate({channel: 'cyan', screenAngle: p('cyanAngle'), ink: p('cyanColor')})
```
Tokens:
Raw