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


A Retrospective Look at my Iterative Process

In a previous post on the poster project that we did at the beginning of this unit I discussed conveying meaning in design. I also wrote about semiotics and the significance of the image of the hand which we used in our posters. I think this relates to my final project for this unit because the buildings are the ‘signs’ which are conveying the meaning of our society, the image of a skyscraper can hold many signs, such as advanced technology, innovation, engineering, architecture but also of humans. Because skyscrapers are a product of humans we can relate and identify with them because they reflect the habitat that we live in and are created by our society.

Because skyscrapers are considered amazing structures of human ingenuity (well I consider them that) I felt like using the image of mountains is sort of the opposite of skyscrapers because they are powerful natural structures and symbolise the power of nature, and are also very large structurally. So the two compliment one another but also convey different meanings, one being the creations of people and the other the creations of nature.

Like how we used the image of the hand in the posters to represent the ability to affect change being “in our hands”, this project uses the image of buildings to represent our impact on the earth and how large societies can affect the landscape i.e. the more individuals there are in a society the more advanced a society becomes. I find it similar to how when the space station passes the Earth at night you can see the lights from all the cities, which is a great way to visually see the impact of people.

What I like about the project as I discussed earlier is that the audience doesn’t have to actually do anything to interact with the project. Just them being there is the interaction so it’s more of a conceptual artwork than something which people can have fun interacting with, I think this reflects my own taste in design and art as I’m not really someone who really enjoys having to ‘perform’ as part of the audience (although I find those sort of interactive installations impressive), I prefer interacting in a way which makes me think about something in a way that I haven’t previously. And this is what I have attempted to do with this project.

The problem with this however is I’m not sure if the audience would actually know that they are interacting and if their movement is what determines the height of the buildings, so in a way it’s quite hard to understand the concepts I am trying to put across. I think that if there was an explanation of what the idea is supposed to convey then it would be more understandable, or if I had put an image of the camera in the corner people might see that and be able to make the association. However this sort of defeats the object of the project, as what I wanted to do was have people to formulate a meaning in a short period of time, as they’re walking past, such as Banksy’s works, which I discussed in this post. However I think that the audience could understand the ideas my project is trying to convey just maybe not as efficiently as I would have liked.

Moving Forward

What I like abut the project is that it can be added to more which means that I could carry on the iterative process. In a previous post I discussed how I would like to add houses and maybe cars and do an number of different things to make it more lively, which would better represent a city and maybe make the idea more understandable. I didn’t get around to achieving everything I wanted to do mostly due to my lack of understanding of programming in general, but I think it would benefit me to add more to this project because it will give me some tasks to attempt in processing and I want to carry on practising so I get better at programming, because it’s a lot of fun and very satisfying when problems are resolved.

This project also made me realise the importance of discussing my ideas with other people who are more experienced with programming and it’s something which I like about the computing community in that people are very enthusiastic and passionate about coding and programming. I find this is a very important thing for me to acknowledge because sometimes I am reluctant to ask for help from others when I am stuck because I feel that it’s either cheating or I want to work out problems by myself (because I generally enjoy solving problems and the satisfaction that comes from working them out by myself), but sometimes people’s knowledge of the programming language is helpful because they can point you in the right direction and also suggest more efficient ways to structure the code (such as using object orientated programming).

I would also like to learn maths in my spare time as I think this is the area in programming that I am having trouble in as understanding the mathematical side of it is something that doesn’t come naturally to me, so I feel if I had a better understanding of math in general I would have a better understanding of programming languages in general and it would improve my coding and ability to solve problems.

I find that this project has also made me understand my style a bit more and the type of art and design which I like and how that is reflected in my designs. This project has made me think about the things I want to achieve personally as a designer and an artist not just in this project but in future projects and some good ideas have formulated which I wish to pursue, such as creating a backdrop in processing for my band and projecting it behind us when we play live, using the sound of the drums etc to affect what happens on the screen.

This project has also helped me to understand that sometimes when if I am creating a design for other people (or working towards a brief) I have to negotiate with what others want and not focus as much on what I actually want to do. For example, early on in this project I had a totally different idea and I wanted to make it fit in with the brief when there wasn’t really a way to make it fit to the brief, but I found it hard to not pursue that original idea because I had become attached to it and liked it a lot, but in order to relate to what the brief required a new idea spawned out of the original idea which was totally different, but I wouldn’t have ended up with this project if I hadn’t have thought about the idea which didn’t work originally, and this shows how important the iterative process is and also how beneficial it is to come up with multiple ideas instead of just sticking with the first idea, even it’s a good idea.

Mountains Design

Today I continued working on my mountain background image. Although I’m not 100% happy with the outcome I think they look better than previously, I have tried a series of different strategies and if I had more time I would probably start them again and try more. I tried to use a series of different brushes in Photoshop to get the snow look realistic but it was quite tedious. What I would have liked to have done in retrospect is make them look a bit more 3 dimensional, maybe have two sides and try shading one of the sides. However I think the outcome is sufficient.


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.

My Designs update

Today I worked on my background designs some more, I tried different methods to create some mountains in both Photoshop and Illustrator.


I tried a series of different techniques to try and make the mountains look more realistic, using darker shades for mountains further in the background and also introducing some snow using the brush tool and also creating some lines (on the left side) to try and make the mountain look more rigid.


I tried to use a photo of some mountains as a template but this didn’t work very well.


In my Photoshop designs I wanted to make the mountains look more realistic and with the Illustrator designs they look more cartoonish (I personally find they have a sort of Hanna Barbera feel to them). In Illustrator I used the pen tool as opposed to the brush tool in photoshop, which makes the lines more precise. I quite like the snowy tops but I also find they look a bit bland compared to the other design.

Screen Shot 2015-01-24 at 19.38.59

these are the outlines of the design, I filled them with colour in photoshop afterwards as I prefer using photoshop for that as it’s less tedious.. In order to change the shape of the mountains I havd to add anchor points to the lines.