TNT Processing — p5.js Creative Coding Showcase

Grayson’s Bicolor Orb

Half blue. Half amber. One face. One function: map().
A scan-line gradient rendered with the circle equation — no gradient fill, just math.

🌌 Original Sketch

Color as Code, Code as Color

Grayson built a face-like bicolor orb entirely from p5.js drawing primitives. The upper half transitions from deep blue to cyan; the lower half from amber to yellow. Two ring-shaped eyes and a vivid red smile complete the face. The color gradient is not a background image or a CSS trick — it is computed mathematically, one horizontal scan line at a time, using the circle equation and p5’s map() function.

Unlike Ethan’s animated emoji, this sketch calls noLoop() in setup(). The entire image is computed in a single pass through draw() and then the sketch stops. This is not a limitation; it is an architectural choice. Every pixel placement is deliberate, calculated, and permanent.

p5.js techniques at work: map() for linear interpolation of hue • colorMode(HSB) already in use • Scan-line rasterization (horizontal line() calls) • Circle equation x = h ± √(r² − (y−k)²) • noLoop() for single-frame computation • Concentric circle() calls for ring-shaped eyes

The map() lesson this sketch teaches: map(y, 0, height, 240, 180) asks: “What fraction of the way is y between 0 and height? Apply that same fraction to the range [240, 180].” At the top of the canvas (y = 0), hue is 240 (blue). At the midpoint, hue is 210 (cyan-blue). The color changes continuously with every pixel row — not in steps, not at breakpoints. One function call, infinite intermediate values. That is what map() is for. See the S.P.A.R.K. Chat Log for the full tutorial.

Live Render — Single Frame

Computed once in draw() — noLoop() stops the loop immediately.
Every scan line is a separate stroke() + line() call.

By Grayson • p5.js Sketch • ~65 lines Original code preserved exactly as written

What Grayson’s Sketch Teaches — and What a Refactoring Series Would Look Like

Grayson arrived at techniques independently that most novices are never shown: the scan-line technique for gradient fills, the explicit circle equation, and HSB color mode was already in use before anyone asked for it — the concept Ethan’s refactoring series reached only in Phase 3. The S.P.A.R.K. Chat Log documents what those techniques are, why they work, and what a six-phase refactoring roadmap for this sketch would look like.

The tutorial focus: The map() function — p5’s most versatile mathematical tool for creative coding. Once you understand linear interpolation between ranges, you can drive color, position, size, opacity, and speed from any input value. Every animation and data visualization you will ever write uses it.

S.P.A.R.K. Chat Log & Tutorial