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

HSB Color Mode

The same emoji. One new line in setup. Colors that say what they mean.
Pick a color below — the sketch responds live and the HSB values update in real time.

🌈 Phase 3 — HSB Color Mode

Colors That Say What They Mean.

Phase 3 makes one structural change to Phase 2: the color model switches from RGB to HSB. One line in setup() — colorMode(HSB, 360, 100, 100) — transforms how every fill() and stroke() call is interpreted. All nine _R/_G/_B constant triples from Phase 2 collapse into compact, human-readable H/S/B groups. The drawing functions are unchanged.

Before → After

// PHASE 2: three constants per color, three guesses per shade — open a color picker to understand it
var FACE_FILL_R   = 255;  var FACE_FILL_G   = 204;  var FACE_FILL_B   =   0;
var FACE_STROKE_R = 204;  var FACE_STROKE_G = 136;  var FACE_STROKE_B =   0;
...
fill(FACE_FILL_R, FACE_FILL_G, FACE_FILL_B);  // what color? requires a picker to know

// PHASE 3: one color, each number says its name — readable at a glance
colorMode(HSB, 360, 100, 100);  // setup(): the one new line
var FACE_HUE = 48;   // 48° = yellow-orange on the color wheel
var FACE_SAT = 100;  // fully saturated — no white mixed in
var FACE_BRI = 100;  // full brightness
var STROKE_BRI_PCT  = 80;   // stroke is 80% as bright as the face
var FACE_STROKE_BRI = FACE_BRI * STROKE_BRI_PCT / 100;  // = 80
...
fill(FACE_HUE, FACE_SAT, FACE_BRI);
stroke(FACE_HUE, FACE_SAT, FACE_STROKE_BRI);

Teaching test — try this: Use the color picker in the canvas panel. Pick a vivid red — watch the emoji’s face change, and observe that the stroke automatically darkens to 80% of the new brightness. Then drag the stroke brightness slider to 30% and watch the outline go very dark regardless of face color. Finally set it to 100% — the outline disappears into the fill. One slider, one number, instant feedback. That is what a derived constant teaches.

Live Animation — Phase 3

Face Color

fill(48, 100, 100)

Stroke Brightness — 80%

stroke(48, 100, 80)

Color picker → live HSB values update.
Stroke brightness is computed as a percentage of face brightness.

Original by Ethan • Phase 3 Refactor • ~130 lines with HSB constants & comments Drawing commands unchanged from Phase 2

What Phase 3 Teaches — and What Comes Next

After Phase 3, a student can look at MOUTH_HUE = 0 and know it is red. They can look at MOUTH_BRI = 31 and know it is dark red without running anything. FACE_SAT = 100 means no white mixed in. These are descriptions, not codes. HSB mode turns the constants panel into a visual specification.

Up next — Phase 4: Push/Pop Discipline formalises the “Leave No Trace-y” rule: every function that calls translate() or rotate() opens with push() and closes with pop(). The payoff is dramatic: remove one pop() and watch the mouth and tongue fly off-canvas due to accumulated transforms.

Original Sketch Phase 1: Modularization Phase 2: Named Constants S.P.A.R.K. Chat Log