Date: June 30, 2025

Challenge: Shooting Star Animation

Folder: 12_shooting_star

✨ What I Worked On

For this challenge, I created a nighttime sky with two animated shooting stars. I decided to have one star move diagonally from the top-left to bottom-right, and a second star that travels from the bottom-right to top-left. I added a dark RGB background and layered in 50 small stars using ellipse() with randomized positions to give the illusion of a twinkling night sky.

🧠 What I Learned

• I now understand how to animate shapes using variables that update over time inside the draw() function.
• Using x += or y += lets me control direction and speed.
• I learned the difference between drawing a random star field inside draw() (which causes flickering) vs. placing them in setup() for a static background.
• I learned how to pick a better background color using RGB instead of grayscale. I switched from background(50) to a custom ash-black tone using background(28, 33, 38), which made the sky feel richer.

🔍 Code Breakdowns

Step 5 – Starry Sky with Random Stars (Line 22):

ellipse(random(0, 400), random(0, 400), 1, 1);

This draws 50 tiny stars across the canvas. Because it’s placed inside a for loop inside draw(), each frame creates new randomized stars, which makes the sky shimmer. This creates a blinking effect rather than static stars.

/Step 6:Moving Star (Line 28-29):

x1 += 3;
y1 += 2;

These two lines gradually move the star across the canvas. By adding to x1 and y1 each frame, the star travels diagonally. For the second star, I reversed the directions using x2 -= 2 and y2 -= 3 to move it up and to the left.