Project 1 — Drifting Stars
We don’t start with rules. We start with a toy. You’re going to build a mesmerizing cosmic window — then stick your hands in the engine and break it on purpose.
A sleek, midnight-black canvas embedded right in your browser. Tiny neon-tinted stars drifting across the screen, pulsing with soft light. When a star drifts off one edge, it wraps around and reappears on the other side.
You’re not just going to look at it — you’re going to speed them up, multiply them by the thousands, and change the colour of the entire universe. All by changing a few numbers.
Open your AI assistant of choice — Claude, ChatGPT, or DeepSeek all work. Copy and paste this exact prompt:
“Write a single, complete HTML file that builds an interactive ‘drifting stars’ simulation.
Inside the file, include:
1. A clean dark container with a midnight-black canvas (#0A1A0F) centered nicely on the page.
2. A JavaScript loop that renders about 50 stars drifting smoothly across the screen.
3. Each star should have properties like an X/Y position, a tiny radius, a speed value, and a soft, glowing neon color pulse.
4. If a star drifts completely off the edge of the screen, it should wrap around and reappear on the opposite side.
Keep all the HTML, CSS, and JavaScript tucked neatly inside this single file so I can run it easily by double-clicking it on my desktop. Make the code highly readable, with short comments explaining where the variables for ‘speed’, ‘star count’, and ‘colors’ are located so I can change them later.”
When the AI responds, it hands you a block of code. Here’s exactly what to do with it:
Look for a Copy or Copy Code button in the top-right corner of the AI’s code block. Click it.
Open Notepad (or TextEdit on Mac). If there’s old code inside, delete it completely. Paste the AI’s code in.
Go to File → Save As. Name it stars.html — not stars.txt. On Windows, change the file type dropdown to All Files first, then type the full name including .html.
Find stars.html and double-click it. Your browser opens. Neon stars are drifting across a midnight canvas. Take a breath and watch it for a moment.
You just commanded an AI to build a custom rendering canvas from scratch, and your computer is actively processing that logic right now. Now let’s turn it into Play-First Programming.
Keep your browser open on one side of your screen and your notepad code open on the other. We’re going to change one thing at a time and watch what happens.
Look inside your notepad for a line that looks something like this:
Or a loop that looks like:
Change that 50 to 2000.
Save the file (Ctrl+S on Windows, Cmd+S on Mac), go to your browser, and hit Refresh.
Look inside the <script> tags for the math driving the movement. It will look something like this:
s.y += s.dy; // Move star on Y axis
Somewhere just above that, the AI set those speed values with small numbers like 0.5 or 0.3 to keep things calm.
Find where those speed values are assigned. Change something like Math.random() * 0.5 to Math.random() * 25.
Save and refresh.
Look inside the <style> tags near the top of the file, or inside the drawing loop. You’ll see something like:
Or in the JavaScript:
Swap out that midnight-dark tone. Change #0A1A0F to a colour keyword like hotpink, purple, or darkblue.
Save and refresh.
While you were busy making chaos, your brain quietly absorbed three foundational concepts of visual programming.
<canvas> element — where a pixel-by-pixel rendering engine executes all visual coordinate mapping. Everything you saw was drawn there, one frame at a time.dx and dy, you manipulated the velocity modifiers that dictate how many units an object moves across the horizontal (X) and vertical (Y) axes every single frame.requestAnimationFrame. That’s the heartbeat of every animation you’ll ever build.