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=1129
The design process to end up at the above final video:
Firstly, I decided to use the lathe geometry with a lambert material.
I increased both the points and segments to 80 and 46 respectively in order to create the extra rings.
Another perspective - looking through the rings.
I began to experiment by changing the colours of my mesh before deciding on #42cdeb as the main colour, and #f7feff as the ambient colour.
Adding to the screenshot above, I then changed the emissive colour to #2b2650 with the specular colour to #111111. Finally in order to get the lighting effect on my mesh, in decreased the shininess to -6. This creates an interesting effect in the fact that as my mesh spins, the side that is in the light appears to fade into the background.
Lastly, I added the above lighting effects. Most of the settings are unchanged however.
Another few perspectives of how my mesh geometry seems to fade to the background as the light hits in at different angles.
This screenshot shows the code for my mesh geometry copied and pasted into the editor programme of three.js playGnd. It also shows a live view (my mesh in the background) in which projects the outcome when I tamper with code.
Showing the rest of the coding for my mesh and the lighting that I will soon animate.
Snippets are the animation function for one's mesh geometry. The highlight part of this particular code is for creating a trail for one's geometry. When this is combined with the second bit of code in this screenshot, as the geometry spins and moves within the space, it will leave a trail behind it to create an interesting effect.
Line 27/28: A screenshot showing how the copied open sourced code from the previous screenshot is implemented into the coding for my geometry animation.
First screenshot of how my animation looks since the snippet code is now in function. How I have set up my lighting and reflectiveness in my geometry is going to give me really interesting and lovely patterns as it spins and moves leaving a tonal trail behind it.
In this screenshot I have gone back to my code and changed the mesh.position .... from *50 to *40. At this stage it is simply a case of experimenting in order to create an outcome that I am both happy with and looks aesthetically pleasing.
The following screenshots are of how my animation is looking as I analyse it for potential changes.
This screenshot I have dramatically the speed in which my geometry spins. This is done through mesh.rotation.x/y/z code from their respective speeds of 0.0005, 0.0002 and 0.001 to 0.05, 0.05 and 0.05...
Yeah this was horrible.. It was so fast that it gave me a headache and also that it was moving so fast, the trail was constantly changing so the viewer cannot appreciate the form and pattern created.
Therefore I have changed the code back to how it was but I kept the z function the same as the experiment above. (the axis in which the geometry spins towards the viewer and out of the screen)
A couple of screenshots showing the forms created. To be honest I am still not too keen on these so I will continue to play around with the code to find something that looks a lot better.
In an attempt to create something more aesthetically pleasing, I decided that maybe if the viewer had a better viewer of the forms and patterns created it would be a lot better. Therefore I have changed the camera perspective to (40, W/H, 1, 400) from the original (50, W/H, 1, 10000). This has zoomed the camera out a lot more.
Something that I have noticed is that there is too much shininess in my model and that the white dominates the trail. Therefore I will go back to my code and change the shininess value from -6 to -4.
I feel that this is a lot nicer as the tones of blue and white blend and converge a lot smoother than before. I forgot to grab a screenshot of the code, but there was one more tweak that I have done in order to create my final animation (video above), that is going back to the camera perspective code again and changing it from (40, W/H, 1, 400) to (80, W/H, 1, 400). What this has done is change how it looks when my model begins its rotation. It now appears out of the background instead of a consistent rotation like before. As a whole, I feel really happy with how my first experiment with this programme has turned out. Can't wait to keep coding and designing new and improved compositions in both this programme and others.
No comments:
Post a Comment