Week 2 – Generative ArtWork

For this assignment I wanted to create a small interactive starfield like looking at a moving night sky. Recently I have been very interested in space and how I can implement it in my works, so I used this sketch as a chance to try a simple space scene. My idea was to have many tiny stars drifting down the screen at different speeds, but also to make the scene respond to the viewer. When the mouse moves near a star, it reacts by changing color and size, so it feels like the user is activating and touching the star. I also added a speed mode that you can activate with the space bar, so that the whole field accelerates. The focus of the sketch is on motion and interaction.

Code highlight I am proud of

The part of the code I am most proud of is how I created multiple stars with random properties and then updated them in a loop. Instead of coding circles, I wrote a helper function that builds a star object with random position, size, brightness and speed, this is one of the ways I implemented randomness:

// randomness used, create a new star with random properties
function createStar() {
  let x = random(width);
  let y = random(-100, height);
  let size = random(1, 4);
  let brightness = random(150, 255);

  let xSpeed = random(-0.1, 0.1);
  let ySpeed = random(0.5, 1.2);

  return {
    x: x,
    y: y,
    size: size,
    brightness: brightness,
    xSpeed: xSpeed,
    ySpeed: ySpeed
  };
}

I like this part because I am generating many small data objects and storing them in an array. Each star gets slightly different random values, which makes the starfield look less repetitive. The cretestar() function also lets me recycle stars easily. When a star goes off‑screen, I just replace it with createstar() again, so there is a constant flow of new stars without writing another drawing code.

Another small piece I am happy with is the interaction that changes color and size when the mouse is close:

let distance = dist(mouseX, mouseY, star.x, star.y);

if (distance < 50) {
  // color and size change when mouse is close
  fill("magenta");
  ellipse(star.x, star.y, star.size * 2, star.size * 2);
} else {
  fill(255, star.brightness);
  ellipse(star.x, star.y, star.size, star.size);
}
}

Using dist() was also a new thing I learned in this sketch. In p5.js, dist( x1, y1; x2, y2) calculates the distance between two points, so I can easily measure how far the mouse is from each star. By checking if that distance is less than a certain value, I can define an interaction radius around every star. I think it makes the sketch feel more alive, because the stars react as soon as the cursor approaches them.

Embedded sketch:

I am happy with how this sketch turned out, especially because it let me bring a recent interest of mine, space, into my code. It is nice to see that something I am interested about visually can be translated into an artwork which is also interactive using programming. It boosts my confidence in connecting my personal themes and aesthetics with what I am learning in p5.js. In the future, I would like to move toward more advanced drawings and interactions. I want to explore new functions and techniques in the p5.js reference so I can build richer scenes, maybe with planets and nebulas. I am also interested in opening new things in code for myself as using voice and classes for my ease in code and so that each new sketch becomes a little step toward more expressive interactive artworks.