This week’s assignment was focused on animation. One of my biggest struggles with this assignment was deciding on what to do. I had so many ideas I was excited about: a two-level drag and drop puzzle game, a simplified version of the game TOCA BOCA Hair Salon that allows users to be a hair stylist, or I even thought of doing a weather stimulator. I wanted to challenge myself, but soon realized I was being overly ambitious due to the time constraints that I had. Therefore, I started them all, but it did not get far in any of the rabbit holes I pursued.
I still wanted to challenge myself so I decided to settle on making an earth stimulator using 3D primitive shapes.
I started by creating the earth using a sphere. I then explored how to upload images onto p5.js using the functions loadImage() and image(). I struggled at first to find an image that I could use as a texture for the earth that was realistic. Up until this point, I was very proud of myself for coming up with this idea on my own. However as I googled how to overlay 2-D images to 3-D spheres I came across a video of low and behold Daniel Shiffman creating a solar system using p5.js. Let’s just say I no longer felt impressed with myself after that xD. As a result, I used the texture image he used from Planet Pixel Emporium (shown below).
To create stars in my universe, I created a star shape (shown below) on Adobe Photoshop. I created an 2-D array within the setup() function to randomly create and store the x, y and z coordinates of 100 stars across the canvas.
My 3 interactive components in this sketch include:
- Generating stars at random positions at the beginning of each sketch
- Causing the earth to rotate over time using the rotateY() function
- Allowing the user to toggle, drag, and zoom into the earth whenever their mouse is clicked by using the orbitControl() function
The main issue I faced with this coding project is that I was not sure how to remove the black background from the stars on the z axis. I used a png file, but the background still appeared as I rotated the earth. Despite all the frustrations along the way, I think it came out pretty good and is very close to the idea I was envisioning in my head!
To view my code and interact with my code, please look at my p5.js file here.
