The three-dimensional rendering was an interesting challenge. The principles of generating elements on the canvas were somewhat similar to two.js and raphael.js, with the added challenge of 3-dimensional space (a z-axis) as well. Every element had a geometry (such as a cube or a sphere) and a material. I learned a lot about three.js and how it was used using the three.js documentation, as well as a series of random tutorials found online on starting out with three.js.
There were 3 elements in the 3-dimensional space. Firstly, the background was essentially an extremely large cube put far in the distance. The material of the cube was a basic color, and the color of this material (i.e. the cube) would be the background color of the entire canvas. There is a main sphere in the middle of the canvas, which is made of a material called points. This material essentially turns each point on the sphere into a square point called a vertex and stores the information for all the vertices in an array. I was able to manipulate the behaviour of these vertices based on what I learned about arrays in class. The final sphere was small and invisible and used as a tracker - the behaviour of the animation on the app would change based on the position of the tracker sphere.
Pressing on the screen would activate the movement of the tracker sphere, which would move from the bottom of the sphere to the top. If any of the vertices were below the tracker sphere on the y-axis, they would move randomly in all directions on every frame. If the tracker sphere went past a threshold near the top of the sphere (y=25), it would trigger the transformation of the 'planet' state into the 'stars' state. What would happen at this stage would be that the vertices would stop 'vibrating' in random directions, the scale of the entire sphere would expand, and the colors of the point and basic materials would invert. Pressing on the screen again would send the tracker sphere back to its original position, wherein the sphere would return to the 'planet' state after the sphere went below 25 on the y-axis.
The usage of mobile device orientation to rotate the main sphere was something that I learned in class, applied to the rotations of the x and z axes of the main sphere in the app.