Material
SlidingDoorMaterial
Panes that slide and split
SlidingDoorMaterial cuts the text into panes and slides them, one after another,
out of their frames and back. Each pane waits for the one before it to get a little way along
before it moves, so the copies seem to drag each other. The word splits, reorganises itself,
and does it again.
Construction #
SlidingDoorMaterial extends Material, so
everything on a material, from uniforms to update(), works here
too. Construct it with no arguments and set uniforms afterwards.
import { SlidingDoorMaterial } from "blotter.ts/materials";
const material = new SlidingDoorMaterial();
material.uniforms.uDivisions.value = 5; 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.
uDivisions
type "1f", a single float default 5
How many panes to cut the text into along the animation axis: vertical by default, horizontal when uAnimateHorizontal is on.
Value
Any float. Whole numbers make even panes.
uDivisionWidth
type "1f", a single float default 0.25
How far a pane travels before the next one sets off. Small values make a tight ripple; large ones make the panes move almost in turn.
Value
A float from 0.0 to 1.0, as a fraction of the text’s total height.
uAnimateHorizontal
type "1f", a single float default 0
A switch. Off, the panes slide vertically; on, they slide horizontally.
Value
A float used as a boolean: 0.0 for off, 1.0 for on.
uFlipAnimationDirection
type "1f", a single float default 0
A switch that reverses the direction of travel. Vertical animation runs bottom to top by default and horizontal runs right to left; this flips whichever is active.
Value
A float used as a boolean: 0.0 for off, 1.0 for on.
uSpeed
type "1f", a single float default 0.2
How fast the panes slide.
Value
Any float. It multiplies uGlobalTime, so 0.0 freezes the doors mid-slide.