TNT — p5.js Refactoring Series • All 6 Phases

The Full Refactor

The same emoji. Six developmental steps. One professional result.
Pick a face color or drag the headphone hue — the sketch responds and the HSB values update live.

🎧 Phases 1–6 Combined

From Student Sketch to Professional Code

Jayden’s original sketch was correct, expressive, and well-commented — a strong starting point. The refactor did not rewrite it; it elevated it. Each phase addressed one concern without touching the others. The visual composition closely follows the original, with one intentional improvement: the emoji is now centered at the canvas midpoint, correcting a 50px horizontal offset present in the original sketch. What changed is everything about how the code is organised, named, colored, disciplined, and scaled.

Phase	Focus	Core Change	Teaching Test
1	Modularization	`draw()` becomes 5 named calls	Comment any call — only that feature disappears
2	Named Constants	25+ magic numbers replaced with a settings panel	Change `FACE_DIAM` — face shrinks, band stays wide (Phase 5 lesson preview)
3	HSB Color Mode	`colorMode(HSB, 360, 100, 100)` in setup; colors say what they mean	Drag face hue; color shifts while structure holds
4	Push/Pop Discipline	Every function sandwiched — “Leave No Trace-y”	Remove one `pop()`; see Phase 5 break
5	Scalability	`recalcConstants()` derives all sizes from `width`	Resize canvas; every proportion holds automatically
6	Breadcrumbs	`SHOULD_SHOW_BREADCRUMBS` flag; console logs each function once	Set flag true; see 5 messages, not 300 (because `noLoop()`)

Before → After (draw() function)

// ORIGINAL draw() — 25 commands, magic numbers, no named structure
function draw() {
    background(230, 245, 255);
    noStroke(); fill(255, 215, 0); ellipse(200, 210, 240, 240);
    noFill(); stroke(0, 120, 255); strokeWeight(18);
    arc(200, 195, 210, 210, PI, TWO_PI);
    // ... 15 more lines ...
}

// REFACTORED draw() — 7 lines, self-documenting recipe
function draw() {
    background(BG_HUE, BG_SAT, BG_BRI);
    translate(width / 2, height / 2);

    push(); drawFace();       pop();
    push(); drawHeadphones(); pop();
    push(); drawEyes();       pop();
    push(); drawCheeks();     pop();
    push(); drawSmile();      pop();
}

Live Canvas — All 6 Phases Running

Face Color (Phase 3)

fill(51, 100, 100)

Headphone Hue — 212° (Phase 3)

stroke(212, 100, 100)

Stroke Brightness — 80% (Phase 2)

stroke(51, 100, 80)

Face picker → H/S/B. Headphone slider → hue only.
Stroke brightness = faceBri × pct / 100 — a derived rule.

Original by Jayden • Full refactor • ~115 lines with constants & comments Centered: face at canvas midpoint — corrects original offset

What This Refactor Teaches

Phase 3 is live above. Pick a vivid red face and the stroke automatically darkens to 80% of the new brightness — the derived constant FACE_STROKE_BRI = FACE_BRI × STROKE_BRI_PCT / 100 holds across every color. Drag the headphone hue from 212° (blue) to 120° (green) and watch the band and ear pieces change together because they share BAND_HUE.

Phase 5 is running invisibly. Open DevTools and inspect FACE_DIAM in the console: at this canvas size it is approximately 230px. Every other size — eye width, ear height, smile arc, stroke weights — was computed from that one number. Change canvas width in the adapter and every proportion holds.

Phase 6 is one line away. Open DevTools Console. Set SHOULD_SHOW_BREADCRUMBS = true, then call jaydenRefactoredP5.redraw(). Five messages appear — once, instantly — because noLoop(). That is the difference between a static sketch and an animated one, made visible.

Original Sketch S.P.A.R.K. Chat Log