Loops – Aigerim


For this project, I recreated an artwork from ProgrammInformation. It is a collection of stars that are scattered throughout the screen. I took the idea of a static image and decided to make it dynamic. I also randomized the number of stars in each iteration and the shape of the star, thus creating infinitely many unique similar artworks.


It was a bit tricky to figure out how I am going to angle the lines of each star and make them appear with random rotations and lengths. The way I went about is that I picked a random point (x and y coordinates) where the star would be centered and drew lines from that point to a new, random point within a given range (as can be seen on the code below).

function cluster(x, y) {
  for (let i = 0; i < 20; i++) {
    dx = random(-25, 25);
    dy = random(-25, 25);
    line(x, y, x + dx, y + dy);

Each line in a star is away from the center at most 25 pixels in both x and y, and ranging the random value of that distance (dx and dy respectively) from negative to positive enabled me to create lines around the center in all directions. Only the number of lines in each star remain constant (20), but everything else is randomized, creating a unique image at each new frame.


Overall, I am proud of the solution I came up with in creating the lines, as it does not seem to be a trivial or traditional way to go about it, at least for me. If I were to work in this further, I would love to incorporate some interactivity (e.g. making the frame change whenever user clicks on the image) or adding some color.