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

So after I retrieved the basic setup open sourced code that Tim shared, I have created a rectangle using the above code, in the top left-hand corner that I will animate.  Unlike my previous composition in which I used lines, and thus stroke colour, using a rectangle I needed to use the fill() function in order to change the colour inside the rectangles that I make. Again I have used the mouse's movement to dictate the colour within. The following are images of my code as I move the mouse around the canvas to change the colour of the rectangle respectively..

So after I had a rectangle in the top-left hand corner of the page and that changed colour as the mouse moved, the next step was to animate it. Therefore I changed the values in the rectangle function from (0,0,300,300) to (0,0, mouseX, mouseY). This allowed me to create the following..