scatterPoint

One random point in each cell of a square grid: the classic scatter for glitter, stars, dust and sparkles.

scatterPoint(coord: Expr, opts: ScatterOptions): ScatteredPoint

Import patterns from shaders/std and use patterns.scatterPoint.

coord is the pixel's position in any unit (CSS pixels via uv × logicalViewportSize keeps the spacing steady across screens); cellSize is the grid spacing in that unit. jitter is how far the point wanders from the cell's centre, 0 (dead centre) to 1 (anywhere in the cell). seed re-rolls every point. Returns the cell's point and this pixel's offset from it (both in coord's unit), plus random, three independent 0–1 values for the cell (.x and .y already place the point; use .z and the others to vary brightness, timing or size).

Parameters

Example

const {offset, random} = scatterPoint(px, {cellSize: 30, jitter: 0.6, seed: params.uniforms.seed})

Tip. A pixel only sees its own cell's point, so keep anything drawn around it smaller than half a cell or it gets clipped at the cell edge. Use scatterPoints for larger shapes.

See also

• scatterPoints — The scattered points of the four grid cells nearest the pixel, so anything drawn up to half a cell from its point shows whole, never clipped at a cell edge.
• cellFrame — The shared coordinate system of a tiled pattern: how many cells fit down the canvas height and how far the whole lattice is rotated.
• pointStars — A plane of sparse glinting points: stars, glitter, dust.