Animating Motion: timing, spacing, and weight

This module builds toward one whole task: a short clip of a bouncing ball or simple character that feels alive rather than mechanical. In a live-coded visual set — sprites lerping across a projection, audio-reactive shapes pulsing to a kick — the difference between “screensaver” and “performance” is almost entirely these classical animation principles. The audience never sees your easing curve, but they feel it.

Start supported: take a linear two-pose bounce (given as a starter sketch or flipbook template) and change only the frame count between poses, watching how the same trajectory reads as heavy or light. Then redistribute those frames toward the key poses — the slow-in/slow-out drill — until the motion stops looking robotic. These two moves, timing by frame count and easing by spacing, are the automaticity drills: repeat them until adjusting feel is reflexive, because everything else layers on top. Next, bend the path into an arc, deform the shape on impact with squash-and-stretch, add a small preparatory crouch before the leap (anticipation), and let a secondary part — a tail, a trailing particle — settle late (follow-through and overlapping action).

Each required atom gates the capstone directly: the brief explicitly asks for every one of these principles, and the final staging pass — one clear focal action, readable at a glance — is what turns a checklist of techniques into a statement. The supporting atom on repetition as elementary rhythm enriches the work: once your bounce loops, its repetition becomes compositional force, a bridge toward rhythmic, music-synced motion in later modules — worth reading, but not needed to land this capstone.

Runnable examples

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

oscillation

let y = height/2 + sin(frameCount * 0.05) * 100

_{p5live-0004 · CC0-1.0}

float rings = abs(sin(length(uv)*20.0 - u_time*2.0));

_{glsl-0039 · public-domain}

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}

noise-drift

let x = noise(frameCount*0.002)*width, y = noise(frameCount*0.003)*height

_{p5live-0007 · CC0-1.0}