__processing

Our first project took place over 2 weeks’ worth of workshops hosted by software developer and media artist David Jonas. During these sessions we focused on rapidly producing a plethora of rich interactive media products using a programming software called Processing. Processing is a “flexible software sketchbook” which allows for users to program visually rich media using a unique variant of the java language.

Its software is programmed in such a way that the complex setup elements of java code are pre-written in the back-end of the program which makes the unique programming language easier to write. By hiding these complex elements from the user when codding helps to develop the individual’s understanding of the key paradigm features java is structure around. Throughout this section of my portfolio I will be documenting the interactive process I used to produce my series of interactive art pieces.

During the first session of work I experimented with the random function within different circumstances. I mainly focused on assigning random number generators to polygon attributes (Figure 1) including vector coordinates and colour values. When assigning these generators to certain attributes it was important to consider the upper & lower parameter bounds, especially in the context of the application window dimensions and RGB colour values which cap at 225. This session resulted in sketches which were in perpetually random movement without any user input required.

WEEK 1 - RANDOM FUNCTION

LEARNING TO PROGRAMM

To begin learning this new programming language, David first explained the sequential way in which Processing would be running using variables. He then showed us the essential features required to properly setup new sketches including how to format the setup and draw functions. These two functions will contain all of the statements used to define our programs features and content.

After guiding us through a couple of examples using subroutines to display shapes onto the application window, we were given the chance to individual explore the different subroutine available for ourselves. It was useful to keep referring to the processing.org/reference pages as they contained full explanation of what each of the different inbuilt features would execute in a succinct way. For clarity I included descriptive comments to help both myself others understand the certain code objectives.

WEEK 2 - INTERACTIVITY FROM USER INPUTS

Being pleased with the products produced from week 1, I moved onto this next session with focuses of making more interactive products involving the end user. After gaining a better understanding of how to build a basic processing sketch, David showed us some more advanced techniques which made it possible to record user inputs via keyboard and mouse interactions. This meant that I could directly change variable values based upon the user decision.

Mouse Coordinates

I first started looking at how I could record mouse tracking by obtaining the mouses X & Y coordinates generated, using the 'mouseX' and 'mouseY' functions. I then used the 'Pvectors' class to allow the dimensions (magnitude and direction) of the position and velocity variables to be directly edited. I could now control how the rectangle follows the cursor on screen by calculating the distance between the cursor and the rectangle.
_________________________________________________________________________________

Proximity & Conditional Statements:Change Stroke & Fill Colour

Within the next iteration of the processing sketch, I decided to incorporate a proximity detection system into my program which would trigger a conditional if statement. When the rectangle comes within a range of 100 pixels to the mouse, both the stroke and fill RGB colours will change using the random() function. When the distance between the two elements does not meet the conditions, the fill & stroke will return to a pre-set value.
_________________________________________________________________________________

Proximity & Conditional Statements: Change Direction

With the 3rd iteration of the sketch I changed the result of the conditional statement to move in the opposite direction to its initial path of traversal. This means that the square would travel away from the mouse instead of towards when the condition is met and vise-versa. This was achieved by multiplying the direction by the opposite sign when the condition is met. I created the ‘direction’ integer variable to represent this sign.
_________________________________________________________________________________

WEEK 2 - FINAL PIECES

By taking everything I have learnt so far from all my previous products, I have composed two final pieces which combines all elements from the last 3 sketches as well as including some new one. Although technically similar I decide to display both as I personal think they individually have unique visual qualities. Here is a list of new features I have added:

1) Instead of having the conditional statement activated via proximity detection, they now activate instantly via keyboard commands (figure 2)

2) I have added more shape elements to follow the cursor which are independent from each other

3) I have tethered together the multiple shapes by assigning each of their current position to different polygons vector (x and y coordinates)

4) I have added the feature to stop and start the shapes in their current position by multiplying the instance of the shape by 0 or 1 (figure 3)

5) I have added the ability to change the background styling in two different ways. This first method displayed within the first video will reset the background colour to cover over all of the previous tracks. The other method displayed in the second video will constantly update the colour to leave no tracks at all.