Adding Polish and Appeal to Animation

The fundamentals get a shape moving believably; this module is about why an audience keeps watching. In a live-coded visual set — audio-reactive shapes projected behind a DJ, or a Hydra/p5 scene driven by a kick pattern — technically correct motion that is timid, flat, or mechanical dies on the big screen. The whole task here is to take one clean action you already animated and elevate it into a performance: something with impact, dimension, and personality.

Start supported: revisit your fundamentals piece and, with the exaggeration principle open as a how-to, push a single beat of the action past its literal amount until it reads from across the room — a kick that snaps and overshoots rather than nudges. Then layer one clearly subordinate motion using the secondary-action guidance, checking it reinforces rather than competes. Next, audit every frame against solid drawing: does the form keep its volume and mass, or does it go paper-cutout when it turns? Finally, the least mechanical pass — appeal: break dead symmetry, sharpen the silhouette, give the gesture character. The capstone removes the scaffolding: you make all four upgrades yourself and defend each one in a before/after comparison.

Each required atom gates a named clause of that capstone — you cannot present the exaggeration upgrade, the secondary-action layer, the volumetric pass, or the appeal tuning without the corresponding principle. The supporting atoms enrich rather than gate: staging explains why your starting action must already read clearly, while squash-and-stretch and arcs are fundamentals-level vocabulary you’ll lean on when exaggerating without breaking believability. Drill the exaggeration push and the subordinate-layer move repeatedly inside the task — in a live set, both must be reflexes, not deliberations.

Walkthrough

You’ll take the plainest action — a bouncing ball — and add the Disney-principle polish that makes motion read across a room. Paste each sketch into the p5 web editor and press Run (▶); the animation loops. Each step is a complete, standalone sketch that builds on the last.

1 — the clean baseline. A ball falling and rising on a timed loop, correct but timid — this is the “before” you’ll elevate. frameCount % T gives the loop phase; note it moves at a constant, mechanical rate ([[staging-animation]]).

function setup() { createCanvas(400, 400); noStroke(); }
function draw() {
  background(20);
  let t = (frameCount % 90) / 90;
  let y = 60 + abs(sin(t * PI)) * 260;   // up and down, evenly
  fill(255, 160, 60);
  circle(200, y, 70);
}

2 — exaggeration + timing. Push past the literal: ease the fall so it accelerates into the ground (a snap, not a nudge), and speed the whole loop. Exaggerated timing is what makes a move read from the back of the room ([[exaggeration-animation]]).

function setup() { createCanvas(400, 400); noStroke(); }
function draw() {
  background(20);
  let t = (frameCount % 70) / 70;
  let fall = t < 0.5 ? pow(t * 2, 2) / 2 : 1 - pow((1 - t) * 2, 2) / 2;  // accelerate down, decel up
  let y = 60 + fall * 260;
  fill(255, 120, 60);
  circle(200, y, 70);
}

3 — squash and stretch (solid drawing). A believable form keeps its volume — as it stretches thin along fast motion, it must narrow to compensate, and it squashes flat on impact. Conserving area is what stops the shape reading as a flat cutout ([[solid-drawing]], [[squash-and-stretch]]).

function setup() { createCanvas(400, 400); noStroke(); }
function draw() {
  background(20);
  let t = (frameCount % 70) / 70;
  let fall = t < 0.5 ? pow(t * 2, 2) / 2 : 1 - pow((1 - t) * 2, 2) / 2;
  let y = 60 + fall * 260;
  let speed = abs(t - 0.5) * 2;                 // fastest at top/bottom of the loop
  let sx = 70 * (1 + speed * 0.35);             // stretch along motion...
  let sy = 70 * (1 - speed * 0.28);             // ...narrow to keep volume
  if (t > 0.92) { sx = 100; sy = 46; }          // squash on impact
  fill(255, 160, 60);
  ellipse(200, y, sx, sy);
}

4 — secondary action. Add a subordinate motion that reinforces the main one without competing: a contact shadow that grows and darkens as the ball nears the floor, selling its height and weight ([[secondary-action-supplement]]).

function setup() { createCanvas(400, 400); noStroke(); }
function draw() {
  background(20);
  let t = (frameCount % 70) / 70;
  let fall = t < 0.5 ? pow(t * 2, 2) / 2 : 1 - pow((1 - t) * 2, 2) / 2;
  let y = 60 + fall * 260;
  let sw = map(y, 60, 320, 24, 96);             // shadow tracks height
  fill(0, 130);
  ellipse(200, 352, sw, sw * 0.28);
  fill(255, 160, 60);
  circle(200, y, 70);
}

5 — arcs and appeal. Natural motion travels on arcs, never straight lines: send the ball across on a parabola. Then add appeal — an off-centre highlight breaks dead symmetry and gives the form a readable silhouette and character ([[arcs-natural-motion-paths]], [[appeal-animation]]).

function setup() { createCanvas(400, 400); noStroke(); }
function draw() {
  background(20);
  let t = (frameCount % 120) / 120;
  let x = lerp(60, 340, t);
  let y = 330 - sin(t * PI) * 250;              // a parabolic arc, not a straight hop
  let s = 1 + sin(t * PI) * 0.18;
  push();
  translate(x, y);
  fill(255, 170, 70);
  ellipse(0, 0, 66 * s, 66 / s);
  fill(255, 240, 200);
  ellipse(-13, -13, 17, 17);                    // asymmetric highlight = appeal
  pop();
}

6 — all four upgrades (the capstone). Anticipation (a crouch before launch), exaggerated arced flight, volume-preserving squash-and-stretch, a tracking shadow (secondary action), and an appeal highlight — one action carrying every principle ([[exaggeration-animation]], [[appeal-animation]]):

function setup() { createCanvas(400, 400); noStroke(); }
function draw() {
  background(18);
  let T = 100;
  let t = (frameCount % T) / T;
  let y, sx = 70, sy = 70;
  if (t < 0.15) {                               // ANTICIPATION: crouch and squash before launch
    let a = t / 0.15;
    y = 300; sy = 70 - a * 26; sx = 70 + a * 22;
  } else {                                       // FLIGHT: arc up, stretch by speed
    let b = (t - 0.15) / 0.85;
    y = 300 - sin(b * PI) * 250;
    let sp = abs(cos(b * PI));
    sx = 70 - sp * 18; sy = 70 + sp * 24;
  }
  fill(0, 120);                                  // SECONDARY: shadow tracks height
  ellipse(200, 356, map(y, 50, 300, 30, 100), 22);
  push();                                        // SOLID + APPEAL
  translate(200, y);
  fill(255, 150, 60);
  ellipse(0, 0, sx, sy);
  fill(255, 240, 200);
  ellipse(-14, -15, 16, 16);
  pop();
}

What good looks like. The polished action should read instantly and feel alive: you sense the weight (squash on landing), the effort (anticipation crouch), and a bit of personality (the off-centre highlight, the overshoot). The beginner failures are timid exaggeration (too subtle to read on a projector) and volume that isn’t conserved (the shape balloons or shrinks). Put the before (step 1) and after (step 6) side by side — the difference is the lesson. (Skill map: live-visualist Domain B3 — motion with life; ease, arcs, and contrast over mechanical linear motion.)

Now make it yours. Add a small overshoot-and-settle at the apex (a hold). Drive the loop period T from an audio beat so the bounce locks to a kick. Give the shadow a soft blur by layering translucent ellipses. Add a squashed “landing dust” secondary puff. Tune the anticipation length — too long reads as hesitation, too short loses the wind-up.

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}