🖌️ Stage 7: Source Code Showcase

Three things changed in the sketch; two more upgrades live in the HTML file. The comparisons below show each change side-by-side. The 🔴 Stage 6 code is always on the left; the 🟣 Stage 7 upgrade is on the right.

Example 1 — HTML Structure: Bare Body vs Layout Shell

<body>
    <main id="mainElem">
        <!-- p5.js appends canvas here -->
    </main>
    <!-- scripts ... -->
</body>

<div id="pageWrapper">
    <header id="appHeader">
        <span class="stage-label">Stage 7</span>
        <span class="app-title">Crosby's Bomb</span>
    </header>
    <main id="canvasContainer">
        <!-- canvas parented here by sketch -->
    </main>
    <footer id="appFooter">
        <span id="hintText">Click to reset!</span>
    </footer>
</div>

Example 2 — Reset Hint: p5 Text vs HTML Element

function drawResetHint() {
    noStroke();
    fill(CLR_HINT.col);
    textSize(HINT_TEXT_SIZE);
    textAlign(CENTER, CENTER);
    text(HINT_TEXT,
        CANVAS_W / 2,
        CANVAS_H / 2);
}
// called from draw():
if (exploded && particles.length === 0) {
    drawResetHint();
}

// drawResetHint() deleted entirely.
// One line in draw() replaces it:

hintEl.style('visibility',
    (exploded && particles.length === 0)
        ? 'visible'
        : 'hidden');

Example 3 — drawBackground(): Static Sky vs Reactive Sky

function drawBackground() {
    skyGradient.draw();
}

function drawBackground() {
    if (exploded) {
        // dark red top → fireball orange
        explosionGradient.draw();
    } else {
        // deep blue zenith → pale horizon
        skyGradient.draw();
    }
}

Example 4 — mousePressed(): Click Anywhere vs Click the Bomb

function mousePressed() {
    if (bombVisible) {
        // detonates on ANY click
        bombVisible = false;
        exploded    = true;
        // ... spawn particles
    } else if (exploded &&
               particles.length === 0) {
        bombVisible = true;
        exploded    = false;
    }
}

function mousePressed() {
    if (bombVisible && mouseInBomb()) {
        // only fires when click hits the bomb
        bombVisible = false;
        exploded    = true;
        // ... spawn particles
    } else if (exploded &&
               particles.length === 0) {
        bombVisible = true;
        exploded    = false;
    }
}

Example 5 — The <head>: No Favicon vs Favicon

<head>
    <meta charset="utf-8">
    <title>Crosby's Bomb…</title>
    <!-- no favicon -->
    <link rel="stylesheet" …>
</head>

<head>
    <meta charset="utf-8">
    <title>Crosby's Bomb — Stage 7</title>
    <!-- Favicon -->
    <link rel="icon"
          type="image/png"
          href="images/favicon-32x32.png"
          sizes="32x32">
    <link rel="stylesheet" …>
</head>

Stage 6 introduced SWGradient to replace the flat background(CLR_SKY.col) fill with a vertical color transition. Stage 7 uses it twice — one instance for each sky state.

The Two Gradient Instances in Stage 7

// Top: deep blue zenith (cooler sky)
const clrSkyTop =
    new SWColor(210, 58, 76, 100);
// Bottom: pale horizon haze
const clrSkyHzn =
    new SWColor(197, 18, 97, 100);

skyGradient =
    new SWGradient(clrSkyTop, clrSkyHzn);

// Top: scorched near-black sky
const clrExpTop =
    new SWColor(10, 75, 15, 100);
// Bottom: fireball orange-yellow
const clrExpBot =
    new SWColor(28, 100, 96, 100);

explosionGradient =
    new SWGradient(clrExpTop, clrExpBot);

The most satisfying glow-up is behavioral, not visual: the bomb now only detonates when you click directly on it. Clicking the sky, the clouds, or the background does nothing. Three functions work together to make this happen.

The Coordinate System at a Glance

Canvas pixels (mouseX, mouseY):

  (0,0) ┌────────────────────────┐
        │  x increases →         │
        │                        │
        │    y increases ↓       │
        └────────────────────────┘ (400,400)

SWGrid user coords (ux, uy):

(-200,+200) ┌─────────┐ (+200,+200)
            │  (0,0)  │  ↑ y up
            │  center │
            └─────────┘
(-200,-200)           (+200,-200)

Every CSS rule in bombStg7Styles.css was added for a specific reason. The sections below explain the professional and aesthetic thinking behind each decision.

1 — Dark Atmospheric Body Background

2 — Flexbox Centering

3 — Canvas Drop Shadow & Rounded Corners

4 — Crosshair Cursor

5 — Monospace Title Header

6 — Fixed-Height Footer & visibility: hidden

Summary: Every Rule and Its Purpose

Use the Copy button above to grab any file, then try these experiments.

1. Experiment 1 — change the explosion sky color: In bombStg7Sketch.js, find EXP_BOT_H = 28 (fireball orange) and change it to 130 (green). The sky base after the explosion will shift to a sickly toxic green. Try 280 for a purple “magic bomb” effect.
2. Experiment 2 — make the hint text dramatic: In bombStg7Styles.css, find the #hintText rule and increase font-size to 1.2rem. Change color to #f9a825 (amber). The reset hint should now appear large and warm, matching the explosion palette.
3. Experiment 3 — tint the box-shadow to match the explosion: In the canvas { box-shadow } rule, change the first shadow's color from rgba(30, 90, 180, 0.28) to rgba(200, 80, 10, 0.35). The canvas glow will now be warm orange. Can you make the box-shadow switch with the sky gradient using JavaScript? (Hint: look at how hintEl.style() works and apply the same pattern to the canvas element.)
4. Experiment 4 — add a third gradient state: What if the sky turns a cool pale green after the explosion fades but before reset? Create a calmGradient for that moment (State C: exploded === true && particles.length === 0) and update drawBackground() to show all three states.
5. Challenge — animate the gradient transition: Instead of an instant switch between skyGradient and explosionGradient, interpolate between them over 0.5 seconds using a transitionT value (0 → 1) driven by millis(). You will need to create intermediate SWColor objects each frame by lerping the HSB values.
6. Experiment 6 — shrink (or grow) the hit zone: In mouseInBomb() in bombStg7Sketch.js, find the circle test and change BOMB_R_U (90) to 30. Now only the center clock-face area triggers the explosion — click the edge of the bomb and nothing happens. Try BOMB_R_U * 1.5 to make the bomb “magnetic” so it detonates even when you click slightly past its edge. What radius feels most satisfying?
   Bonus: skip the circle test entirely and remove it — the rectangle + triangle still cover the lower body. How much does the dead zone at the top matter?

⚠️ The Copy button requires https:// or localhost. On a bare file:// URL, right-click → “View Page Source”.