The Code for my Final Project

This is just an example of my code for the final project and some notes for what each section does.

Global Data


Void Setup


Void Draw

draw part 1 draw part 2

Void GrabPixel

grabPixel part 1

grabpixels part 2

Void DrawBuildings

drawbuildings drawbuildings part 2

Void Clouds

void clouds

EvaluateChange method

evaluate change


Testing Project

Today I tested my project in the foyer for the first time.

I think that this testing was quite important because it showed me how the project worked with people walking passed the camera naturally which made me change some parameters in the code to make it more efficient, it also gave me some insight into the audiences interaction with the project. I find that because the pixels that pick up the changed in brightness which affects the towers’ movement are in a straight line, from left to right, the towers move upwards from right to left as someone walks past the screen, this isn’t really what I want so I will randomise the pixels which are comparing brightness with on another so different towers move upwards at different spaces on the camera, so that the rising of the buildings is less linear.

In this video I put the video the camera is capturing as the background so the movement which affects the images can be seen. The white line shows the section of the camera where the pixels which are comparing the changes in brightness are assigned.

What I originally wanted to do was to have every pixel of the camera effect the movement on the camera depending in the changes in brightness but after discussing this with Paul in a workshop he suggested that he didn’t think that it would be neccessary as he felt that it worked well enough already with just one pixel affecting the movement of the towers. I think for the foyer of Weymouth house it is enough to pick up peoples movement but if the camera was in a different position, such as the corner of the room it would be nice to have every pixel which the camera captures effecting the movement of the skyscrapers as I think the idea of collectivism would be more apparent. As only 24 pixels are being used this doesn’t really reflect the significance of large amounts of people, in my opinion.

However, saying this I think that the project works really well although I would like to test it in a busier environment because when I was filming these videos there weren’t that many people occupying the space so I would like to see what happens when the foyer is busier. Below is a video from my smart phone of the actual project with a blue background and no visibility of what the camera is capturing, how I intended the project to actually look.

Final Project Problem Solving

In my last post I discussed a problem I was having with the towers movement. I have recently solved this problem and I realised that it was because all my images’ colours were assigned to one colour.

Screen Shot 2015-01-25 at 16.50.27

The evaluateChange method has three parameters, a float variable, and two color variables.

Screen Shot 2015-01-25 at 16.44.44Screen Shot 2015-01-25 at 16.44.52

The left image is what my code was previously, the right image is what I changed. As can be seen in the first screenshot the second parameter for each image is “c2” this means that every colour value being found by the camera using the get function was using the same colour to compare brightness with, which means I wasn’t getting the reaction I intended because the images were not independent from one another and were using the same colour values.

Screen Shot 2015-01-25 at 16.43.38Screen Shot 2015-01-25 at 17.05.15

Previous code: Each tower is being assigned to one colour (c2).

Screen Shot 2015-01-25 at 16.43.47Screen Shot 2015-01-25 at 17.06.07

I had to create new color variables for each tower image so that they would all be comparing the previous brightness to the brightness that was being captured by the camera from each individual pixel.

Now that I have resolved this problem I feel that i am ready to test my project in the foyer at weymouth house.

Final Project update

Today I did the final designs for my towers and loaded them all into processing so that the towers now span the entire width of the document. Now every tower moves at a different time but I am still having some issues as they are not all responding as well as I would like.

As can be seen in the video above the problem I am having at the moment is that the images are not moving down when I move off the screen, I am not sure what is wrong but I will try and solve this before I test my project in the Foyer of Weymouth house.

From when I tested how the project would work previously I have learnt some valuable lessons which helped me to save a lot of time. With the names of each image I have stated whether the towers are in the foreground background or middle because last time I found this very confusing trying to work out what images should go behind or in front of one another, I’ve also named in numerical order from left to right (as can be seen below).
Screen Shot 2015-01-25 at 01.06.13  Screen Shot 2015-01-25 at 01.08.57

Each tower has it’s own colour which is being picked up by the on-board camera by using the get function. These colours are then compared using the evaluateChange method which I discussed in this post. The pixels which colour values are being read go across the centre of the screen, I feel that this is best for now because the most amount of movement is likely to happen in the centre of the screen. However I would like to find a way where I can read every pixel on the canvas and assign a certain amount of pixels to each image as I think this would be better.


As of yet I have not repositioned the images so they are in the correct order, but I intend for them to eventually look like how I arranged them in the Photoshop (above). I prefer my skyscrapers now as they are a bit more diverse which gives the ‘city’ a bit more character. I stayed away from using smaller building like I used previously because I felt having buildings which were small in height didn’t work as effectively.

Processing Project Update

Yesterday I had a discussion with Paul in the workshop about how I should progress with my project and he suggested that instead of comparing the pixels rgb values he felt it would be more beneficial to compare the pixels to the brightness, he suggested that I look at the code in the document “captureToHeightString3”, which was in the processing workshop 10 folder on the mybu website.

In this image below I have written some notes as to what each of the lines of code do.

Screen Shot 2015-01-24 at 18.36.54

This code uses the abs function in processing which converts all floating or integer numbers to positive numbers. This was useful to me because it meant that if I were to compare two pixels to one another (previous brightness of a pixel to current brightness of a pixel) and the brightness value which is being compared is under the value of the original pixel which it is being compared to then it converts that negative number to a positive number, which means that only positive values are being returned, this helps because it means that the images will move upwards regardless of whether the brightness is greater than or less than the previous brightness.

As can be seen from a previous blog post, the ways in which the towers move is significantly different. They are more ‘bouncy’ than previously. What I need to do now is work out a way to make each tower move differently depending on the brightness of different pixels, instead of them all moving up together, as this doesn’t reflect collectivism (i.e. societies aren’t constructed because of the result of a single individuals actions).

Also I need to play around with the code so that it works better for me, because at the moment the towers are moving up too high and are also not moving down fast enough (because the section of the code “change *= 0.99” needs to be changed).

Changing Positions of Towers

Today I added all my towers to processing (although these are just test images) to see how it would work. I also managed to get different objects moving at different speeds and moving up and down depending on the colours of specific pixels that the camera is capturing.

I did this by progressing from my previous post where I discussed how I got a square to move up and down depending on the colour value of a single pixel. But this time I created new color variables and assigned them different rgb values. I then used separate if statements for different images.

As you can see from this video the square is moving up at a different pace to the other towers and sometimes when it moves down the towers continue to move upwards.

Screen Shot 2015-01-23 at 23.45.24

These are the global variables at the top of the document which set the colours and starting y positions of the towers and rectangle.

Screen Shot 2015-01-23 at 23.57.09

This is a function called grabPixel which contains all of the towers (the function gets called in the draw section).

Screen Shot 2015-01-23 at 23.57.42

These are the if and else statements that make the images move upwards or downwards depending on if the rgb value the camera is picking up is greater or less than the rgb value declared at the start of the document.

The problem with this is that I will have to create an if statement for each image and assign each image slightly different colours to make the towers move up and down at different times, this can probably be done easier by creating classes and using object orientated programming like I explored in this post. However because I’ve set the rgb value to the colours of the background of my room the idea will probably not work as effectively in the foyer of Weymouth house (for example) because the colours in the background will be different to where I am doing the testing. One way I would be able to overcome this is by having something in the backround, such as a white sheet, so the value of the background is always the same, though this isn’t that suitable for a location such as Weymouth house.

Another problem I have is making sure that the towers don’t go too high so that their height exceeds the rectangle that is ‘in front’ of them, as you can see from the video I just showed the towers continue to rise and there is no point in which they stop, I have tried to resolve this by creating another if statement which states that when the int move is equal to 200 then add 1 pixel instead of take away one pixel, which makes it not go passed 200 pixels down from 0 on the y axis.

Testing moving shapes via pixel color values.

Today I worked out how to affect the movement of an object depending on the value of a single pixel. This is useful for me because it is what I’m going to need to do with the skyscrapers so that they all move up depending on if a predefined pixel value is changing, what I now have to work out is how to get a number of rectangles moving at random speeds and assign them to each pixel of the canvas. I think that I need to create some for loops but assign them different values to different objects, but this is something I’m going to have to find out through trial and error and (most definitely) endless amounts of debugging. I also have to work out how to make the pixel values automatically adjust to the background upon capturing frames so that the towers don’t rise to the colours in the background, and also make sure that small changes in the background don’t affect the movement either. Fortunately I feel that this isn’t beyond my ability to solve.

To achieve this I firstly used the ‘basiccam.pde’ file which I downloaded from the processing workshops page on mybu. This showed me how to import the video library and setup the camera so that it would use my on board camera and assign it to the document, I also used the video library page on the website, which showed me another variation of using the video library. Below is a short summary of the steps I took to get to where I am.

Screen Shot 2015-01-13 at 03.23.50

This syntax imports the video library to the processing document, and uses the ‘Capture’ variable which is native to the video library and works much in the same way as a PImage variable etc. Here the capture variable has been assigned the name ‘cam’.

Screen Shot 2015-01-13 at 03.24.25

In the setup section we need to tell processing that we’re going to be wanting to use the camera to capture, here I setup a ‘new’ capture which is going to use the capture data type on ‘this’ document and is going to span the entire width and height of the canvas. This is assigned to the variable cam which was defined at the top of the document.

Screen Shot 2015-01-13 at 03.24.42

Here there is an if statement with uses the ‘available’ method to determine if the camera is working or not, if the camera is ‘available’ then processing performs the function called ‘grabPixel’.

Screen Shot 2015-01-14 at 08.12.31

The basic cam example also used the ‘get’ method which I have discussed in a previous post to get the pixel value of the centre pixel on the screen, it then created a float variable called ‘v’ which used the map method to compare the pixel value to the brightness method and then finally an if statement which stated that if the brightness of the variable ‘v’ was greater than a certain value then it would perform a function, otherwise it would perform another function.

Because I wanted the pixel value to react to changes in colour instead of brightness I needed to work out a way to do this. I did this by creating a number of variables which would hold the values of the colours which I wished to make a rectangle change direction depending on if the pixel value was lower or higher than the value captured by the camera. Because the background of my room appears green on my camera I needed to take this into account, what I did was take a screenshot of the backround of my room from the video, and used this website ( to convert the colour of the image to a hex code, I then used a hex converter to convert the code to rgb. I used the rgb value to define the value of the color variable which would decide if the rectangle moved up or down.

Screen Shot 2015-01-14 at 08.16.35

Variables defined at the top of my document.

Screen Shot 2015-01-14 at 08.17.58

This shows my altered ‘grabPixel’ function, the colour c is defined as whatever the 25 by 25 pixel on the canvas is. The if statement decided whether or not the rect with the variable ‘move’ should add or take away height depending on if the colour value of ‘c’ is greater than the colour value of ‘d’.

The problem with this however is that the rectangle is responding to a single colour value where as I need it to respond to a change in colour values from a change in the background because I need a shape to move when the colour is different to the background and not if it is just a brighter or darker colour, I think my answer to solve this problem lies in the map method but I need to figure out how to make it work, I may have to also mess around with colour values to get the correct response. Though I think this is a good start and happy with the progress I have made so far.

Below is a video of me testing my code.