A view from space

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:

1. Generating stars at random positions at the beginning of each sketch
2. Causing the earth to rotate over time using the rotateY() function
3. 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.