ctx

The context values as tokens: ctx.uv, ctx.time, ctx.aspect, ctx.pointer, ctx.viewportSize, ctx.logicalViewportSize.

ctx: { uv, aspect, time, viewportSize, logicalViewportSize, pointer }

Import ctx from shaders/std.

Pass one where a word takes a value, or bind it under another name in a wgsl body's inputs. uv is 0–1 across the canvas with y down. time is the global clock in seconds and never pauses; for the layer's own speed-scaled clock declare animatedTime and read time in a body or animatedTime(params) in a builder. aspect is width / height. pointer is the mouse in uv. viewportSize is the frame in device pixels, logicalViewportSize in CSS pixels.

Example

paint: wgsl({inputs: {t: ctx.time, px: ctx.viewportSize}, body: 'return vec4f(fract(uv * px / 40.0), sin(t) * 0.5 + 0.5, 1.0);'})

Tip. A warp's map: has no context; a ctx token there throws when the shader is built.

Members

  • ctx.uv — The pixel's coordinate: 0–1 across the canvas, y down.
  • ctx.aspect — The canvas's width divided by its height.
  • ctx.time — The global clock in seconds.
  • ctx.viewportSize — The frame size in device pixels, as a vec2f.
  • ctx.logicalViewportSize — The frame size in CSS pixels, as a vec2f, for feature counts that should not change with screen density.
  • ctx.pointer — The mouse position in uv (0–1, y down).

See also

  • p — Reference one of the definition's props by name, wherever a word asks for a value.
  • paintFrame — The coordinate and frame size a hand-written paint: builder should draw in.
  • wgsl — Write the per-pixel math by hand, as one WGSL function body that returns a vec4f color.