Composition 4: Processing

The coding programme that we have learnt this week is called Processing. This programme is a bit different than Three.js playGnd that we learnt last week. Instead of having an augmented interface in which the coder can see what is happening in real time, Processing the coder has to code and then test. The potential for Processing is much greater in the fact that the animation and interaction side is not limited to the basic 'snippets' like Three.js playGnd. This however means that the interface of Processing is a little bit more complex.

My fourth experiment and respective design process using the programme Processing is as follows:

Setup using the code Tim has made available to us. I have set up the size of the canvas to 1000x500 pixels like all of my other compositions. However unlike my other compositions, I have added another parameter within the size function (P3D). This enables my geometry to have a three dimensional quality to it as opposed to being flat on the canvas and only manipulating its radius on both the x and y-axis respectively. 

I have gone onto the reference page on processing.org and found a section of code for a sphere under the heading - sphereDetail. I will now manipulate the code to design something of my own. I have also changed the background colour to black.

The following are screenshots of what the above code codes for.. It is a sphere that once the user moves the mouse cursor along the x and y-axis, it changes its form respectively. The further one goes to the left-hand side of the canvas, the less sides it gets and it becomes a tetrahedron, whereas if the user moves the cursor to the right-hand side of the canvas, the shape becomes a very detailed sphere with a lot of faces. The 'fill' function within the code also changes the colour of the geometry based on the cursors positioning on the x-axis. As you can see, the geometry is based in the top left-hand corner of the canvas, I will not translate it to the centre of the page so no parts of the animation hangs over the edge of the canvas and is not visible. 

  

As I stated above, I have translated the geometry to the centre of the canvas by changing the translate function parameters from (50, 50, 0) to (500, 250, 0).

In order to make my geometry to really blend into the background and look a lot more effective, I have changed the stroke colour of my geometry from white to black. With being quite small at the moment, as one moves the cursor further to the right-hand side of the canvas,  the more faces are needed and thus more stroke lines, the shape fades into the background almost completely. Therefore I have chosen the following screenshots which allow you to see my geometry:

The next step is to increase the size of my geometry on the canvas. Therefore I have changed the parameters of the 'sphere' function from 40 to 100. This means it is two and a half times the size it was previously..