🚀 Stage 1: Griffin's Original Rocket

The starting point. Real student code, unmodified. Study it before we improve it.

📂 The Stage 1 Files

Stage 1 is Griffin’s original, unmodified code — exactly as he wrote it. The rocket works, it looks great, and it demonstrates real creative problem-solving. Three files make up the Stage 1 build:

File What it does
origRocket.html HTML shell — loads p5.js and the sketch
origRocketSketch.js The p5.js sketch — all drawing logic in one file
origRocketStyle.css Minimal CSS reset — canvas flush, no margin
🤖 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()).
🔍 What to look for in Stage 1

Griffin’s code works — which is the most important thing. But as you read it, notice a few patterns that set up the Laundry List analysis:

• Magic numbers everywhere. Values like 260, 150, 80, and 300 appear directly in the drawing calls. What do they mean? You have to mentally trace each shape to find out.

• Everything lives in draw(). Stars, body, nose, window, fins, flame — all in one long function with no helpers. As the rocket gains more parts, this gets harder to read and maintain.

• Stars re-randomize every frame. random(width) and random(height) are called inside the for loop, which runs 100 times per frame (6,000 times per second at 60fps). The stars twinkle and slowly drift — an unintended side-effect of regenerating positions on every draw call.
🏆 This is real student work. Griffin wrote this from scratch without a template. The goal of the Laundry List and Stage 2 is not to criticize — it’s to show one path forward for making good code even better. Every professional developer’s first draft looks a lot like this.
📋 Laundry List ➡️ Stage 2 Showcase
origRocket.html — running live inside an <iframe>
⛶ Open Full Size ➡️ Stage 2 Showcase ➡️ Stage 3 Showcase

📜 Source Code

origRocket.html HTML5 
Loading origRocket.html…
sketches/origRocketSketch.js JavaScript 
Loading origRocketSketch.js…
styles/origRocketStyle.css CSS 
Loading origRocketStyle.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 origRocket.html in your browser — you should see Griffin’s rocket!
  4. Watch the stars carefully for 10 seconds. Do you notice the slow drift? That’s the random(width) regenerating positions every frame.
  5. Challenge: open the Laundry List and pick one improvement to make yourself. Add a single named constant — try const CANVAS_W = 600; at the top and replace the first createCanvas(600, 400) argument with it.
  6. Harder challenge: extract the star-drawing code into its own function drawStars() { ... } and call it from draw(). Does the rocket still look the same? (It should!)

⚠️ 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.