TNT — p5.js Phase 5 • Scalability Made Visible

One Number. Everything Moves.

Drag the face size slider — watch 20 constants update and the canvas re-render instantly.
This is what recalcConstants() means in practice.

📏 Phase 5 — Scalability Live

The Root Parameter

In the refactored sketch, FACE_DIAM was derived from canvas width: FACE_DIAM = width * 0.48. That already made the sketch scalable — resize the canvas, the emoji follows. But the dependency was invisible: a student who resized the canvas had to trust that things would scale correctly.

This page makes the same mechanism explicit and interactive. FACE_DIAM is now a direct variable set by the slider below. recalcConstants() is called on every slider move. The constants readout shows the cascade live. The canvas renders immediately. The cascade is no longer a fact to memorize — it is something you can see and feel.

The architectural rule demonstrated here: The feature functions — drawFace(), drawHeadphones(), etc. — never mention FACE_DIAM. They only read the derived constants (EAR_W, EYE_X, etc.). Moving the root parameter is therefore invisible to them. That separation is the point. When concerns are separated, each one is trivial to change.

Live Canvas — Phase 5 Running

Face Diameter — 240px

80px (tiny) 240px (original) (large) 380px

Derived constants updating live

FACE_DIAM 240px root BAND_DIAM 210px × 0.875 BAND_STROKE_W 18px × 0.075 EAR_W 35px × 0.146 EAR_H 80px × 0.333 EYE_X 45px × 0.188 SMILE_W 90px × 0.375

Face Color

fill(51, 100, 100)

Headphone Hue — 212°

stroke(212, 100, 100)

Stroke Brightness — 80%

stroke(51, 100, 80)

Drag the size slider → canvas re-renders. No feature function changes.
That is separation of concerns, made tangible.

Original by Jayden • Phase 5 Scalability Demo • one parameter drives 20 constants Feature functions never reference FACE_DIAM directly

What the Slider Just Taught

Drag from 240 to 80. The emoji shrank. The headphone band thinned proportionally. The ears narrowed. The eyes moved closer together. The smile tightened. You changed one number; recalcConstants() changed twenty.

Now drag to 380. The emoji fills nearly the full canvas. Every proportion held because every constant was a ratio — not a hardcoded pixel. The ratios were derived from the original hardcoded values in Jayden’s sketch. The math was already there, implicit. Phase 5 made it explicit.

Compare with the original. In Jayden’s original sketch, centering the emoji required changing eight coordinates. In the refactored sketch, it required changing two numbers. In this page, resizing the emoji requires changing one number. Each refactoring phase reduced the cost of change.

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