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

Modularization by Functions

The same emoji. The same animation. A completely different structure.
draw() is now five words. Each feature has its own name.

🔧 Phase 1 — Modularization

One Feature. One Function.

Phase 1 makes one structural change: every facial feature moves out of draw() and into its own named function. The drawing commands are unchanged — same numbers, same colors, same geometry as Ethan’s original. Only the organization is new.

Before → After

// ORIGINAL draw(): ~40 lines of interleaved drawing commands

// PHASE 1 draw(): a five-line recipe
function draw() {
  background(240);
  translate(width / 2, height / 2);
  drawFace();       // ← one name, one job
  drawEyebrows();
  drawEyes();
  drawMouth();
  drawTongue();
}//end draw

Teaching test — try this: Open DevTools → Sources. Find the instance-mode adapter at the bottom of the page. Add /* */ around the drawEyes(); call inside p.draw. Refresh. The face, brows, mouth, and tongue all render — only the eyes vanish. Restore the call. That cause-and-effect is the modularization lesson. No slide deck delivers it as convincingly.

Live Animation — Phase 1

Visually identical to the original — the refactor touched only the structure,
not the drawing commands. draw() calls five functions; they do the work.

Original by Ethan • Phase 1 Refactor • ~90 lines with comments Drawing commands preserved exactly from the original

What Phase 1 Teaches — and What Comes Next

After Phase 1, the emoji has the same face and the same motion — but now you can comment out drawTongue(); in one second and see exactly what that line does. You can find drawEyebrows() by name, read it in isolation, and understand it completely without reading anything else. That is the payoff of modularization: one feature, one name, one place.

Up next — Phase 2: Named constants replace every magic number. The “1.9” that makes the right eye spin faster becomes EYE_R_SPEED_MULT. One change propagates everywhere.

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