Overview
At first, I wasn’t sure what to create for this project, so I decided to just start by making something simple: dots. My plan was to practice using loops by randomly placing dots on the screen. I used a while loop to create many dots, and once I saw them on the canvas, I realized they looked a lot like stars scattered across a dark night sky.
That gave me the idea to turn my project into a night sky scene. I kept the dots as stars, and then I wanted to make them feel more realistic. To do this, I decided to practice with a for loop to make the stars twinkle. By adjusting their brightness smoothly over time, the stars started to fade in and out, creating a gentle twinkling effect.
In the end, my project isn’t just a pattern of dots, it’s a simple, animated night sky that uses both while and for loops, and I really enjoyed the process of seeing it come to life step by step.
Highlight of code
One part of my code that I really enjoyed working on was where I used the while loop to create all of my stars. At first, I didn’t fully understand how a while loop worked, but through this project, I learned how it keeps running over and over until a certain condition is met.
let count = 0;
while (count < 500) {
stars.push({
x: random(width),
y: random(height),
size: random(1, 3),
phase: random(TWO_PI) // different twinkle timing
});
count++; // increase count each time
}
I used the while loop to generate 500 stars, each with a random position and size. What I liked about this was how simple it felt to control the number of stars, I just set a limit, and the loop kept creating stars until that limit was reached.
This helped me understand loops better because I could actually see the results on the screen. It also made me realize the difference between a while loop and a for loop. The while loop gave me more control over the setup process, and it was perfect for building the starting starfield for my night sky.