Final Processing Code

Here is the final code for my processing project.


PImage img1;
PImage img2;
PImage img3;
PImage img4;
PImage img5;
PImage img6;
PImage img7;
PImage img8;
PImage img9;
PImage img10;
PImage img11;
PImage img12;
PImage img13;
PImage img14;
PImage img15;
PImage img16;
PImage img17;
PImage img18;
PImage img19;
PImage img20;
PImage img21;
PImage img22;
PImage img23;
PImage img24;
PImage img25;
PImage img26;
PImage img27;
PImage img28;
PImage img29;
PImage img30;
PImage img31;
PImage img32;
PImage img33;
PImage img34;
PImage img35;
PImage img36;
PImage img37;
PImage img38;
PImage img39;
PImage img40;
PImage img41;
PImage img42;
PImage img43;
PImage img44;
PImage img45;
PImage img46;
PImage img47;
PImage img48;
PImage img49;
PImage img50;
PImage img51;
PImage img52;
PImage img53;
PImage img54;
PImage img55;
PImage img56;
PImage img57;
PImage img58;
PImage img59;
PImage img60;

Capture cam;
color [] colours;

void setup(){
size(1920, 1080);

img1 = loadImage(“Skype.png”);
img2 = loadImage(“dell.png”);
img3 = loadImage(“beats.png”);
img4 = loadImage(“intel.png”);
img5 = loadImage(“nike.png”);
img6 = loadImage(“twitter.png”);
img7 = loadImage(“coca-cola.png”);
img8 = loadImage(“apple.png”);
img9 = loadImage(“starbucks.png”);
img10 = loadImage(“sony.png”);
img11 = loadImage(“canon.png”);
img12 = loadImage(“easports.png”);
img13 = loadImage(“soundcloud.png”);
img14 = loadImage(“youtube.png”);
img15 = loadImage(“windows.png”);
img16 = loadImage(“amazon.png”);
img17 = loadImage(“wella.png”);
img18 = loadImage(“McDonalds.png”);
img19 = loadImage(“google.png”);
img20 = loadImage(“bbc.png”);
img21 = loadImage(“channel4.png”);
img22 = loadImage(“android.png”);
img23 = loadImage(“lg.png”);
img24 = loadImage(“playstation.png”);
img25 = loadImage(“puma.png”);
img26 = loadImage(“whatsapp.png”);
img27 = loadImage(“costa.png”);
img28 = loadImage(“hugoboss.png”);
img29 = loadImage(“ee.png”);
img30 = loadImage(“krispykreme.png”);
img31 = loadImage(“rayban.png”);
img32 = loadImage(“volkswagen.png”);
img33 = loadImage(“odeon.png”);
img34 = loadImage(“pinterest.png”);
img35 = loadImage(“pringles.png”);
img36 = loadImage(“ebay.png”);
img37 = loadImage(“monster.png”);
img38 = loadImage(“underground.png”);
img39 = loadImage(“bp.png”);
img40 = loadImage(“marriot.png”);
img41 = loadImage(“hp.png”);
img42 = loadImage(“glaxosmithkline.png”);
img43 = loadImage(“3m.png”);
img44 = loadImage(“cnn.png”);
img45 = loadImage(“converse.png”);
img46 = loadImage(“durex.png”);
img47 = loadImage(“kawaski.png”);
img48 = loadImage(“evian.png”);
img49 = loadImage(“element.png”);
img50 = loadImage(“sennheiser.png”);
img51 = loadImage(“vans.png”);
img52 = loadImage(“reebok.png”);
img53 = loadImage(“motorola.png”);
img54 = loadImage(“landrover.png”);
img55 = loadImage(“ups.png”);
img56 = loadImage(“ikea.png”);
img57 = loadImage(“dominos.png”);
img58 = loadImage(“lego.png”);
img59 = loadImage(“newbalance.png”);
img60 = loadImage(“gillette.png”);

cam = new Capture(this, 160, 120);
colours = new color[61];

void draw(){
// if(mousePressed){saveFrame(“###.png”);};
//tint( 0 , 0, map(mouseX, 0, width, 0, 255));
if(cam.available() == true){;
grabPixel(0, 30, 70);
grabPixel(1, 60, 30);
grabPixel(2, 80, 30);
grabPixel(3, 100, 30);
grabPixel(4, 150, 30);
grabPixel(5, 20, 30);
grabPixel(6, 10, 30);
grabPixel(7, 5, 30);
grabPixel(8, 1, 30);
grabPixel(9, 150, 100);
grabPixel(10, 130, 100);
grabPixel(11, 120, 80);
grabPixel(12, 60, 60);
grabPixel(13, 40, 40);
grabPixel(14, 30, 80);
grabPixel(15, 70, 100);
grabPixel(16, 10, 10);
grabPixel(17, 80, 30);
grabPixel(18, 20, 20);
grabPixel(19, 40, 70);
grabPixel(20, 30, 50);
grabPixel(20, 60, 30);
grabPixel(21, 100, 80);
grabPixel(22, 40, 80);
grabPixel(23, 140, 90);
grabPixel(24, 100, 90);
grabPixel(25, 50, 90);
grabPixel(26, 70, 90);
grabPixel(27, 90, 60);
grabPixel(28, 70, 80);
grabPixel(29, 20, 90);
grabPixel(30, 145, 110);
grabPixel(31, 130, 45);
grabPixel(32, 110, 110);
grabPixel(32, 80, 100);
grabPixel(33, 50, 60);
grabPixel(34, 20, 110);
grabPixel(35, 10, 30);
grabPixel(36, 150, 10);
grabPixel(37, 155, 80);
grabPixel(38, 120, 10);
grabPixel(39, 50, 50);
grabPixel(40, 90, 80);
grabPixel(41, 10, 85);
grabPixel(42, 60, 30);
grabPixel(43, 95, 50);
grabPixel(44, 70, 10);
grabPixel(45, 90, 55);
grabPixel(46, 100, 20);
grabPixel(47, 120, 70);
grabPixel(48, 110, 40);
grabPixel(49, 40, 45);
grabPixel(50, 80, 75);
grabPixel(51, 100, 55);
grabPixel(52, 85, 35);
grabPixel(53, 95, 65);
grabPixel(54, 20, 40);
grabPixel(55, 30, 30);
grabPixel(56, 70, 25);
grabPixel(57, 55, 85);
grabPixel(58, 75, 65);
grabPixel(59, 80, 95);

}//end if available

image(img1, 0, 10);
image(img2, 300, 10);
image(img3, 450, 10);
image(img4, 600, 10);
image(img5, 800, 10);
image(img6, 1050, 10);
image(img7, 10, 150);
image(img8, 1210, 10);
image(img9, 425, 150);
image(img10, 10, 310);
image(img11, 450, 310);
image(img12, 1220, 150);
image(img13, 560, 150);
image(img14, 770, 150);
image(img15, 1080, 150);
image(img16, 900, 310);
image(img17, 10, 410);
image(img18, 240, 410);
image(img19, 400, 410);
image(img20, 700, 410);
image(img21, 1200, 310);
image(img22, 1120, 420);
image(img23, 1280, 310);
image(img24, 1230, 420);
image(img25, 10, 550);
image(img26, 160, 550);
image(img27, 320, 550);
image(img28, 440, 550);
image(img29, 710, 550);
image(img30, 790, 550);
image(img31, 1130, 550);
image(img32, 10, 690);
image(img33, 155, 690);
image(img34, 470, 690);
image(img35, 610, 690);
image(img36, 730, 690);
image(img37, 1070, 690);
image(img38, 1210, 690);
image(img39, 1330, 10);
image(img40, 1460, 5);
image(img41, 1785, 10);
image(img42, 1420, 150);
image(img43, 1400, 420);
image(img44, 1600, 150);
image(img45, 1380, 310);
image(img46, 1515, 310);
image(img47, 1750, 310);
image(img48, 1670, 410);
image(img49, 1380, 560);
image(img50, 1520, 560);
image(img51, 1390, 700);
image(img52, 1690, 560);
image(img53, 1770, 710);
image(img54, 10, 850);
image(img55, 270, 850);
image(img56, 400, 850);
image(img57, 790, 850);
image(img58, 950, 860);
image(img59, 1200, 860);
image(img60, 1410, 860);

if( mousePressed ){


void grabPixel( int i, int x, int y){

colours[i] = cam.get(x, y);
void voidTestDraw(){
image(cam.get(), 0, 0);

Processing Project – Evaluation of Project and the Unit

Now that my project is finished and I have reached the deadline I can take a step back and critically analyse how I feel the project has gone.

Firstly, I did find learning Processing to be interesting, I know that it is always a good thing to learn a new code language, even if I will not use the language in the future I know that learning ‘how to learn’ code languages is an excellent skill. In the next unit we will create an app, this will involve learning ‘swift’, another language used to code which will then require me finding better ways of how to learn how to successfully master this code language, I feel it is of upmost importance to view each unit and subject or piece of software we use to be a positive learning experience.

Saying this, I can say that I haven’t found using Processing to be enjoyable, as is evident from my blog as well as the learning process I had to take to complete this project, I feel this was mainly due to the structure of the workshops however I found it was even more evident when doing the coding in this project that I have more of a designer mentality, therefore coding is not a strong point of mine. I feel that once I decided to attend more workshops (once more were put on) this gave me more time to seek guidance from Paul, our tutor. Overcoming many barriers along the way actually helped me understand Processing better as I had to understand what each function meant to be able to successfully debug my code.

I feel my performance was good during this project and I am happy with the outcome, it must be noted that I did not manage to achieve the goal that I first set out for myself, the original idea for this project was to use colour tracking to track the colour/s individuals were wearing and highlight or light up logos that are similar to that colour. The outcome I ended up with was a board of logos which would react to pixel values taken from the webcam, I feel this compromise did not lessen the visual impact of the project but simply made it more visually diverse and more immersive for the audience, this was because all of the logos were viewable even when their colour was not directly affected by the webcam values, this kept the screen filled with logos  which would react randomly to movement inside the radius of the webcam, I’m grateful for my tutor for helping me scale my ideas down before undertaking this project because he allowed me to break down the work flow into manageable sections, one part of Processing which still can be mis-leading for beginners is that it may look like the code used to create large, complex projects is short however due to the large array of commands and functions inside the software this does not necessarily mean it will be any easier to make sketches, something which I have learnt during this project.

To adress future improvements, I feel a way of improving the project would immediately be to again increase the quantity of logos, I feel the project works when users see a logo they recognise which then prompts them to begin considering their own relationship to the brand, therefore to add more logos would simply increase this effect as they would no doubt see more logos and brands they would purchase from or look to. As well as this I feel one interesting addition to this project could be to use blob-detection (body tracking) to track a user and create a ‘body’ of logos, this would immediately make the project more personal to the audience, something which I feel is important as in this project my aim is to show users how we are beginning to operate more and more like a hyperrealistic culture where we adhere strictly to idolised, perhaps ‘unhealthy’ normals and begin to lose ourselves in the want to be ‘normal’, had I had more time to complete this project this would have been something I would look in to.

I am also pleased with how I handled issues along the way with this project, due to my knowledge before undertaking this project that I struggled with coding I knew it would benefit me to take more time to come in and attend extra workshops and spend more time in the university campus meaning I could seek guidance more easily, meaning I use my time more efficiently, furthermore, when I did have an issue that I was not able to solve individually I made sure I met with my tutor on the same day to rectify the issue, this shows professionalism and ensured I could carry on working on my project again quickly.

Using the iterative process for creating this sketch benefitted me I find that the way I think means that the ‘trial and error’ process which is a key trait of the ‘prototyping’ process in the iterative design process benefitted me greatly. It also allowed me to gain critical feedback throughout the process and improve my project at regular intervals during the completion of the project.

When considering the theory aspect of this unit I made sure I stuck to my main concepts of identity and consumer culture which I felt was important as it meant I was able to stay on track with my project and sensibly limit myself in this aspect of my project, this ensured my final project still fit the brief.

To conclude this unit, I have learnt how to design iteratively, I have evidenced my work here on this blog and have tried to use as much evidence as I can to clearly show the stages I went through to create this Processing project as well as various inspirations I’ve had along the way, partnered with other hobbies and interests and finally posts regarding the Dorset Independence campaign brief we were given at the beginning of this unit.

Processing Project – Final Testing, time to be a TV student

Having individually tested and rectified any outlying issues with my processing project I presented it on the screens in the Weymouth house foyer. The process of filming was lengthy as I was keen to make sure I placed the installation at the right location in the foyer. As my installation is designed to catch the eye of the audience I wanted to put the installation somewhere where people would walk past most frequently, this both causes the installation to be frequently active as for it to function as intended the webcam requires movement for the ‘tints’ of logos to change, and also this would enable the largest audience to be reached, educating more people (in my personal case) about the permeation of brands and the ‘branded’ culture we have moved into.

The bright colour scheme mixed with the bright furnishings in the foyer of Weymouth house made my installation look even more visually appealing, this is something I had considered when designing my installation, furthermore I feel it also makes the installation looks more co-ordinated with the building as due to the ‘grabPixel’ function picking up random points the installation will adopt the colour scheme of the room it’s in, I feel this gives it added visual appeal which is important to draw in the audience.

I chose to place my installation on the screen facing the front entrance of the Foyer, I did this because there is a large distance for people to walk through allowing them to see the changes in the pixel values and engage with the installation. As well as this around the area in which the webcam will see there is a number of brightly coloured features such as wall, Police phone box (from the TV program ‘Dr Who’), Sully model (from the film ‘Monsters Inc’) all of which provide good contrast for the installation.

Once the installation had been set up I filmed two individuals and asked them a few questions in response to the installation. Here shown below is their response to the installation –

User Testing – Processing Project from Oliver Evans on Vimeo.

Processing Project user testing – Close up response from Oliver Evans on Vimeo.

The videos show the reaction of the audience to the project, as well as gauging how they interact with the installation.

Overall I am pleased with the way it catches the attention of the user, when interviewing the individuals afterwards the comments made reference to the  view that the installation was “creative and immersive”  as well as addressing a “contemporary concept that is always overlooked and consciously missed”. Another individual commented that the installation was “effective” and “futuristic” going on to comment “I also liked the concept that he was portraying which was that everywhere we go we are followed by designer labels/brands which relates to the on going process”, I am impressed at just how much the individuals picked up and then began to think about the permeation of branding in our society, this was exactly what I was looking to achieve; awareness.

Processing Project – Problems with testing

I’ve found the past few days to be incredibly testing, multiple errors followed by seemingly illogical issues I had not foreseen have meant I’ve had to put in more time than expected to making my installation presentable.

In the brief we were given it states ‘create a piece of interactive information design for a shared public space‘, we were told during working on the brief that we would then be presenting our work on ‘one of the public screens … in the foyer of Weymouth house’, this would mean creating our canvas to fit the screens which we would then have access to at this final stage of our projects.

When creating my project I made an error I had not foreseen as being an issue, this error was that I created a canvas to fit the size of my computer screen with an appropriate resolution to do so, when trying to present my work on the screen in the foyer of Weymouth house I found instead of being able to simply ‘mirror’ my laptop screen to present I had to use a different resolution, therefore causing my canvas to not fit the screen and therefore looking unfinished and not acceptable for presentation.

Shown here the logos do not fit the screen and the project therefore does not create the visual impact that I would like to create.
Shown here the logos do not fit the screen and the project therefore does not create the visual impact that I would like to create.

To fix this issue I attempted to try and make the logos fill the screen, this involved altering some width and height values in my code – shown below.

Here, I used 'displayWidth' and 'displayHeight' to try and make the canvas fit the resolution of the Weymouth house screen, although this resulted in the canvas then fitting the screen, the logos, as shown in the image above still did not fit due to their own individual, predetermined height and width values which would have had to be changed manually.
Here, I used ‘displayWidth’ and ‘displayHeight’ to try and make the canvas fit the resolution of the Weymouth house screen, although this resulted in the canvas then fitting the screen, the logos, as shown in the image above still did not fit due to their own individual, predetermined height and width values which would have had to be changed manually.

I felt at this point I had two options – one being to go back through each file containing each logo and change the width and height values to make them fit the new, larger canvas, this would mean going through trial and error stages to work out how large to make each logo, as well as then changing the values of their location on the canvas to ensure they didn’t overlap. The second option was to add more logos, something I felt would if anything make the installation more visually appealing and save time by only having to add in logos using the sizes I had already determined as suitable for the installation.

Later, when adding more logos I found that the code I was using to make the logos tinted by the values received from the webcam were intact not functioning as they should, instead of reacting to the ‘grabPixel’ location values I had declared, they did not respond, creating a black space instead of the logo. Puzzled, I investigated this issue further and was thoroughly perplexed due to what I felt was an illogical problem. Even writing this post I am still not completely understanding why the issue arose as the ‘grabPixel’ values I had used in the function were within the webcam range (160, 120) and therefore should have worked correctly.

To rectify this issue I asked my tutor to meet with me to help me decipher where in my code I had made an error. She gave me the advice to break down which parts of the code worked and which parts didn’t, she also suggested making a copy of the source code and then taking away large parts of the code to single out the few parts that did not. I found this incredibly helpful as due to the number of logos I was using in my project it meant my source code was long and often difficult to navigate through, it also allowed me to make larger changes to my code without the worry of losing any code, though this was a practise I was already aware of and had put to use earlier in the project encountering an unforeseen error like this made it clearer to me how important it is to save progress while the project works to be able to fall back on it in case un-fixable errors occur.

I found eventually the problem was to do with the values I had entered for the ‘grabPixel’ function, by lowering the values from the edge of the limit of the highest and lowest points of the webcam I found this then rectified the issue.

To update I found using exact values of the canvas size allowed me to gain some stability in viewing the project both on my laptop when it was not attached to the screen as well as when I had the laptop connected to the screens. In short - this eliminated random errors occurring in this area of the project.
To update I found using exact values of the canvas size allowed me to gain some stability in viewing the project both on my laptop when it was not attached to the screen as well as when I had the laptop connected to the screens. In short – this eliminated random errors occurring in this area of the project.

In the future I will complete the project adding in logos to create a full ‘board’ of logos and present it on the screen in Weymouth house which I plan to test tomorrow.

Processing Project – Dead End

As shown in my previous blog post I have reached a point where I have successfully created the logo board I was aspiring towards, as well as it being able to react to changes in colours picked up by the webcam. From this I want to extend the project and make it so that the webcam values picked up are not simply just given as a ‘tint’ to the logo for it to appear as a block colour.

Tutor assistance example code
Here shown is the code my tutor created to give me an example of how in a basic form processing can be used to take a colour (the example being the green square on the left) and take only the blue value from the colour when splitting it into ‘RGB’ and present that on the right square where the middle square shows the maximum blue value.

From the code shown here although it did take a step towards my final goal of trying to use the values of colour picked up by the webcam to match the colour value with a logo which would be ‘lit up’ in the installation I will present.

After playing with the code written for me by my tutor in an attempt to use the webcam to give me a colour value rather than manually input RGB values I found the example set up I had created gave me this error –

“processing error ** (processing core video:9140): warning **: colorconverter: size 83200 is not a multiple of unit size 80000”

This error had me dumbfounded for a few hours before I made the decision to not progress with trying to take my project to this level, I felt that currently, though I have not achieved the initial goal I’d set for myself in this project the final sketch still achieves what I wanted it to achieve, this being an installation which creates an awareness in audiences of the staggering amount of brands in this world and their impact on society.

From here I plan to move on to testing my project on the screens in Weymouth house for a live audience, this will allow me to observe their reaction and interview them to gauge whether or not they feel the installation has had the effect I had hoped for.


The adoption of digital technologies and platforms has lead to an increase in what theorists such as Jean Baudrillard would call ‘hyperreality’, this simulacrum hints towards a ‘sign’ or ‘person’, to stretch the metaphor,  where the sign’s meaning is then lost or superseded due to the representation of ‘the real thing’  becoming more important than ‘the real thing’. This allows people to build up an online identity due to it’s accessibility and availability to the general public and allow that to shape who they are. Thus then the simulation of an individual has collapsed and brought about ‘hyperrealism’ where the illusion of an object or person is no longer possible because the real object is no longer there; they become the illusion and lose the original.

This idolised celebrity culture we are subject to due to television now acts as what the general public are ‘cultivated’ to believe is normal, where intact these ‘celebrities’ are cocooned in a hyperreality where there is someone to look after or oversee every are of their life.

I feel this concept links well to my project and has made me think more closely about how we are be moulded by the information we are subject to, whether this being those individuals around us or objects. I also feel that my work should aim to show people how branding in particular is shaping their identity and how subconsciously it can be argued that we are all moving towards a ‘hyperrealistic’ society.

Sources –

Baudrillard, J, 1994. Simulcra and Simulation. Michigan, USA: The University of Michigan Press.

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)