Processing Workshop – Object Orientated Programming

Today, we learnt about object orientated programming. We learnt how to create and use classes within processing. A class  is a blueprint that allows us to create an object. Within a class, it needs to contain class data, constructor and class methods. The class data is unique to each class, and within this you have to declare the variables of the particular class that you are working on. The constructor is where you assign the variables to the class. Class methods are the interface of data, and these functions are shared. In the workshop, I created a class named ‘Agent’, that consisted of data, constructor and methods and a draw function of a square. I then incorporated the class into the main tab by using an ArrayList. An array is a block of data and an arraylist is a block of object data. I set up the basic void setup and void draw and incapsulated the class ‘Agent’ into these. I also used existed knowledge of mousePressed and mouseX mouseY, so that each time the mouse is click it creates a new agent(square). Here is the code…

Screen Shot 2014-11-03 at 12.32.06 Screen Shot 2014-11-03 at 12.32.57

Here is the outcome…


From this workshop, not only did I Iearn new skills regarding classes, I also developed my existing knowledge from previous workshops, about integers and floats, variables, for loops, arrays, mousePressed and random functions. We also briefly explored how we could convert images to agents in order to create some interesting motion effects to the image pixels. Using for loops, it iterates through the images pixel array to create an agent for each pixel, and by altering the class update methods, the motion of the pixels changes. To convert the image pixels to agents, I had to use previous knowledge from Workshop 4, in order to obtain the 2d array of pixels, using a nested for loop and the formula x+(y*width).  Here is the outcome…


When the mouse is pressed on the image, the agents(pixels) are updated, and in this instance they move randomly in a brownian motion. I would like to learn more about this and experiment with some different motions. Representation is a a possible concept I could explore for my final interactive piece, of which this could relate to as the moving agents blur the images representation. Next, I am going to look at some processing examples, in order to help me to further my understanding of processing and also to help gain more ideas for my interactive piece.

Processing Workshop – Images

Today, I learnt how to add images into processing, and how to scale and tint them. To begin, I learnt the basic of how to add images to the sketch and load it. I used existed knowledge of mouseX, mouseY so that the image followed the mouse around the screen and I applied a blue tint to the image…

Screen Shot 2014-10-29 at 14.06.11

I then learnt about image pixels and how to use them in two dimensional as pixels are normal stored in a one dimensional linear sequence. I used the Processing tutorial in order to understand how pixels work and this diagram is particularly useful.

pixelarray2dTo get the pixels of my image, first I had to load the pixels. Then, I had to set up a nested for loop of so that it will continuously loop through all the pixels. I then had to use the formula x+(y*width) to calculate the one dimension locations from a two dimension grid and colour each pixel according to the image. I set the size of the pixels as an integer so I can easily change the value of ‘s’ and the pixels size will change.

Screen Shot 2014-10-29 at 14.59.48

I loaded another image into the sketch and used a conditional statement so that when the mouse pressed, the image changes. I also made the pixels shake by using the random() feature. I added text to each the images, of which I set the fill colour and positioning.


Gaining this knowledge of pixel was useful and it is something I could incorporate into my piece. The use of text is also a good skill and something that I would possibly like to explore further.

Processing (2014). Processing: Images And Pixels [online]. Available from: [Accessed 24 October 2014].

Processing Workshop – Conditional Statements and Nested For Loops

In todays workshop, I developed my processing skills and learnt about nested for loops, conditional statements and rotation. Here are some examples…


In the above example, the squares randomly change size and colour. From this, I learnt how to use integers and floats, as well as about using the colour mode HSB (Hue, Saturation, Brightness).

Screen Shot 2014-10-13 at 16.24.52In the above example, the left mouse click draws ellipses and randomly generates different colours. The right mouse click takes an image of the preview and saves it in the selected folder. From this, I learnt how to do conditional statements for the different mouse click variables. Also, I learnt about modulus – if no modulus was set then the ellipses continues to get bigger and bigger. Setting the modulus restricts this so that when it reaches a certain size it reverts back to the original size.


In the above example, the rectangle randomly rotates around and changes hue colour. I used three integers to vary the rotation, size and colour. I also applied modulus to the integers so there were limits as to what size the rectangles reaches and the range of colours.

I experimented with the rotate examples by changing the fill, integers and modulus as well as using a triangle instead. I then incorporated the rotation elerotatements into a condition statement, so that wScreen Shot 2014-10-23 at 14.08.39hen you right click you get a rotating square and when you left click you get a rotating triangle:

Screen Shot 2014-10-23 at 14.21.20Learning about for loops and conditional statements was particularly important as in order to advance my processing skills I need to be confident with the basics. Most complex examples I have looked at include these features within, so learning this was essential in order for me to progress with processing and create my interactive piece.