🚀 Stage 2: Source Code Showcase

Same rocket. Better code. Every improvement explained.

📂 The Stage 2 Files

Stage 2 is a refactoring stage: the rocket looks exactly the same as Stage 1 (click “Stage 1” in the card footer to compare), but the code has been completely reorganized. Three files make up the Stage 2 build:

File What it does Stage 2 changes
rocketStg2.html HTML shell — loads p5.js, CSS, and the sketch File header & title added; stylesheet pointer updated
rocketStg2Sketch.js The p5.js sketch — all drawing logic Full professional overhaul (see Laundry List)
rocket2Styles.css Minimal CSS reset — canvas flush, no margin Unchanged from Stage 1 (intentionally minimal)
🤖 How this page loads the code: This page uses the browser’s Fetch API to load each source file at page-load time — the same technique websites use to pull JSON from an API. Edit a source file on the server and the showcase updates automatically next time you visit. No copy-paste. No re-escaping HTML entities. Just fetch(url).then(r => r.text()).
⭐ Star Technique: Stage 1 vs Stage 2

In Stage 1, random(width) and random(height) were called inside draw() every frame. That means every star gets a new random position 60 times per second — producing both a twinkle effect and an unintended slow drift across the screen.

In Stage 2, star positions are calculated once in setup() via generateStars() and stored in an array of objects ({ x, y, size }). Each frame, drawStars() reads the fixed x / y from the array and only re-randomizes the alpha (opacity) — so stars twinkle but never move.

Bonus: the spread operator (fill(...CLR_STAR, alpha)) expands the [255, 255, 255] array into three separate arguments, letting us append a per-call alpha without writing fill(CLR_STAR[0], CLR_STAR[1], CLR_STAR[2], alpha) every time.
📋 Stage 2 Laundry List
rocketStg2.html — running live inside an <iframe>
⛶ Open Full Size ▶ Stage 1 (original)

📜 Source Code

rocketStg2.html HTML5 
Loading rocketStg2.html…
sketches/rocketStg2Sketch.js JavaScript 
Loading rocketStg2Sketch.js…
styles/rocket2Styles.css CSS 
Loading rocket2Styles.css…

💪 Try It Yourself

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

  1. Create a new project folder with sketches/ and styles/ sub-folders.
  2. Paste each file into VS Code and save it with the matching filename.
  3. Open rocketStg2.html in your browser — you should see Griffin’s rocket!
  4. Pick one constant to change — try setting STAR_COUNT = 300 or changing CLR_ACCENT to [100, 255, 100] for green fins — and observe the effect.
  5. Challenge: add a ROCKET_SPEED constant and make the rocket climb slowly up the canvas. Hint: use a let rocketY variable in the DATA section and decrement it in draw().

⚠️ The Copy button requires a secure context (https:// or localhost). If you’re viewing this file directly from your file system (file://), right-click the Run link above and choose “View Page Source” instead.