surfaceOf

The canvas a generator paints on: its uv, its viewport size in pixels and its aspect.

surfaceOf(params: GpuFragmentParams): {uv: Expr; viewport: Expr; aspect: Expr}

Import frames from shaders/std and use frames.surfaceOf.

uv runs 0–1 across the layer, y down. aspect is width over height. When a parent fits the layer into a box, viewport and aspect describe that box. Every frame takes this as its second argument.

Parameters

NameTypeNotes
paramsGpuFragmentParams

Example

paint: (params) => { const {uv, viewport, aspect} = surfaceOf(params); … }

See also

  • rawSurfaceOf — The canvas like surfaceOf, but always measured against the whole canvas, never a fitted box.
  • centredFrame — A frame centred on a position prop: each pixel's offset from the centre and its distance.
  • segmentFrame — A frame along the line between two position props: how far each pixel is along it and across it.

Used by

Aurora, FlowingGradient, Marble, MeshGradient, Prism, StudioBackground, Waveform