three.js: final This final output for three.js is a combination of two outputs made in week three, ‘dragon knots‘ and ‘purple circle‘. I combined my favourite parts of both of these outputs to create this new one, the colour scheme of ‘dragon knots‘ and the rhythmic rotation of ‘purple circle’. Initially I was using the ‘normal (backside)‘ shading on the knot however when I applied the rotation to this mesh it showed the purple-pink frontside rather than the green-red hues of the backside that had inspired ‘dragon knots‘. In order to still have the same colour scheme and combine the rotation/opacity variables I had to create a unique lighting setup. I did this using the ‘phong’ material for the knot, changing the x and y positions of each light as well as the hue to achieve the desired result.
Unlike in dragon knots or in purple circle in this output the background was chosen as black to offer the best contrast for the bright lighting in the scene. Choosing the opacity for the knot as it rotated was difficult as I still wanted to see the knot shape (0.7, 0.3, 0.1 opacity’s achieved this), but the lower opacity (0.01, 0.03) created a more ‘slithering’ effects which I liked also. In the final I decided on an opacity of 0.1 as you can see the definition of the curves of the knot, but it still looks as if it is curving towards you from this dark background like a snake rather than a simple rotating mesh as it would with a higher opacity.
processing: final This final output for processing is a different version of the original ‘The False Mirror’ output generated in week two. This output generates two floating eyes, with the movement of each controlled by the mouse. This is done by substituting X and Y integer variables for ‘Mouse X‘ and ‘Mouse Y‘. These are swapped over for the smaller eye, creating a dynamic composition in which the eyes move together harmoniously but as opposites. The eye colour change is made using a series of ‘if’ statements in which an action (keyPressed) is called. I have assigned specific colours to each key to reflect a range of different eye colours.
ellipse(mouseX,mouseY, 180,180); if (keyPressed && (key == ‘q’)) fill (91, 128, 189); //dark blue if (keyPressed && (key == ‘w’)) fill (42, 163, 59); //green if (keyPressed && (key == ‘e’)) fill (125, 138, 59); //hazel one if (keyPressed && (key == ‘r’)) fill (140, 125, 50); //hazel two if (keyPressed && (key == ‘t’)) fill (25, 90, 39); //brown if (keyPressed && (key == ‘y’)) fill (43, 29, 7 ); //dark brown ellipse(mouseX,mouseY, 180,180);
The repeat of the ellipse at the end of the series of ‘if’ statements ensures that a loop is created that the statements can work on. Without this last line of code the statements have nothing to apply their fill to. The naming of this output is in reference to big brother always watching. The smaller eye or ‘little brother’ was added to create a more dynamic composition in which the pair of eyes could interact.
conditional design: final Conditional design is the generation of a physical output by players that have been controlled by set conditions or rules. Variation within an output can be seen through interpretation of the rules. My final for this output is a development of the work of the same name that was created in week one. One change that was made was the exclusion of stabilising elements, as they were not able to be clearly enough defined to improve the output. Another rule that was implemented in this final was specifying the types of triangles. In the initial game players struggled to maintain dimensions of the triangles as they changed direction. This new rule enabled the game to run much more smoothly. The final new rule that was introduced controlled the players use of other opponents tower to reach the other side. This rule was developed to prevent one player simply using the tower on the opposite side to reach their target. In this second test of ‘triangle towers‘ it was interesting to see how the players followed the basic structure of the game up until someone came close to winning. At this point players used modifications to their tower in scale or path to advance faster and to defend.
task one: independent study After the lecture on unity and having a short demo with some pre-built scenes in unity we were tasked with either modifying these scenes or creating our own from scratch to generate three different outputs.
flaming sphere This output was a modification of a preexisting one, in which a coloured sphere (with a trail) emitted a popping sound and slowly rotated on its x axis, the tightness in which the ball rotated speed up the closer the player got to it. I modified this scene by changing the material and size of both the sphere and the trail, selecting a ‘fireball’ material instead. I also replaced the popping audio with a scream mp3. I tried to find a longer scream so it was less broken, more intense, but could not. I also changed the axis and speed in which the sphere spun so that it could spin and make its way closer to the ground. I modified the terrain and created a deserted rocky landscape that the fireball would move through. I tested out different materials for the terrain also, as I found the grey not very atmospheric. I was looking for a deep black in which the player could be disoriented, the only light source being the fireball. I choose a reflective coloured glass option that gave off a sense of a futuristic or ‘other’ world, however similarly with some of the glossier materials I experimented with, the glow of the sphere is somewhat lost.
if I were you I would turn your sound down a few notches before watching this
forest environment I generated this output from the ‘Basics’ pack, which starts with a FPSCamera and directional lighting. From here I played around with what I could do within the terrain panel and what sort of scenes I could make. I figured out to use the paint trees option I had to go and find the tree game object for the painter to apply. From here I played with density, height and size of brush. Initially I hade set out to make a swamp like environment as I couldn’t figure out how to add leaves to the trees, they were simply dead-looking trees. Once I workout how to add leaves to the game object I played around with size and generated colour. Going back to the spread of the trees I realised they were far too close together now with the addition of leaves that the players experience would be effected. I re-painted the trees more widely dispersed and then elevated parts of the terrain to create a hilly forest landscape. I also added features such as birds in audio and grass/dirt walking audio to the player, as well as increasing their ability to climb up inclines.
However, when I went to play the scene a bunch of errors came up, and even when I tried to clear them as I did in the lecture, it still wouldn’t let me play.
Cityscape I found it easier in this program to generate landscape scenes in which a player could walk through, rather than manipulating objects. If I were to further my skills with Unity perhaps I could add a manipulated game object to interact with these scenes. In this output I focused on materiality and lighting to create atmosphere. I used simple cubes and duplication to create these few buildings, creating the windows using a glossy clear material that could reflect the yellow lighting. The buildings were initially a glossy black, however when I went to play with e lighting more, it became too bright, so that material was changed to a more dull rusty brown. The footpath was made glossier than a cement footpath would be normally as I thought it created a nice atmosphere where the streetlights reflect off of it, appearing perhaps as if it has just rained. Maybe in my developments I could make it rain in this scene.. I also intended on duplicating and creating more buildings to create a proper city scape. One aspect of this output that I am proud of the way it turned out was the variation in hues and spread that were manipulated in the directional light (moon) and the point light (street lamps).
task two: independent study This week’s example of creative coding from Open Processing is designed by the user ‘ndisorder’ and is called ‘echophon imitation‘. This output uses the mouseX and mouseY commands to influence the position of each rectangle element within the confines of the larger square. I chose this output because as a designer, I liked the subtle interactivity of the design and the colour palette with the slim white outlines and the blocking of the grey creates a composition that could work for a wide range of applications.
lecture notes: Unity is a 3D environment editor program which is most commonly used for building gaming enviroments and VR. As a free program it has plenty of use and online tutorials, making it a good program to learn the basics of 3D coding.
setup W,S to move backward and forward, A,D to move side to side. Right click and drag moves position of camera. Clicking on a game object will highlight it in the left hand ‘objects’ panel and open its settings for materiality on the right hand display as well as outlining the object itself in the view window. At the bottom of the display is the project view, showing other scenes ‘files’ available.
game objects To add new game objects right click on the left hand panel and select from the range of objects. some of the different components that can be applied to the game objects are;
Transform – position, rotation and scale of the game object. Mesh – or geometry for the game object Mesh render – we can change the material from a catalogue Audio source – modifies spacial audio (where it is and experience for user – 3D dimensional audio) Collider -modifies the collision mesh, changes whether or not the player can go through the game object
To add new components you can choose from the drop down menu or you can add a new type of components know as script. These components allow you to modify the code for the components to make unique changes.
Any changes you make in play mode is not saved when you go back yo the editor mode (changes made in play mode are more to test before applying). To get out of play mode press the ‘esc’ key to reveal mouse, press pause and the to get back to editor mode press play again.
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.
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.
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
task three: independent study This weeks example of creative coding I found is an interactive design on Open Processing by the user Jean-no, their work is titled ‘Glass breaking’. Each click creates the effect of breaking glass by splitting the screen in four parts from the mouse coordinates, each section the splitting further again. All the pieces move away from the centre of the mouse click as they break. Each click also changes the colour of the background that is randomly generated!
Coding for Creative Practice 