TNT — p5.js Refactoring Series • Phase 2 of 6

Named Constants

The same emoji. The same animation. Every number now has a name.
A settings panel at the top. One change propagates everywhere.

🔧 Phase 2 — Named Constants

Magic Numbers Lie. Names Tell the Truth.

Phase 2 makes one structural change to Phase 1: every literal number moves out of the drawing functions and into a named constant at the top of the file. The drawing commands are unchanged. The visual output is identical. What changes is whether the code explains itself.

Before → After

// PHASE 1: magic numbers — what does 1.9 mean? What does 2 mean?
let spiralSpeed = frameCount * 2;
rotate(-spiralSpeed * 1.9);

// PHASE 2: named constants — the code now explains Ethan's decisions
var EYE_SPEED_MULT   = 2;    // base spin speed
var EYE_R_SPEED_MULT = 1.9;  // right eye spins 1.9× faster — Ethan's deliberate choice
...
let spiralSpeed = frameCount * EYE_SPEED_MULT;
rotate(-spiralSpeed * EYE_R_SPEED_MULT);

Teaching test — try this: Find EYE_R_SPEED_MULT = 1.9 in the settings panel at the top of the greenbar. Change it to 3.0 — the right eye spins dramatically faster and the asymmetric, unhinged quality intensifies. Change it to 1.0 — both eyes spin at identical speeds and the crazed asymmetry vanishes entirely. One value. Instant feedback. That is why we name things.

Live Animation — Phase 2

Visually identical to Phase 1 and the original — the refactor touched only
the form of the numbers, not the numbers themselves.

Original by Ethan • Phase 2 Refactor • ~140 lines with constants & comments Drawing commands unchanged from Phase 1

What Phase 2 Teaches — and What Comes Next

After Phase 2, the sketch has a settings panel. A student can tune TONGUE_SPEED_X and TONGUE_DIST_X to understand the difference between how fast and how far — without reading a single drawing command. The constants do the teaching.

Up next — Phase 3: HSB color mode replaces the _R/_G/_B triples with human-readable hue, saturation, and brightness values. FACE_FILL_R=255, FACE_FILL_G=204, FACE_FILL_B=0 collapses to FACE_HUE=48, FACE_SAT=100, FACE_BRI=100. The color now says what it is.

Original Sketch Phase 1: Modularization S.P.A.R.K. Chat Log Phase 3: HSB Colors