TNT Processing — p5.js Creative Coding Showcase

Jayden’s Jammin’ Emoji

Golden face, electric-blue headphones, and a smile that’s feeling the beat.
Original p5.js sketch — headphone band drawn with arc(), PI, and TWO_PI.

🎧 Original Sketch

The Sketch as Written

This is Jayden’s original p5.js sketch — a cool, music-themed emoji face built from p5.js drawing primitives. The golden face is centered at (200, 210); the electric-blue headphone band arcs over the top using PI and TWO_PI as angle constants; rounded rectangles form the ear pieces on either side. Unlike Ethan’s sketch, this one is static — a finished composition rendered once and held.

p5.js techniques at work: arc() with PI / TWO_PI for the headphone band • rect() with a corner-radius argument for rounded ear pieces • ellipse() for face, eyes, and cheeks • noStroke() / stroke() / strokeWeight() to switch between fill-only and outlined shapes • absolute coordinate positioning (canvas not centered at origin)

Live Canvas

A static composition — no frameCount, no animation.
The canvas renders once; the sketch is the finished artwork.

By Jayden • p5.js Sketch • ~30 lines Original code preserved exactly as written

How This Page Was Built

The S.P.A.R.K. Chat Log documents the design decisions behind this showcase: how the CSS-only hero creates a music-stage atmosphere without a photograph, why a static sketch calls for noLoop() in the instance-mode adapter, and how arc() with PI and TWO_PI draws the headphone band over the top of the face. A planned refactoring roadmap follows Ethan’s six-phase progression.

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