week three – thursday 1st august
task two: independent study
I found this example of creative coding on Open Processing. It is called ‘Noise Flow Field Painter‘ by the user Jason Labbe and works through strokes which are then rotated by a ‘flow field’ and layered to mimic images that can be uploaded.
week three – thursday 1st august
task one: independent study
After playing around with three.js and learning the basics of what we could make and how to modify lighting, environment and how to include snippets we were tasked with creating three outputs of our own for independent study.
stars
This output initially started with a yellow octahedron with a deep navy black background to mimic the night sky. Using the snippet called ‘particle’ the octahedron was multiplied and distributed along the canvas randomly using ‘vertex.x = 1000 * Math.random() – 500; ‘ where ‘x’ was replaced with z and y to randomise all axis for all mesh. Then the positions are modified to be set on a rotation of 0.0005 as well as the camera position slowly rotating to create a sense of atmosphere.
dragon knots
This output began with a knot design from the three.js drop-down menu. The materiality for this design was set to normal but on the back side. The background colour (red) was selected to contrast with the colours within the knot. This colour palette reminded me of the common colours that dragons are depicted as, so this output was named ‘dragon knots’.
Similar again to the stars output, the snippet used duplicated the knots 200 times over, using ‘mesh.position.y = Math.random() * 3200 – 3200;’ to randomise the z,x and y axis for each mesh. In addition to this the camera position was used from the swing snippet and changes the x and the y axis of the camera to swing the camera angle out and back into the centre of the knot outputs.
purple circle
This output is a simple purple ring with Lambert shading in a standard purple colour. I used different intensity and colours for lighting to enhance the rendering of this ring.
I applied the ‘leave trails’ snippet and limited the horizontal (x) axis to the centre of the window so that the rotation and trail of the ring remained within the diameter of the ring. The low opacity of the ring combined with these modifications means that it appears as if this ring is creating a sphere as it loops over & within itself.
week two – thursday 1st august
lecture notes:
Three.js is an archive of coding outcomes that are created in Java. It is modelled on the idea of learning through experimentation and building on what others have created.
The right hand menu has sliders and drop down menus that can alter the product/objects materiality, size or colour as well as environmental factors. These changes are reflected in the code that sits onto of the object. Seeing these changes occur in code and in the product itself helps you learn through seeing the changes without having to know the code.
As an experimental project, the three.js playground isn’t maintained so there are some elements which don’t always work.
z = depth
shape = mesh (is made up of material & geometry)
saving to the archive:
The three.js archive is not monitored and has thousands of outputs and forks saved in a list. The best way to ensure that our work is saved and viewable regardless of the changes within three.js. To do this you need to copy all of your code (ensuring you get all of the code) into a text editor such as Brackets. If you have any ‘if’ statements these need to be modified/deleted. Save the brackets file as an html and once it is saved it should be openable through your default web browser (chrome, safari etc.)
screenshots & outputs from three.js that I created before I learnt how to save them as working html files
Coding for Creative Practice 