home/ atoms/ processing-typography-kinetic

Kinetic typography treats letterforms as visual elements that move, scale, and respond to input

Processing enables typography to move beyond static placement into dynamic, interactive expression. Typographic properties — position, size, rotation, color, opacity — become variables that respond to time, mouse, or keyboard input. Historical precedents include Saul Bass’s film title sequences and the MIT Visual Language Workshop’s spatial typography research. In code, this means driving textFont/textSize with animated values, using sin() to oscillate character positions, and linking typing speed to visual attributes. The textWidth() function is essential for collision detection or layout that adapts to font metrics.

Examples

void draw() { float s = map(sin(frameCount*0.05), -1,1, 12, 48); textSize(s); text(“hello”, mouseX, mouseY); }

Assessment

Write a sketch where each keypress adds a letter that slowly floats upward and fades out; describe which variables need to be stored per letter.

“Many artists and designers are fascinated with type and have created unique ways of exploring letterforms with the mouse, keyboard, and more exotic input devices.”
corpus · processing-handbook-no-login-mirror-pdf-reas-and-fry · chunk 70