TNT Processing Apps — A Cinematic Coding Project • 2026

Movie Credits Simulator

Student names. CS concepts. A Superman-style starfield. Synchronized music.
Animate • Explore • Customize • Learn

Pick Your Path

Five Ways Into the Simulator

Launch the animation, customise its content or visual settings, read the development story, or explore the legacy version — no coding required.

Run the Simulation

Launch Stage 18 with synchronized music, a timeline scrubber, and three semantically-colored outline controls. Names and concepts zoom past a starfield with blur, tilt, and cinematic motion trails.

Open Simulator

Customize Content

Edit student names, CS concepts, intro phrases, and movie title — all without touching the code. Changes save to your browser and load automatically the next time the simulation runs.

Edit Content

Customize Settings

Adjust font, size, tilt, blur, stroke, and timing — all with a live p5.js preview that updates instantly as you drag the sliders. Settings save to your browser and load automatically.

Edit Settings

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

The complete development log — every design decision documented, every session explained for learners. From TNT ecosystem integration through music synchronisation and timeline scrubbing, eight sessions in full.

Read the Log

Legacy Version

The original Stage 16d file before TNT integration — standalone, with its own purple-gradient navbar and two-button layout. Useful as a before/after teaching comparison alongside Sim 18.

View v16d

What Students Learn From This App

The Movie Credits Simulator is a p5.js animation project built in stages — each stage teaching one new programming concept in context. Students encounter variables, functions, objects, arrays, loops, conditionals, state machines, HSB color, timing functions, audio integration, and more — inside code they are actively building, not just reading. The app now includes a timeline scrubber with proportional music sync, semantic outline buttons, and a cinematic auto-end sequence that fades the music and resets for replay.

Now available: edit your credits content (names, concepts, phrases & title) and adjust visual settings (font, size, blur, timing) — both without touching the code. Next: full TNT site integration.

Musical inspiration for this simulator: Superman (1978) — John Williams’ Theme →