💥 Stage 3: Source Code Showcase

Program state. Conditional rendering. One boolean. The bomb goes away.

📂 The Stage 3 Files

Stage 3 is the first stage where the behavior changes, not just the code structure. Click the bomb — it disappears, replaced by the explosion. When the sparks fade, a hint tells you to click again to reset. Same three files, one new idea:

File	What it does	Stage 3 changes
`bombStg3.html`	HTML shell — loads p5.js, CSS, and sketch	Filename + sketch pointer updated
`bombStg3Sketch.js`	The p5.js sketch — all drawing & logic	State machine, conditional rendering, hint text
`bombStg3Styles.css`	Minimal CSS reset — canvas flush, no margin	Intentionally unchanged — see WHY below

🧠 The Big Idea: Program State & Conditional Rendering
The entire disappearance mechanic is two variables and one if:

let bombVisible = true;
let exploded = false;

And in draw():
if (bombVisible) { drawBomb(); }

When bombVisible is false, drawBomb() never runs — so the bomb is simply absent from that frame's image. No erase step, no CSS tricks. The background clears the canvas every frame; conditional rendering decides what gets drawn back on top.

🤔 Why not just use CSS to hide the bomb? CSS can only show or hide the entire <canvas> element — the clouds, sky, and explosion would all vanish with it. The bomb is not an HTML element; it’s pixels drawn by JavaScript inside the canvas. Only JavaScript can choose not to draw it on a given frame. This is the Separation of Concerns: CSS controls appearance; JavaScript controls behavior.

← Stage 2 Showcase 📋 Saga Index

bombStg3.html — running live — click the bomb!

⛶ Open Full Size ▶ Stage 2 (compare)

🗺️ The State Machine

Stage 3 introduces a formal state machine — a description of every “mode” the program can be in and every transition between modes. There are three states; a click triggers two of the transitions automatically:

State	bombVisible	exploded	particles.length	What draws	Transition
A — Waiting	`true`	`false`	`0`	Sky + clouds + bomb	Click → State B
B — Exploding	`false`	`true`	`> 0`	Sky + clouds + sparks	Sparks fade → State C
C — Done	`false`	`true`	`0`	Sky + clouds + hint text	Click → State A

Why two variables? particles.length === 0 is true in both State A (startup) and State C (post-explosion). A single check can’t tell them apart. exploded resolves the ambiguity: it is only true after a click has happened, pinning us precisely to State C.

📜 Source Code

bombStg3.html HTML5

Loading bombStg3.html…

sketches/bombStg3Sketch.js JavaScript

Loading bombStg3Sketch.js…

styles/bombStg3Styles.css CSS

Loading bombStg3Styles.css…

💪 Try It Yourself

Use the Copy button above to grab any file, then:

Copy all three files into a project folder with sketches/ and styles/ sub-folders.
Open bombStg3.html in your browser. Click the bomb — watch it disappear. Wait for the sparks to fade, then click again to reset.
Experiment 1: Open bombStg3Sketch.js and change HINT_TEXT to your own message. Try changing HINT_TEXT_SIZE or HINT_TEXT_Y too.
Experiment 2: Inside mousePressed(), find the State A → B transition and change BOMB_CX, BOMB_CY to mouseX, mouseY. How does that feel different? Why did we change it back to the bomb center?
Challenge: Add a fourth state — a brief “FUSE BURNING” pause of ~2 seconds between the click and the explosion. Hint: p5.js’s frameCount variable and a fuseStartFrame variable are all you need.

⚠️ The Copy button requires a secure context (https:// or localhost). On a bare file:// URL, right-click → “View Page Source” to read the code instead.