Typography as visual material: kinetic and generative type

This module builds toward one authentic deliverable: a kinetic-typography poster in Processing, the kind of piece that runs as a projected visual behind a live set or gets exported as a looping social clip for a gig announcement. In that context type is not caption — it is the material itself, and a poster that merely decorates gets scrolled past. The design brief is therefore double: the letterforms must move under the audience’s hand, and the composition must land the semiotic hit of a word everyone recognizes rendered in a way nobody expects.

The arc starts fully supported. First get one word on screen sharp: load a typeface at high resolution so it survives any scale (the createFont-at-large-size move), and understand why Processing needs its VLW pipeline, textFont, textAlign, and especially textWidth for layout that respects real glyph metrics. Next, unfreeze the type — the kinetic-typography concepts turn position, size, rotation, and opacity into per-frame variables, and this is the part-task worth drilling until driving text properties from animated values is automatic. A guided exercise wires those values to the cursor, leaning on the mouse-input vocabulary already earned in the prerequisite interaction module. The final, unsupported step is compositional: apply the familiar-plus-unexpected principle to choose a word and a treatment that hold tension without destroying legibility.

The four required atoms gate the capstone directly — no crisp font, no motion, no semiotic frame means no poster. The supporting atoms enrich the treatment: easing lends the motion organic weight, the mouse-variable reference is on hand as a refresher, and organic geometry suggests how strict letterform grids can be made to feel alive.

Runnable examples

Generated from the context/ instrument corpus by concept (redistributable idioms only). Do not edit — regenerate with gen-module-examples.mjs.

sdf-shape

circle [0,0] 0.4 >> add

_{punctual-0018 · CC0-1.0}

float d = length(uv) - r;

_{glsl-0003 · public-domain}

vector-drawing

beginShape(); for(let p of pts) curveVertex(p.x, p.y); endShape()

_{p5live-0016 · CC0-1.0}

typography

let pts = font.textToPoints('P5', 0, 200, 200, {sampleFactor: 0.2})

_{p5live-0029 · CC0-1.0}

easing-curve

x = lerp(x, targetX, 0.1)

_{p5live-0032 · CC0-1.0}

immediate-mode-draw

function draw(){ background(0); circle(width/2, height/2, 200) }

_{p5live-0002 · CC0-1.0}