Documentation

Process

The project is an attempt to remake another project that I made at the start of last semester, which similarly attempts to simulate the solar system using p5 WEBGL: Solar System

Planets and Orbit

The key difference is that this time I wanted to move the planets using their x and y-coordinates instead of simply rotating them. I calculated the exact x and y-coordinates of each planet using the cos() and sin() functions, as demonstrated in the diagram below.

Additionally, I wanted to play a note each time a planet is touches the x-axis, which is when the sine of the angle is 0.

This time, I also wanted to make the sizes, orbit speed, and distance from the sun of the planets directly porportional to each other. However, even though the ratio between the sizes, orbit speed, and distance from the sun of different planets respectively correspond to reality, they are not inter correlative(the ratio between the size of a planet and its distance to the sun does not reflect reality) for aesthetic and practical purposes.

Camera

I also wanted to add a camera that orbits around each planet when a button corresponding to each planet is pressed. The camera works in a similar fashion as how a planet orbits around the sun.

There is also a camera that displays a comprehensive view of the solar system. This is achieved by placing it at a higher y position facing the sun.

Orbit Frequency Monitor

The most challenging part of this project is to visualize the orbiting movement of the planets using sine waves. Since I used WEBGL for the canvas, I had to create a separate 2D canvas to display sine waves. I came across a page while I was researching how to incorporate 2 separate canvases in one single sketch(link), which achieved this by calling the other canvas as a function. Then, I simply added the visuals of the sine wave that models each of the planet’s movement. The y-value of the sine wave reaches 0 when the planet is on the x-axis. I then used the p5.MonoSynth() to play its corresponding note when a planet is on the x-axis.

In the more comprehensive top view of the solar system, the orbit of the planet that has played a note will be highlighted in yellow.