Processing Workshops – Progression!!

Today I attended both workshops put on to seek help regarding my processing project. In yesterday’s post I commented saying that I would ask for help in getting the webcam to work as intended with my project. Today I was able to do and more, much to my delight!

(To update on the issue i had yesterday and to make it more clear as to why it looks like I’ve jumped ahead the fix to the issue was the result of not calling the ‘grabPixel’ function to the canvas, though I had loaded the function I had not then put it in the ‘void draw’ section of my code, meaning it would not be drawn and therefore would not show anything when the application was run, thanks to this simple fix i was then able to move onto using multiple images along with multiple points in the webcam to interact and directly change the colour value of the image.)

Here is the code i experimented with, this unfortunately did not yield the desired result.
Here is the code i experimented with, this unfortunately did not yield the desired result.

Above is the code I used to attempt to get the webcam in my laptop to pick up the colour value of two points from the webcam result. This was the first attempt without using ‘arrays’ which I would later use. Due to my limited knowledge in Processing i was instructed to carry out my coding in this process due to its simplicity, I have highlighted important sections of the code to show how I have attempted to make two separate points on the webcam take/(grab-a-pixel) and use its colour to ‘tint’ the colour of the logo. The result of the code was that the first logo ‘c1’ was displayed and worked as expected but ‘c2’ did not read a value from he webcam resulting in the logo staying black, after time spent myself attempting to solve the issue my lecturer instructed me to instead consider using an array due to the added complexity which will ensue when I add multiple images, as well as this he instructed me that in an array the amount of coding required is dramatically reduced especially when using multiple images in the application which I plan to do in the future.

Array set up

Here screenshot are the changes I made to the code for it to function as intended. Shown at the top – ‘color’ was made global to enable the array to function in all sections of my code and for it to be recognised when the application was run.

Inside the set up of the code ‘colours = new color[2];’ created an array of two values.

Grab Pixel Array Processing

The ‘grabPixel’ function I wrote about in my previous entry was adapted to use the array, in arrays the number of values in the array begins from ‘0’ so the two entries were ‘0’ and ‘1’, this was followed by co-ordinates to tell the application which pixels in the webcam to use, for the first pixel ’40, 60′ were used to ‘grab’ a pixel towards the left of the camera, for the second pixel ‘120, 60’ were used to ‘grab’ a pixel to the right of the camera so the images would change in tint independently.

Processing Webcam Practise(30fps) (Converted) from Oliver Evans on Vimeo.

When testing the application I found it was often hard to test if the webcam was picking up the correct pixels as I had no indication of this due to the tint of the pixels being my only visual indication that the webcam was picking up a pixel however I did not have a way of actually knowing where the pixels were in relation to the webcam image. To tackle this issue I used the code below –

Processing webcam pixel locator

The code shown here activates if the mouse is pressed, when pressed a box containing the full webcam image will appear on the screen with two lines that essentially point to the pixels the webcam is using to give the images on the screen their ‘tint’.

Webcam Processing 'grabPixe'l' line indication

The screenshot above shows the code in action, the bottom of the right line shows the pixel location of the tint of the top logo with the left line showing the tint appropriate for the pixel at the bottom of that line.

To proceed I plan to simply increase the number (and style) of the logo’s I use to build up an interactive ‘board’ of logos which will independently react according to the colour of pixels picked up by different points in the webcam image.

References: (Accessed: 11/1/15)


Processing Project Update – Could be better… Could be worse!

So far I am comfortable with the progress I have made towards completing my processing project, I have a plan in place to guide me through my work using ‘pseudo-code’ to map out the steps towards completing the project. i have found this to be an incredibly useful step to take as it has allowed me (as a visual learner) to visually take apart the steps of the project and view my progress. Furthermore by doing so I am hoping to ensure I do not miss out any key or necessary steps in the project which may hinder me later on in the project and result in me not using my time efficiently.

At present I am struggling to take the next step with the project where I transition into using the webcam on my laptop (which will later be a dedicated webcam in the final presentation of the project in Weymouth house) as it involves using various tutorials online as well as a few steps of me working more independently with Processing which I still do not feel entirely comfortable with. To try and resolve this issue I plan to put forward my problems to my lecturer in the workshop tomorrow (Friday 9:30am) and ask for his help to guide me through this process (if you’ll pardon the awful but necessary pun).

I should also be aware that documenting my work is of upmost importance, I attended a lecturer today which concentrated on the importance of not only blogging about my work but also creating and updating regularly a log which I can informally add to along the process of this project which will allow me to see exactly how i have worked through the project including how I was able to fix any problems I had, a useful habit to get into regarding working in a professional environment.

Below is an example of how i have used Processing to successfully illuminate the ‘Skype’ logo using the MouseX and MouseY co-ordinates to directly change the colour values of the logo from 0, 0, 0 (rgb) to 0, 170, 240 which gives the colour of the ‘Skype’ logo.

Here shown is the code I have used to create the first stages of my project, below this will be a video showing the result of this code. At present i am using the mouse to change the values of colour, in the next stages I will instead use the webcam to do so.
Here shown is the code I have used to create the first stages of my project, below this will be a video showing the result of this code. At present i am using the mouse to change the values of colour, in the next stages I will instead use the webcam to do so.

Skype practise from Oliver Evans on Vimeo.

Consumer Culture and The Presentation of Self in modern society

Consumer culture has begun to dominate society in recent times largely due to the ever increasing availability of commercial goods. Dick Hebdige’s view that consumer culture is ‘active in the ascription of meaning to consumer goods’ reflects a view that we as a general public look for ways to show our own allegiance to our values and beliefs as individuals, his example of the punk safety pin shows how minority groups or ‘subcultures’ can take objects and make them take on a new semantic meaning personal to that particular group. His view that the purchase of material goods allowing the self to be reflexively constructed in dialogue with the meaning of objects shows more clearly how as we change as individuals this then has an impact on our identity as consumers, this has then sparked a multitude of subcultures all finding an identity in objects.

“objects borrowed from the most sordid of contexts found a place in the punk’s ensembles: lavatory chains were draped in graceful arcs across chests encased in plastic bin-liners. Safety pins were taken out of their domestic ‘utility’ context and worn as gruesome ornaments through cheek, ear or lip” (Hebdige, 1979, 1067) – In more modern times I can relate this to the ‘hipster’ culture students and young adults are immersed in, this largely revolves around branding –  ‘The Cambridge Satchel Company’ quickly became ‘the’ satchel company, starting modestly inside a country home in Cambridge, becoming a multi-million pound business due to this fixation adopted by individuals wanting to ‘fit into’ a certain subculture. This story has been replicated thousands of times, ‘Beats’ by Dr Dre being another company who also quickly became ‘the’ headphones to wear to ‘fit in’ with popular culture, this being despite many reviews online critically slating the headphones for poor build quality with a sky-high price point.

Erving Goffman looks closer into the ‘presentation of self’ in everyday life – he analyses the difference between ‘presentation’ and ‘life’, I feel there are similarities here with how we as individuals can use brands to change ourselves from ‘average’ or ‘plain’ to ‘interesting’ and ‘popular’ with the purchase of a branded item, in turn presenting yourself in a way you may deem as acceptable according to the values and beliefs you uphold.

I feel in society today there is a morbid emphasis on what is right and wrong when it comes to what we see as popular and cool, I wish to address this in my project and help the audience see and observe just how integrated the ‘branding’ culture is within how we think as nations with the aim of encouraging people to think (what I see as more logically) about their own consumer habits.


Goffman, E, 1959. The Presentation of Self in Everyday Life. United States: Anchor Books. (accessed – 5th December 2014)

Hebdige, D, 1979. Subculture: The Meaning of Style. Rutledge. (accessed 5th December 2014)

Prototyping – How to make your life as a designer easier

Paper Prototyping

(Board of Innovation, 2014)

Prototyping is a way of designers viewing how their product will work before taking the project all the way to the final outcome as well as allowing them to gauge how a client or end user will react to a product in the early stages of the design process. (Gube, J, 2013)

To outline some quick advantages of Prototyping –

– Helps find design issues early: When designing a product a designer can quite easily visualise and set themselves on an end product without taking necessary time to think carefully about balancing this with user requirements and the function behind the form, this can lead to an end product which does not fit the brief and result in large changes from the client, meaning extra time spent on the project to rectify these issues.

– Iterate designs more quickly: Prototyping can take the form of a hand drawn design on paper for a designer to reflect upon changes and the project, when designing something like an app a designer could draw out the design in minutes to observe how it would function whereas to make the concept in the app development software would take hours only for the designer to observe the same issues.

– Compare Design Variations Quickly: When designing a user interface a designer should look to make the experience the best it can possibly be for the user, an optimum between form and function. As mentioned previously, drawing designs saves time and allows designers to viewmultiple designs quickly and without hassle for them to quickly compare them to decide how to best progress with the design of the product, by prototyping this process can be made much more efficient than following multiple designs through the whole design process.

– Optional Presentation Tool: Though there is some debate here, I believe that when executed correctly accurate prototypes can still save time and allow a designer to explain an idea whether it be to the client, managers, colleagues or other professionals working on the project. Prototyping gives the designer a visual aid in explaining their rationale behind ideas which can be of great use.

– Be able to perform user testing early in the design process: Prototyping, as mentioned in the introductory paragraph allows a designer to conduct user testing on a product with the client/s and users before revealing the final design, allowing them to ensure any issues the client/s may have with the product can be rectified as some issues may be harder to fix and more time consuming for the designer to fix the further down the design process they go, therefore prototyping can act as a continuous safety net throughout the design process allowing designers to gain regular feedback from clients in order to ensure the final design is tailored better to the requirements of the client and users.

– Prototypes help simplify complex ideas: In a scenario such as a designer creating a responsive website this requires several designs due to the differing sizes of each device the website would be viewed on it would be beneficial to draw prototypes of designs to achieve and compare different layouts before completing the design process, simple digital prototypes can help designers to quickly see how elements in web pages will fit together when resized and if the iteration is applicable.

References: Gube, J, 2013. Why Prototyping is Essential to your Design Process. Design Instruct, 15 January 2013, Available from: [Accessed 17 November 2014].

Board of Innovation, 2014. Resources and Tools for Paper Prototyping. Available from: [Accessed 17 November 2014].

Processing Project – Installation research – Onto the next iteration

A while back I wrote about an inspiring video I’d seen by an artist focusing on how Ultraviolet paint could be used to focus the viewer’s attention onto the shape of a car. While this video made me begin to consider how I could play around with shapes, lines and colours in my processing project I felt I needed to make a stronger link between this and the brief, one thing I will take on from this idea is how bright colours and strong contrasts in visuals on a display are more eye catching and immersive, furthermore the way the paint flowed and joined together with other streams when flowing across the car was something I found quite beautiful and I believe in my installation it would be more immersive and interesting to the general public for me to try and find a way of randomising or creating an enigma with my project.

Processing Workshop Friday 28th November – A new beginning!

I’ve found the last few processing workshops very difficult over the weeks, I understand the concept of what is happening however when its over to me to try and produce something following on from what we’ve been shown I’ve found often, frustratingly that I was unable to do so, this meant I fell behind, despite trying to seek guidance and looking through some internet tutorials.

I am happy to say that I was not the only student in this sort of trouble, it was intact a view shared by a fair amount of other students on the course and we were able to communicate this to our lecturers who were able to restructure how we would receive teaching in Processing which would allow us to gain a better understanding of a lot of the basic principals and elements of the language worked in order to build more solid foundations than the ones we already had.

The workshop today took a different course, it involved us watching our lecturer explain what we would be trying to achieve and how the final result worked before going and trying to replicate the same thing by ourselves, I felt more comfortable with this approach as I felt I had a better understanding of what we would achieve before we went out to do it ourselves, as well as this our lecturer reminded us of some helpful tips and ways of finding answers online via the processing website, I feel this will be incredibly helpful in the future as all of the examples are well worded and clear enough that I feel I can now begin to work independently and not worry or find myself as quickly confused and likely to stop experimenting with Processing.

The task in the lecture was to use code to experiment with loading an image into a file, put simply, we began by coding a application which would find an image which we’d found and saved into the appropriate folder and load it into the space, this would not show the image as it wasn’t ‘drawn’ onto the canvas, but it was present in the space. Following from this we then were tasked to find a way of getting a rectangle to ‘get’ a single colour from the image and show it inside of it. This again involved finding out how to use the ‘get’ function in conjunction with drawing a rectangle (rect), to achieve this we used the code shown below –

Code for Processing Workshop

As shown the PImage function was used to store the image with the image then being loaded onto an appropriately sized canvas (the same dimensions as the image) and then loaded into the space using the line ‘img = loadImage(“Earth.PNG”);’. Using ‘void draw’ allowed me to show the full image onto the canvas, covering the entire canvas as I had stated ‘0,0’ meaning it would be displayed at the top left of the canvas. To use Processing to look at the image and find a colour the ‘get’ command was used, to make it find the colour of the pixel at the location ‘350, 300’ the ‘color c’ command was used. Colour ‘C’ would now be used to fill the rectangle, this was achieved by changing the fill to ‘fill(c)’. noStroke was used purely for aesthetic purposes, this would remove the black background encapsulating the rectangle and the rectangle was drawn at point ‘350, 300’ with a size of 30 x 30 pixels so it would be coloured similarly to the image behind it and be of a size large enough to be noticed so I would know if it had worked. The final result is shown below.

The finished working application
As shown here, the code worked and a small grey box can be seen slightly right and to the centre of the image.

After this as an extension to this we were tasked to take this one step further which would make the application interactive, this was to make the box show the colour of the pixel the mouse was hovering over. This would involve adding ‘MouseX’ and ‘MouseY’ which would replace the pixel reference ‘350, 300’ given previously, this would allow the application to use the X and Y axis of the position of the mouse cursor and generate the colour of the pixel it was hovering over.

Pseudo-code – A very useful tool!

'Awesome' meme

Today we were given a lecture focusing on the technique of writing pseudo-code before going ahead and writing the final code. Pseudo-code is defined as ‘An outline of a program, written in a form that can easily be converted into real programming statements‘ (Webopedia, 2014). 

I found the way the lecture was delivered very interesting, our lecturer simply told us that she was a ‘robot’ for the purpose of the example, she would be stood on a point (which she marked out) and needed to get to another point next to the whiteboard and draw a chair. At first it was difficult for me to get my head around this idea as I found the whole thing to be rather ambiguous, only now when I’m writing this blog do I fully realise that intact to look at this task as ambiguous would do nothing more than stifle what our lecturer was trying to do. So once we’d tried and failed several times to try and get our lecturer to move to the whiteboard and draw the chair by not being specific enough or thinking as simply as possible (breaking down multiple, yet such natural steps for us we forget its intact several things happening) we managed to really begin thinking in a way which allowed us to break down steps fully,

I believe this was a thoroughly useful exercise. I say this because by taking a project and breaking it down fully, like a plan before jumping in and going for it gives us the advantage of being able to pick apart the steps we thought we’d take and refine and improve the code we’d eventually make before even writing it, saving time and using the time we’d spend completing the project much more efficient, as well as this when looking at the steps in this way using Processing as an example here, by breaking down what we’d need to code we’d be able to think about what libraries were already out there to help us with this code which would mean less coding would be required, saving more time.

Source – Webopedia, 2014. What is Pseudocode. Quinstreet. Available from: [Accessed 3 December 2014].