Exemplary Speech • 01
A p5.js canvas animation built around a particle fire system and coordinate transforms. Below you’ll find the live app, the full SPARK prep trail, and a sample two-minute speech script.
▶ Hold the mouse button — the dragon breathes fire
📄 View Source Code WalkthroughBehind the Build
The five-step process Alex followed — including the actual AI prompts that shaped each stage of development.
I’d been playing with p5.js for a few weeks and wanted to make something more interesting than geometric shapes. I stumbled across the concept of particle systems — the idea that you can simulate fire, smoke, or rain by spawning hundreds of tiny objects with randomized behavior.
That gave me the “what if” moment: what if the particles came out of something’s mouth? I sketched a dragon head on paper in about five minutes. The rest of the build was figuring out how to make the code match the sketch.
I knew I needed three things: a dragon you could see, a jaw that opened on click, and fire particles shooting from the snout. Before writing any code I asked AI to help me plan the overall structure.
“I want to build a p5.js sketch of a dragon head that breathes fire particles when the mouse is held down. Can you help me plan the code structure before I start writing?”
AI laid out: draw body parts in layers (horns → head → jaw →
snout → eye), build a Particle class, and use an array to
track live particles. That structure became the skeleton of my final code.
The dragon body came together quickly — layered shapes, an eye with nested pupils, a little ear fin. The jaw was a different story. My first version rotated from the wrong corner and the jaw spun off into space.
“My lower jaw rotates from the top-left corner of the rectangle instead of from the back edge near the cheek. How do I make it hinge from the right point?”
AI explained push(), translate(), and
rotate(): move the origin to the hinge point, then
rotate around that. Three lines of code. I read them five times before I
really got it — and then I had to debug where the hinge pixel
actually was on my dragon anyway.
Two things I didn’t expect to learn:
push() & pop()
— I thought these were just data stacks. They actually save and restore
the entire drawing state: position, rotation, fill, stroke weight.
Every call to translate() or rotate() moves the
coordinate system itself. push() freezes it so you can always
get back.
Additive blend mode
— I found this completely by accident browsing the p5.js reference.
blendMode(ADD) makes overlapping colors add their
brightness together instead of covering each other. That’s how
real fire looks — bright where flames stack. One line of code turned
flat orange circles into actual glowing fire.
After this project I can explain four things clearly to an audience:
1. Coordinate transforms.
translate(x, y) moves the canvas origin. Every draw call
after that is relative to the new origin. This is how you animate parts
of a complex figure without recalculating every absolute position.
2. Particle systems. A particle is just an object with position, velocity, and a lifespan. Spawn enough of them with random variation and you get emergent behavior that looks organic — fire, rain, smoke, confetti.
3. Additive blending. RGB values add together instead of overlapping. Used in real rendering engines for light, fire, and neon effects.
4. AI as a collaborator.
AI explained the pivot concept perfectly. But I still had to understand the
coordinate system myself to place translate() at exactly the
right pixel. Understanding is not optional.
Sample Script
A two-minute highlight version of the SPARK Speech Alex might deliver on stage. Timing marks are approximate for a conversational pace.
“What if I told you I spent two weeks training a dragon to breathe fire?” [ pause — let it land — then gesture to the demo screen ] “Go ahead. Hold the mouse button.”
“That’s Fire Breathing Dragon. It’s a p5.js canvas
animation — p5.js is a JavaScript library for creative coding, made for
people who want to make things you can see and actually interact with.
The dragon is built from layered shapes: two horn triangles, a head ellipse,
a jaw rectangle, an eye with three nested circles, a nostril, a fin. When you
hold the mouse down, a particle system fires from the tip of the snout.
Every glowing dot you see is a JavaScript object with a position, a velocity,
a size, and a countdown until it disappears.”
“The hardest part wasn’t the fire. It was this jaw.”
[ click to open and close the jaw a few times ]
“See how it hinges from the back corner, near the cheek? My first
version rotated from the top-left corner of the rectangle. Which meant the
whole jaw spun out like a helicopter blade. Not exactly terrifying —
just really weird.
I asked AI: ‘My jaw rotates from the wrong point. How do I make
it hinge from the right edge?’ And it explained something called
coordinate transforms. In p5.js, translate(x, y) moves
the origin — the zero-point of the canvas. If you move
the origin to your hinge point first, then rotate, the rotation happens
around that point. That’s what push() and
pop() protect — they save your coordinate state so
you can transform one part without breaking everything else.”
“Here’s what I learned about working with AI on a project like this.
It explained the concept perfectly. It even showed me the code.
But I still had to figure out where the hinge actually was on
my dragon. That meant understanding my own coordinate system.
Which pixel was the back of the jaw? Was it 15 over and 15 down from the
dragon’s center? I had to run it, see it wrong, move it, run it again.
AI got me unstuck. I got it working. Those are two different things.”
“One more thing — the glow on the fire.”
[ hold mouse down so fire is clearly visible ]
“That’s one line of code: blendMode(ADD). Instead
of particles covering each other, they add their brightness together.
Bright where they stack. That’s how real light actually behaves.
I didn’t set out to learn about render blend modes. I just wanted
the fire to look cool.”
[ smile ]
“Sometimes those are the same thing.
Fire Breathing Dragon. My first real question was: can I make this?
My first real answer — is right there on your screen.”