Concept:
Starting off this assignment, I began by brainstorming ways of incorporating the array into my artwork, and I ended up deciding that I wanted to create a shooting star effect, as I felt that, it was the most straightforward idea I could think of and it would allow me to have more creative freedom if I wanted to add more aspects as I developed my code. So the first thing I started with was creating the shooting stars array and the code for it. I wanted to create a generative night sky scene that felt calm, as if you were looking out a window during a star shower. The main idea was to use arrays and objects to animate shooting stars across the sky, inspired by the example we practiced in class. I chose shooting stars because they allowed me to use randomness, movement, and interaction in a simple but visually interesting way. As the project grew, I expanded the scene by adding a glowing moon and mountains with snowy peaks, which helped create a full landscape instead of just a blank sky. The mountains were created using the same loop structure we learned in class, where each mountain’s height comes from an array value. The glow effect around the moon was inspired by an example I found online that used layers of transparent shapes to create a soft halo. I further understood arrays by watching a YouTube video, since it is a somewhat complex concept, the video clarified what we learned in class and helped me feel more confident in implementing the code I was overall satisfied with my outcome. My goal was to mix static elements, the moon and mountains, with dynamic elements, the shooting stars, so the artwork feels alive but still peaceful. After the reading, it also made me think about user interaction, so I decided to let the viewer interact with the piece by clicking to add new stars. Depending on where the user clicks, a star is generated there, but its size, height, and speed are randomized. This allows the user to have some control while still keeping a random effect, which connects to the idea of the “thinking” part of the code referenced in the reading. Overall, the concept was to build a simple canvas that allowed me to apply what we learned in class, using arrays, loops, and object oriented programming to achieve my idea.
Code Highlight:
show(){
stroke(250,250,200);
strokeWeight(3);
line(this.x,this.y,this.x-this.length,this.y-this.length/4);
}
//every shooting star in the array goes through this loop
for(let i = 0; i <shootingStars.length; i++) {
//moves the stars across the sketch
shootingStars[i].move();
//allows the starts to be drawn
shootingStars[i].show();
//allows the starts to be respawned when the leave the sketch canvas
shootingStars[i].respawn();
for (let i = 0; i < mountainSizes.length; i++) {
//x position formula for the triangles
let x = 100 + i *180;
//color of triangle
fill('rgb(20,75,20)');
noStroke();
//upside down triangle to make it look like a mountain
triangle(
//bottom left corner of the mountain subtracted 100 from x to shift position left
x-100, 640,
//bottom right added 100 to x to shift the point right
x+100, 640,
//peak lifted up by subtracting the height comes from the mountain size array just like the nums[] example from class
x, 640 - mountainSizes[i]
);
//small white triangle which is the snow cap
fill(255);
triangle(
x-30,640 - mountainSizes[i] +40,
x+ 30, 640 - mountainSizes[i] +40,
x, 640 - mountainSizes[i] );
}
The first part of the code Im proud of is with the shooting stars . I am proud of this because the loop is based directly on the example from class where we used a loop to move and display each bubble. I was able to fully understand and adapt that example to my own objects, showing how arrays and objects can work together, which was my main goal. This loop controls the entire animation, without it, nothing would move, and it made me feel more confident in my coding abilities and in managing objects. I also learned how to make the shooting star look like it was actually stars by making them tilted. The shooting star looked tilted because the end of the line is drawn at this. x – this. length and this. y – this. length/4, which moves the line diagonally instead of straight across. Changing both x and y creates the angled streak that makes it look like a real shooting star.
Another is the respawn function and setting up the functions in general to restart the stars when they leave the screen. This was the trickiest part for me to understand, especially because it was what I started with. I spent the most time on it since it required checking conditions like if (this.x> width) and resetting values. In the respawn() function, I used an if statement to check when the star leaves the screen and then reset its position and speed. I learned the idea from the car example we were given, where the car resets once it goes off the screen, and I adapted that logic to my project by resetting the stars positions and giving them a random speed. This made the artwork feel alive and helped me understand how to use if statements inside a class, which felt like a big improvement for me.
Lastly, I am proud of an aesthetic addition involving the mountains. I used arrays similarly to the numbers example we did in class but applied it differently. Using the same structure, I created mountains instead of circles, with the mountainSizes array controlling the height of each mountain. I used the index variable to space the mountains evenly across the bottom of the canvas and added a second triangle as a snow cap to make them look more realistic and artistic. To add the snow cap I lifted it up by subtracting the height from the bottom of the canvas. This allowed the white triangle to sit exactly on top of the green mountain since the peak position is calculated using 640 – mountainSizes[i]. This section let me show my creativity and how I could take a class example and transform it into something that fit my assignment.
Reflection/future improvements:
Overall, this assignment helped me understand arrays and object-oriented programming in a clearer and deeper way than before. At first the concept felt confusing, but once I started applying it to something visual, it became easier to absorb and understand. The most challenging part for me was getting the shooting stars to respond correctly, along with small issues like spelling errors that I had to revise. I struggled with the logic at first, especially the conditions inside the class, but once I connected it to the car example I could directly see the cross reference. I also learned how important it is to break the code into smaller functions. Having separate move, show, and respawn functions made the project easier to manage, which reflects what we discussed in class. Adding the mountains also taught me how flexible arrays and loops can be, since I reused the same structure from the nums[] example but created something completely different. I am proud of how the final work looked because it feels like a complete sketch rather than just an individual final assignment. This project made me more confident experimenting with visuals, trying new ideas, and structuring code in different ways. In future work, I hope to add more interactive elements and experiment with new animations or even sound effects, such as a soft wind or chime when a new star is added. I also want to code more visually complex shapes to add depth to the piece, for example giving the star a diamond shape and an opaque trail. I think adding a more complex feature where the user can somehow remove a star would allow for more interactivity.
References:
Glow affect:
https://editor.p5js.org/_o.line/sketches/09NFFDGea
Youtube Video Arrays:
https://www.youtube.com/watch?v=fBqaA7zRO58
Arrays and loops code from class:
https://editor.p5js.org/maa9946/sketches/pNkSsqH_L
Car example for loop: