Composition 3: Three.js playGnd

The coding programme that we have learnt this week is called Three.js playGnd which uses open streamed code to allow users to create WebGL animations without the need for additional plug-ins. 

We were tasked to experiment with this programme and to develop interesting compositions. The whole idea behind Three.js playGnd is to augment the code in the fact that the user can visually see the code changing whilst designing their respective animations. This in turn helps to better understand what lines of code are used for and how they contribute to the animation as a whole. 

My first experiment is archived at the following address:

http://threejsplaygnd.brangerbriz.net/s/?id=1210

The design process to end up at the above final video:

I began this composition using a tetrahedron.

I then decided to add detail into it and thus adding more faces to the geometry to create the above.

Lastly before copying the code, I changed the material properties from normal to basic. 

I decided that on this composition, I would use the morph all points randomly snippet to create a crazy, spastic looking animation. The above screenshot is the coding for this snippet to work.

It is hard to see, due to the basic material property that I have applied, but this is a screenshot of my geometry as all its points morph randomly.

I then changed the colour of my geometry in order to try and make it easier to see it as it morphs. This was unsuccessful however.

Instead, I then used the oscillate mesh hues snippet so that my geometry would change colour every half second or so. Hence, this screenshot is the coding to allow this to happen.
(See var time ... mesh.material.color)

Next step was to make my geometry start moving to try and create interesting effects.  

The following couple of screenshots are the result.

This screenshot I played with the code for my geometry: geometry = new THREE.TetrahedronGeometry(150,2). I changed the numbers to (10,2) to create the above. However... after this screenshot I put the numbers back to its original and then changed the numbers to (150,100). This crashed the Internet haha.

My coding from screenshots from here on out will look different from above in terms of order due to the fact that I didn't follow the same order of steps when remaking my animation.

This is my animation again, however with the all points morphed left out at this stage. I like this, however it is not 'crazy' enough. It is quite placid, whereas this composition I wanted to achieve something more energetic. 

Adding the morph code in once again.

The following are just some screenshots of how my geometry moves with the trail that is left behind as the hue changes.

I have done two steps in this screenshot, I have both changed the camera position on the z-axis from 500 to 1000, but I have also added a snippet which swings the camera on the x-axis. This has changed the animation drastically in which it now spins from side to side.

Again I have made another two alterations when for this screenshot. Firstly I changed the camera position on the z-axis again from 1000 to 10,000 as I want to keep negative space in mind while I design this animation. Secondly, I have changed the vertices values in which my geometry morphs from. Changing the values as I have has stretched my geometry on the x-axis completely changing the form in the process and creating something was captivating in the process. 

I really liked the effect created, however I felt that there was a little bit too much negative space on the screen. Therefore I halved the camera position value from 10,000 to 5000.

A few screenshots according to my changes and thus my final composition.