Composition 1: 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 first experiment and respective design process using the programme Processing is as follows:

The first step was going to obtain the basic setup code for Processing that Tim had open sourced to us. 

Then it was a case of getting the open sourced code from Tim that enables us to create jpegs from our 'coding canvas' by simply pushing the 's' button on the keyboard. 

This is what my Processing coding window looks like when I have pasted in both sections of the code that I sourced from Tim.

So I have begun to adding code and experimenting to see what it does. In this screenshot I have changed the size of my canvas to 1000x500 pixel and changed the background colour to black. The screenshot shows what the canvas and coding windows look like.

Also I have used the line function code "line()" to add a line from the top left hand corner - (0,0,50,50). The four numbers in the brackets refer to the:

1. x-axis value (where the line will begin from on the x-axis) - 0 being the top left-hand corner
2. y-axis value (where the line will begin from on the y-axis) - 0 being the top left-hand corner
3. xlength (how many pixels my line will be along the x-axis)
4. ylength (how many pixels my line will be along the y-axis)

In order to see my line (due to the fact that default stroke colour is black) I have had to change the stroke colour to (255) which is white in order to see it.

To begin to understand the parameters better, I have then fiddled with the length of my line on both the x and y-axis.

By changing the first two numbers in the brackets (0,0) to (500,250) I have now changed the origin to the centre of my canvas. And thus the line will extend from the centre of my canvas now.

In this screenshot I have added a variable to my line function. Instead of having a set line length that was (100,100), I have changed it to the variable (mouseX, mouseY). This means that the line length will be determined by the movement of my mouse cursor. This can create very interesting shapes as one moves the mouse around the canvas. I also changed the origin back the top left-hand corner (0,0).

By experimenting with the stroke parameter variables, I have managed to add allow the stroke change colour as the cursor is moved across the canvas on both the x and y-axis.

This above screenshots are using the function that I retrieved from Tim's open sourced code by pressing the 's' button on the keyboard. On the second screenshot, in terms of changing the code all of done is simply change the origin back to the centre of the canvas (500,250) and then moved the mouse around the canvas to create the above.