Assignment 3: Twinkling Constellations

My Concept

This project is a twinkling night sky, where stars pulse and change brightness naturally. Clicking (or pressing a key) creates constellations by connecting nearby stars, randomly forming unique patterns each time. The background is a real sky image that i uploaded beforehand.

Code Highlight

It took me a while to figure out the way to form constellations between stars. So first, I try to find stars near the mouse (within a distance of 100). Then, I enhance the twinkling effect by making closer stars (within a distance of 50) brighter. Also, my constellations sometimes looked messy with too many connections so i had to limit those to only nearby stars (within a distance of 70) for cleaner constellations.

function createConstellation(x, y) {
  let constellationStars = [];
  
  for (let star of stars) {
    let d = dist(x, y, star.xPos, star.yPos);
    if (d < 100) {
      constellationStars.push(star);
      if (d < 50) {
        star.setSizeAndAlpha(d);
      }
    }
  }

  connections = [];
  for (let i = 0; i < constellationStars.length; i++) {
    for (let otherIndex = i + 1; otherIndex < constellationStars.length; otherIndex++) {
      let d = dist(
        constellationStars[i].xPos, constellationStars[i].yPos,
        constellationStars[otherIndex].xPos, constellationStars[otherIndex].yPos
      );
      if (d < 70) {
        connections.push([constellationStars[i], constellationStars[otherIndex]]);
      }
    }
  }

  for (let star of constellationStars) {
    star.setBrightness(255);
  }
}

Reflections

The vision i had when creating this was the power of connection, resembling “the butterfly effect” — the idea that everything is interconnected and happens for a reason.  At first, the stars exist independently, scattered across the sky like people and events in the world. But through interaction (user clicks), certain stars come together to form constellations: patterns that weren’t visible before. This could represent how separate people, situations, or choices can align to reveal meaning in what once appeared random.

Looking back, if I had to do this project again, I would likely try to refine the performance, especially if the number of stars increases. I would also improve the design part by adding more visually engaging elements. Overall, I’m satisfied with the result.

Embedded sketch