Week 2 – Assignment

My concept:

For this assignment, I made an interactive starfield. The idea was to have a field of stars scattered across the canvas that glow individually when the mouse touches them and I used loops to generate and animate the stars and a conditional to control the glow effect. I was inspired by just looking at the night sky at the Al Quaa Milky Way Spot.

How I made it:

I started by creating an empty array called stars to hold each star as an object. Then in setup I used a for loop to generate 125 stars, giving each one a random x position y position and size and then pushing that data into the array as an object. After that in draw I used another for loop to go through every star in the array each frame to check its distance from the mouse using distance function and used an if/else conditional to decide whether that star should glow bigger and brighter or stay as a small dim dot.

Code highlights:

for (let i = 0; i < stars.length; i++) {
    let s = stars[i]; //named it as s for convenience

    //checking distance from mouse to this star
    let d = dist(mouseX, mouseY, s.x, s.y);

    if (d < 60) {
      //close to mouse so glows bigger and brighter
      fill(255, 255, 200);
      noStroke();
      ellipse(s.x, s.y, s.size * 3, s.size * 3);
    } else {
      //normal dim star
      fill(255);
      noStroke();
      ellipse(s.x, s.y, s.size, s.size);
    }
  }

This part is what I like the most. Since the loop runs through every star every single frame, each one is constantly rechecking its own distance from the mouse which is what makes the glow follow the cursor smoothly and only affect stars that are actually close to it.

Embedded Sketch:

Reflection and Ideas:

I really liked doing this assignment but if I had to change something, I might have added more details to the stars and like a shape to it. I could have also tried to add a moving feature that causes the stars to maybe follow or repel away from the mouse. I was inspired by the video to make the stars random positions each time. I am happy with how it looks and maybe could work on it more in the future to make it even better!!

References:

https://p5js.org/reference/p5/loop/, https://p5js.org/reference/p5/for/, https://p5js.org/reference/p5/if/