Overall, I feel I successfully created a piece of interactive information design for the shared public space, which intends to elucidate/explain an idea or concept. I am happy with my final piece and felt that it worked well with the target audience (see users interacting with piece). I have learnt a lot by doing this project, both the programming side as well as following an iterative design process. The concept that my piece applies to is Surrealism, this concept interests me and looking at various surreal art work and photography really inspired me for my piece. I have used surrealist techniques in my piece such as the juxtaposition of falling objects, repetition of shapes, as well as ideas relating to the blurring boundaries between the real and imaginary. Throughout my blog, I have linked the theory modules that I have studied to my practice (media and history, and consumer culture) as I feel that this is important; it has developed my understandings and allowed me to use more theoretical analysis. I used an iterative design process to produce my piece, which allowed me to constantly gain feedback, and make improvements that have helped to make my end piece more successful. The iterative design processes that I followed were:

– Requirements Gathering
– Analysis
– Design
– User Testing

To view blog posts related to each iteration, then click on the individual categories. Throughout my blog you can clearly see the development of my piece: from learning the basics of programming, to watching tutorials, analysing existing examples, experimenting with various ideas, improving the piece, and finally to users interacting with my final piece.

Testing in Public Space

Here are the some videos of users interacting with my piece in the public space:

I feel that these show that my piece was successful in the public space as all users were easily able to interact with the piece without difficulty and they understood that they could use their body to obstruct the surreal falling shapes. I think that users enjoyed interacting with my piece and found it quite fun. The fact that multiple users can interact at once was good as it meant those that were more shy to interact could join others rather the interacting singularly. Also, those that didn’t wish to participate themselves were still able to see the piece. At the time of displaying my piece, the public space was fairly busy meaning I was able to get a fair few people to interact and many who watched the tv screen to see what was going on.

Barthes (1964 p.148) believes that

‘the birth of the reader must be at the cost of the death of the author’.

I feel that this can apply to my piece, as the power is given purely to the users. They are able to interact in any way they want, and without direction from me (author/producer), the users (readers) were able to understand my piece and seemed to enjoy interacting with it. It is the users that then appear on the tv screen of which passers by can see, meaning that they actually become a part of my piece. As mentioned in a previous post, Gray (2010 p.166) also suggests that

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

This highlights how in order for a text to be successful then it needs to have an audience. I feel that my target audience seemed to enjoy interacting with my piece and users had fun obstructing the falling shapes in various ways. Some viewed the piece on the portable tv screen and asked questions, showing that they were interested and intrigued with the piece but maybe were too embarrassed to interact in front of others.

Overall, I am pleased with the end result and feel that my piece worked well within the public space. Next, I will go on to briefly evaluate my piece in relation to the brief, and discuss the iterative processes that I followed.

Barthes, R, 1964. Elements Of Semiology. New York: Hill and Wang.

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

Testing in Public Space – Resolving Problems

20150114_145209Today, I tested my piece in the public space and had to overcome various problems in order to get my interactive piece to successfully work. I initially had planned to display my piece on the public screen opposite Costa (see image on right). I set it up using my laptop webcam, however as expected the crowded background in Weymouth House meant my piece wouldn’t work correctly. The video capture picked up the posters and various other objects which caused the shapes to not work correctly. I experimented with altering the threshold level in the code, but to resolve the problem I needed to put up a white screen to blank out the cluttered background. Here are the different threshold experiments, ranging from threshold of 70 – 140:


Due to circumstances I was unable to put up a white screen as Costa did not approve as it meant some of their seating would become obstruct20150121_111653ed. Therefore, I was unable to use my chosen public screen. To resolve problems with the cluttered background, I set up my piece in the small tv studio, near the entrance of Weymouth House. The walls were plain white and there was more space for users to interact with my piece. I used a portable screen, of which I connected my laptop to, and video captured users from my laptop webcam. However, due to the lighting of the area, I had issues with capturing a silhouette-like figure. As the lighting was shinning directly down and I was wearing a short sleeve top, it meant my arms appeared as being mainly white. This made it quite hard to interact wiScreen Shot 2015-01-21 at 11.47.51th as obstructing the falling shapes was more difficult. Also, due to their being a bright light shinning directly onto the area, it meant a shadow appeared on the white wall behind the person. To resolve the problems, I altered the lighting and experimented with various different threshold levels to see what worked best in the area. I also found that the piece seemed to work best when users had long sleeves on as this meant they appeared as being more silhouette-like. I decided to rotate the portable tv screen around, allowing the users to see themselves on the laptop screen and others to view the piece on the tv screen. This meant that even if people didn’t wish to interact, they can still view the piece and decode their own meanings and messages. Here are pictures of the final set-up and users interacting with my piece:Screen Shot 2015-01-21 at 14.57.15 20150121_120433

From this, I feel I should’ve possibly been a bit more organised and asked in advance about a white screen and permission from Costa. However, I feel that the area I used in the public space worked out to be more suitable, as it allows more room or individuals/multiple users to interact. Its also means that to preview the piece, you don’t have to physically interact with it as you can see others interacting on the public tv screen. I think that due to the area and set-up, when people see others interacting then it encourages them to go up and interact. Users can interact with friends and are able to have more fun playing around with the piece. Next, I will add videos of users interacting with my final piece and discuss comments that I recieved when displaying my piece.

Testing in Studio

Today I tested my interactive piece in the studio room, W119. There was a white board and white projector screen available which I was able to use for the clear background. From testing the piece, it allowed me to see if it worked properly, as well as to see if there are more improvements that can be made. Here is a video of me testing my piece:

As you can see, on the screen I was captured as a black silhouette as planned. However, the background wasn’t entirely clear as it picked up the edges of the board and screen. Therefore they came up as black blocks/lines and obstructed the shapes from falling. To fix this problem, I need to ensure that the screen I use is big enough in order to fill the width of the camera. As you can’t entirely see the screen, here is a screen recording of the test:

From this, I feel that I need to edit the speed again to make the shapes fall faster. I also think I need to edit the size of the shapes more so that there are some bigger ones rather than them all being small. The programming works as expected as when the shapes are on a white pixel the descend and when on black they ascend. By carrying out prior testing, it has allowed me to further improve my piece to make it more suitable and successful. I am pleased with the outcome and will make further amendments so it is ready to display on the public screens in Weymouth House.

Public Screens in Weymouth House

I went to the public space and analysed which public screen to display my interactive piece on. This is important as the screen it is displayed on can alter how successful it may be. I looked at which screens stand out more in the public space and what size screen would work best for my piece. As well as thinking about where I would position a camera and white screen. Below I have analysed each screen in relation to the public space to evaluate which would be most successful to display my interactive piece on…

Screen 1 – I feel that these screens would not be suitable for my piece due to their being six fairly small screens. Also, due to the layout of the space, there is a seating area and a white post obstructing its view. I feel there wouldn’t be enough room for users to interact with my piece and feel that these screens are a bit segregated from the main public space. Not many people walk through between the seating areas so I feel my piece would not be successful here




Screen 2 – These double screens are situated at the front entrance to Weymouth House. The screens are a good size for my piece and there is a large area around in which users can interact. People walk past the screens when going in and out of the public space, so I feel my piece would be fairly successful in this location. The automatic doors are opposite, which could obstruct the falling shapes so I would have to put a white screen up a few metres from the screen. I would have to ensure that this doesn’t block the entrance and people can still freely access the space.



Screen 3 – These double screens are location opposite costa in the main path through of the public space. I feel that again they are a good size for my piece and feel they are the most noticed screens. Due to Costa being in the background as well as numerous posters on the walls, I would need to put up a white screen. This could be positioned a few metres from the screen, near the table. This means the screen would be more out of the way and doesn’t block peoples walking path through the space.



Screen 4 -This single screen is located in between the lifts at the rear of the public space. It is a suitable size but I feel it is slightly isolated from the main space. People waiting for lifts may interact but that may only be for a short amount of time until the lift comes. I feel that this screens isn’t that noticed and think that my piece would not be that successful if displayed here.


I have decided that the screen I will display my interactive piece on is screen 3 (opposite costa). I think it has the best location in the public space and is the most noticed screen. I feel my interactive piece would work best in this location as it is in the main path through the space so there will be lots of people to hopefully interact with it. I feel it is also in the best location to put a white screen up as it won’t block the pathway and cause any obstructions. Analysing each of the screens is useful as it has allowed me to evaluate where my piece would be more successful. I feel it is very important as the screen choice can alter whether a piece is successful or not. Next, I will continue to make improvements to my piece and then test the final piece on my chosen screen.

Improvements – Shapes, Size, And Speed

Some suggested improvements I received when testing my piece was to possibly add more of each of the shapes. As well as to possibly make the speed at which the object fall slightly faster, and to make the size of the objects more varied.

Here is the code for initialising a new object and setting the size range, of which I changed the range to random(10,30):

Screen Shot 2015-01-13 at 17.02.10It was also suggested that I should have more objects, which I altered easily in the object arrays, where I can choose to have 0-infinity objects:

Screen Shot 2015-01-13 at 17.04.39

Changing the speed at which the objects descend has to be done in the individual classes constructor. I edited the yspeed so that objects descend and ascend slightly quicker:

Screen Shot 2015-01-13 at 17.06.50

I feel that these improvements have benefited my piece, highlighting the importance of carrying out user testing. I decided against turning my piece into a game as felt it would be too easy. As users could easily put out both hands and prevent the shapes from falling, like this example…

Screen Shot 2015-01-15 at 13.10.58

From this, I will go on to test my piece in a studio room, capturing more of the persons body rather than just the top half. Allowing me to see if there are any further refinements I could do before displaying my piece in the public space.

Improvements – Mirroring Piece

An improvement I received when testing my piece was to mirror the video capture. It came to my awareness that at the moment it captures the video the wrong way round, so when users put up their right hand, on the screen their hand goes up on the left. This makes the interaction quite confusing which could deter people from interacting with my piece. I have found this improvement quite difficult to do and have had quite a bit of difficulty with the programming. Through reading online forums, I managed to gain some help from others who had similar problems. Here are the steps I went through and the various problems I encountered:

Screen Shot 2015-01-13 at 12.58.02To start with I managed to get my piece to mirror by adding this code:
Screen Shot 2015-01-12 at 12.23.50

This got the video capture to mirror but meant the brightness thresholding wouldn’t work correctly and so the video capture was in colour. This meant that obstructing the falling objects didn’t work as well as it was harder to detect the threshold on colours. Also, I felt that the black and white capture looked better as the coloured shapes stand out more.

As I was having difficulty, I decided to start my piece from scratch as originally I had used the brightness thresholding example. I felt that starting from scratch would help me to solve the problems easier as I would be writing out all the code step by step, in a way that I understood. I managed to resolve the problem by adding in videoMirror and a for loop to go through each of the video pixels. Then, instead of using the normal formula of x+y*width to access the array of pixels, I set it equal to [(width-(x+1))+y*width].

Screen Shot 2015-01-13 at 10.28.16

This flipped the video capture and the brightness thresholding still worked correctly. However, this caused the an error with the falling shapes. Now, when you put up your right hand to obstruct the shapes, it obstructs them up the left hand side. This meant I had to flip the shapes too, which I managed to do by changing the x co-ordinate of the shapes to (width-1-x).

Screen Shot 2015-01-13 at 13.04.08

Carrying out user testing with my family and friends was very useful and now my piece is mirrored correctly. This shows that I have followed an iterative design process as I created my piece, got feedback and then made improvements. I have learnt a lot more by carrying out this improvement, especially in relation to the advantages and disadvantages of hacking/programming. I feel that now I have programmed from scratch, my knowledge and understanding has advanced and I’m more confident with resolving any further problems I may encounter.  Next, I will go on to explore some other suggested improvements, such as adding more of each shape and altering speeds. Then, I will go on to test my piece in the studio room, capturing full body movement using a white screen.

Processing Forum, 2014. Mirroring a Webcam in a Sketch. Processing [online]. Available from: http://forum.processing.org/one/topic/mirroring-a-webcam-in-a-sketch.html [Accessed12 Jan].

Processing Forum, 2014. Flip the Video Capture on the X-axis.Processing [online]. Available from: http://forum.processing.org/one/topic/flip-the-video-capture-on-the-x-axis.html [Accessed11 Jan].