Initially I hard time coming up with ideas of what I wanted to do for this project. Sitting in my friend’s room, who is obsessed with space, I got inspired to make something space related. In addition, I wanted to experiment with inserting images into p5.js (using the ‘preload’ function)- this was definitely the most time consuming and trickiest part. I ended up realizing that the images I selected from google should actually have a transparent background, many of them seem like they do but it’s actually just a white and grey grid. So initially this is how the inserts would look like –
Once I tackled this issue, by downloading the images directly from websites, I inserted more images such as the rocket (that I wanted to launch). I figured out how to make more than one cloud appear (and control the size, position and lastly the movement of each one). I was then able to control the speed at which the clouds and rocket move – using ‘posXorY +=’ a value. I also played around with shapes (ellipses) but ended up not using them.
I then added the background of the sky as well as the little astronaut which is controlled by the curser (by inserting ‘mouseX, mouseY; into the line of code) which is there just for fun.
Another issue I ran into was with making the clouds reappear onto the screen in a loop form. This took me the longest to figure out.
I made a class which included a constructor which had the different features of my clouds such as the x and y positions, the speed at which they are moving and their width and heights. Then I was able to run this and move the clouds the way I wanted.
In the future, I’d like to make a game out of this concept. Also, I’d like to use arrays in my code – maybe for the clouds. Next time I would make this outer space so I could include shooting stars and different planets floating around.
This is the final outcome.