Material
RollingDistortMaterial
A wave rolls through
RollingDistortMaterial is the picture on a television that has given up. A wave
rolls across the text in an endless loop and shoves the image around as it passes, with a
layer of finer noise underneath. The uniforms describe the wave (how wide, how many cycles, how
tall), the noise (how busy, how tall), and the line they both travel along.
Construction #
RollingDistortMaterial extends Material, so
everything on a material, from uniforms to update(), works here
too. Construct it with no arguments and set uniforms afterwards.
import { RollingDistortMaterial } from "blotter.ts/materials";
const material = new RollingDistortMaterial();
material.uniforms.uSineDistortSpread.value = 0.05;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.
uSineDistortSpread
type "1f", a single float default 0.05
The width of the wave: how much of the text it covers from its leading edge to its trailing one.
Value
A float from 0.0 to 1.0, as a fraction of the distance from uDistortPosition along the axis perpendicular to uRotation. Above 0.5 the wave starts again before it has finished, which is its own kind of interesting.
uSineDistortCycleCount
type "1f", a single float default 2
How many crests and troughs fit inside the spread.
Value
Any float. 1.0 is a single crest; 2.0 is a full cycle. Fractions such as 3.5 leave artefacts you may enjoy.
uSineDistortAmplitude
type "1f", a single float default 0.25
How tall the crests and troughs are.
Value
Any float, as a fraction of the distance along the line running from uDistortPosition at the angle of uRotation.
uNoiseDistortVolatility
type "1f", a single float default 20
Under the wave sits a constant, noisy distortion with no position or spread of its own. This is how quickly that noise varies along the distortion axis.
Value
Any float. Higher is busier.
uNoiseDistortAmplitude
type "1f", a single float default 0.01
How far the noise pushes the pixels.
Value
Any float, measured like uSineDistortAmplitude.
uDistortPosition
type "2f", a pair of floats, as [x, y] default [0.5,0.5]
The centre of the wave and of the noise. Animation travels through this point along the axis perpendicular to uRotation.
Value
A pair of floats from 0.0 to 1.0, relative to the text’s width and height.
uRotation
type "1f", a single float default 170
The angle, in degrees, along which all distortion is applied. The wave’s amplitude rises and falls along this angle; its travel is perpendicular to it.
Value
A float from 0.0 to 360.0.
uSpeed
type "1f", a single float default 0.08
How fast the wave travels.
Value
Any float; the default is deliberately slow. It multiplies uGlobalTime, so 0.0 holds the wave still.