Material
FliesMaterial
Text as a restless swarm
FliesMaterial redraws your text as a swarm. Each point lives in its own small cell
on the text and wanders around it, tirelessly, occasionally trespassing on a neighbour. From a
distance the word holds together; up close it never sits still. Turn on dodging and the swarm
parts around a position you feed it, which is how the pointer example in the guide works.
Construction #
FliesMaterial extends Material, so
everything on a material, from uniforms to update(), works here
too. Construct it with no arguments and set uniforms afterwards.
import { FliesMaterial } from "blotter.ts/materials";
const material = new FliesMaterial();
material.uniforms.uPointCellWidth.value = 0.04;Uniforms #
Each entry in material.uniforms is a live
UniformInterface: assign to its
value and the running effect changes. Set a value through a text’s render
scope to change that text alone.
uPointCellWidth
type "1f", a single float default 0.04
Imagine a grid laid over the text. Each point moves mostly within one cell of it, and this is the cell’s width and height.
Value
A float from 0.0 to 1.0, as a fraction of the text’s total height. On a 100-pixel-tall text, 0.04 gives 4-pixel cells.
uPointRadius
type "1f", a single float default 0.75
The size of each point.
Value
A float from 0.0 to 1.0, relative to half a cell. At 1.0 a point fills its cell edge to edge.
uDodge
type "1f", a single float default 0
A switch. When on, points shrink away from uDodgePosition across the distance set by uDodgeSpread. The usual use is a pointer sweeping through the word.
Value
A float used as a boolean: 0.0 for off, 1.0 for on.
uDodgePosition
type "2f", a pair of floats, as [x, y] default [0.5,0.5]
The position the swarm avoids while uDodge is on.
Value
A pair of floats from 0.0 to 1.0, relative to the text’s width and height. The origin is the bottom-left corner, as in WebGL, so a pointer position from the DOM needs its y flipped: [x, 1 - y].
uDodgeSpread
type "1f", a single float default 0.25
How far from uDodgePosition the shrinking reaches.
Value
A float from 0.0 to 1.0, as a fraction of the text’s total height.
uSpeed
type "1f", a single float default 1
How fast the points move.
Value
Any float. It multiplies uGlobalTime, the seconds since the effect started, so 0.0 freezes the swarm and 2.0 doubles its pace.