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.

Introduction to Media Concepts

In todays lecture, we looked at multiple different concepts to consider for our interactive piece. Here are a few that stood out to me:

  • 7102_palimpsestPalimpsest – ‘a manuscript is written on parchment that has another text written over it, leaving two (or more) layers of visible writing’. This idea of layers could be an idea for my piece. I could take an image of the public space every 5 minutes or so and process it so the images overlap each other, creating various layers of images. As more images are taken the previous ones would be barely visible, with the opacity slightly decreasing each time. This could apply to the concept of history as it links back to features of historical manuscripts. It could also relate to representation, as each image will present different people and the representation of previous images will become blurred when newer images are layered on top of it.
  • 4956_0304_roughtradeRough Trade – Each time customers walk into this music store, they enter a photo booth, the photos are then put up on the walls of the store, thus creating a collage of images of their customers. I quite like this idea of creating an abstract collage, and relating this to my project, I could take images of people in the public space and then process them all to randomly display on the boards. This could again link to the concept of representation as well as linking to the concept of active audiences, as it is the audience in this instance that help to create the piece.

I will go on to develop these ideas and will show this development on my blog, as well as thinking of and experimenting with new ideas. Once I have an idea, I will then go on to create a prototype of which I will get peers to engage with and give feedback. By creating a prototype, it will enable me to see if the prototype is successful and suggested improvements that could be made, hence this will follow the iterative design process, as it relates back to users and allows room for further refinements and improvements.


Folksonomy, 2005. Palimpsest: Scraped Again. UK: Folksonomy. Available from: [Accessed 30 October 2014].

Folksonomy, 2013. Rough Trade: Destination Store Plugged-In To What Its Customers Want”. UK: Folksonomy, Available from [Accessed 30 October 2014].

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].


prototyping2A prototype can be described as 

‘An original type, form, or instance serving as a basis or standard for later stages’ (The Free Dictionary, 2014).

Creating a prototype relates to the iterative design process as it allows you to gain feedback and then make refinements and improvements. It is a stage where you can engage with the users and analyse whether the piece is easy to understand, engaging, suitable and whether or not it is successful or not. It is a useful tool in order to evaluate user experience and can be very beneficial in order to produce a successful final piece. Beaudouin-Lafon and Mackay suggest that 

‘Prototypes both inform the design process and help designers select the best solution’.

They propose four ways in which to analyse prototypes:

  1. Representation (form of prototype eg. paper/computer, offline/online)
  2. Precision (level of detail eg. formal/rough)
  3. Interactivity (how user can engage with prototype)
  4. Evolution (life cycle of prototype eg. iterative/throw away)

I feel that creating a prototype for my piece would be beneficial as it would allow me to fully show my ideas and directly engage with the users, hence following an iterative design process. As I don’t have enough knowledge of processing yet to create a rough programmed piece, I feel that creating a rough paper prototype could be suitable. Here is an example of a website usability test using a paper prototype:

As you can see, a paper type is just as beneficial and in this case it has allowed the designer to understand more about the users and how they would understand and experience the website. This example has also highlighted to me the importance of properly testing the prototype, and as Bramhall (2014) says

‘Testing a prototype is equally as important as prototyping a design in the first place.’

When testing a prototype, I should ensure that I engage with the target audience and ask suitable questions in order to help me improve and make my piece a good interactive experience for its users.

Beaudouin-Lafon, M and Mackay, W.E, 2014. Prototyping Tools and Techniques [online]. Available from: [Accessed 23 October 2014].

BlueDuckLabs, 2010. Example Usability Test With A Paper Prototype. Available from: [Accessed 23 October 2014].

Bramhall, D, 2014. The Importance of Prototyping Your Designs. Creative Blog. 20 August 2014. Available from:  [Accessed 23 October 2014].

Active Audiences

Contemporary audiences are more active consumers of media texts. For my interactive infographic, it requires my target audience to be active and interact with my piece. The rise of interactivity within contemporary media texts highlights the changing consumption habits of audiences, from passivity to activity. Cover (2006 cited by Macek 2013) describes interactivity as

‘a culturally motivated and historically variable desire to participate in textuality.’

Audiences involvement with texts is increasing; not only by interacting more with the producers’ final media text/piece, but also with the production of texts. This relates to an iterative design process as it is important to engage with the audience at all stages within the process in order to gain useful advice and feedback. For my piece, audiences will hopefully engage with the final piece, but it is essential that throughout I involve the audience with the production and development of my piece. Jenkins (2006, p.60) suggests that:

‘Consumption becomes production; reading becomes writing; spectator culture becomes participatory culture.’

I feel that Jenkins ideas can apply to my target audience as well as to contemporary culture. I’m aware that individuals may participate with my final piece in various ways, some may prefer to spectate whereas others will be more willing to participate. Jenkins idea of ‘consumption becomes production’ relates to Lister et al (2003, p.10), as they believe that:

‘we have seen a shift from ‘audiences’ to ‘users’, and from ‘consumers’ to ‘producers’

This highlights the increasing power that contemporary audiences now have with media texts, and relates to theory I studied in first year regarding fandom, user-generated content and authorship. This shift also relates to a theory unit I have recently studied, Media and History. It highlight the importance of exploring history, as in this case it helps our understandings of contemporary theory debates regarding audiences.

From this, I feel it is extremely important to continuously engage with my target audience throughout the development of my interactive piece. For my piece to be successful, it needs to appeal to its audience and as Gray (2010, p.166) says

‘a text only becomes a text, only gains social meaning and relevance, at the point that it comes alive with its audience.’

I aim to do this by regularly including the audience within the production of the piece in order to gain ideas and useful feedback. As well as making the final piece easy for all individuals to actively interact with.


Gray, J, 2010. Show Sold Separately: Promos, Spoilers, and Other Media Paratexts. New York and London: New York University Press.

Jenkins, H, 2006. Fans, Bloggers and Gamers: Exploring Participatory Culture. London: New York University Press.

Lister, M, Dovey, J, Giddings, S, Grant, I, and Kelly, K, 2003. New Media: A Critical Introduction [online]. 2nd ed. London and New York: Routledge.

Macek, J, 2013. More than a desire for text: Online participation and the social curation of content. In: Convergence: The International Journal of Research into New Media Technologies [online], 19(3), 295-302.

Public Space – Weymouth House

By carrying out the group task of creating an Independent Dorset Poster, it has allowed me to practice with following an iterative design process, something that I will follow for my individual interactive piece. It has also helped as the information I gathered about the public space and the audience will come in useful for when I put my interactive piece in the space. Here is what I have learnt about….

The Public Space:

  • It is large space, with a layout that directs you straight through the space. People walk through to go lectures, but it is also a social area for meeting friends and grabbing a costa/food.
  • The area gets especially busy around lunch time, as well as in the 20 minute time period of 10 mins before lectures and 10 minutes after.
  • Various screens that are positioned in line of people walking.

The People:

  • Demographic is mainly students, and as it is the Media School the majority could be media students.
  • There are few Staff and Visitors.
  • Depending on why people are using the space alters whether they are likely to look at the screens – whether they are sitting down or walking through the space quickly etc.
  • The visitors are more likely to look at the screens as they are new to the space rather than students that frequently use the space.

The Activities:

  • Over a 10 minute period from 12:50 till 1:00 we found that:

-77 people walked through the space
-12 people bought Costa
-7 people were working
-21 people were socialising
-2 people looked at displays

The Visuals/Graphics:

  • The more colourful visuals gain more attention and stand out more in the space.
  • People are more drawn to the poster/screens when there are less people in the space.
  • Graphics are not as noticed when the space in busier.
  • The two main screens that are opposite Costa draw the most attention.

From this, I feel it would be useful to go back to the space at different times of the day to analyse when would be best to display my interactive piece. Also, I think it would be good if I were to further consider which screen would be best to display my piece on. When I display my piece, I will ensure I ask more questions in order to gain more responses and evaluate whether the piece was successful or not. Next, I will go on to explore prototypes, and develop my idea for my interactive piece.