Stage 1: Pure Processing
This app was novice Jackson's first experience with p5js after receiving a bit of training at the TNT lab. Using AI, he crafted this code and it will form the basis for our saga. It has a lot of 'magic numbers', but some meaningful helper functions, but the objects are not scaled to the canvas which creates issues if the browser is resized.
Stage 2: Improved JavaScript
This stage featured several improvements to the code structure, readability, and maintainability. We 'shoehorned' Jackson's code into a template, designed to make the code more modular and reusable, and to fit into the 'ecosystem' of TNT and SketchWaveJS.
It was a trial-run of our Processing template #1 and its incorporation uncovered some important lessons about how to design templates that are flexible enough to accommodate a wide range of code styles and structures, while still providing meaningful guidance and support for improvement.
Stage 3: ORB Refactor
The animation looks exactly like Stage 2 — same Earth, Moon, station, and drifting stars. Everything that changed is under the hood, organized around three pre-SketchWave improvements:
O — Organize constants: every inline fraction (width*.25, 0.005, 15…) becomes a named constant at the top. The sketch reads like a mission-control panel.
R — Render, then update: drawMyDesign now has two explicit phases — Phase 1 renders everything back-to-front; Phase 2 advances state. No draw function mutates globals mid-frame.
B — Bootstrap in setup(): stars and land masses are built once in initMyDesign(), a hook called from setup(). The per-frame guard in drawEarth is gone.
Aside: p5js Template2
We often rely on pre-built templates to get a running start on new projects. No template is perfect, and when we used 'template #1' for Stage 2, we learned a lot about how to make templates more flexible and supportive of improvement. 'Template #2' incorporates those lessons.
Ideally, a user should only have to modify the template's initMyDesign() and drawMyDesign() hooks to get a sketch up and running. The template should be flexible enough to accommodate a wide range of code styles and structures, while still providing meaningful guidance and support for improvement.