Design Iterations

Interactive Graphic Display – Weymouth House

For the purposes of the Design Iterations brief I presented my interactive graphic on one of the public screens in the foyer of  Weymouth House, Bournemouth University. In displaying the interactive graphic I booked out a TV space along with all the equipment such as a HDMI cable and portable TV screen. In its display I got a variety of individuals to interact with my installation, including dancers and audience participants. I took a range of photos with participants interacting with the piece, performing various movements as shown below:




In addition I also filmed individuals interacting with my interactive graphic and produced the following video clip:

This video clip demonstrates how individuals reacted and responded to the interactive graphic. It is clear that the participants tried to stretch the bounding box, as well as enclose themselves within it. I was extremely pleased with the performance (dance) aspect of the interactive graphic. Users are forced to interact through taking out various movements, creating visually beautiful graphic imagery on screen.

It is worth noting that the interactive graphic is only art when participants and audiences are interacting with the piece. Kaprow (2007) mentions that ‘Our advanced art approaches a fragile but marvelous life, one that maintains itself by a mere thread, melting into an elusive, changeable configuration, the surroundings, the artist, his work and everyone who comes to it’. Floryan (2011) suggests that Kaprow’s comment meant audiences are invited into the art itself. In addition, with relation to interactive art and my own interactive graphic, the individuals become the art itself and the art only became alive due to their participation.

Furthermore, Edmonds (2011) states the following ‘Interactive art is distinguished by its dynamic ‘behaviour’ in response to external stimuli, such as people moving and speaking. For artists, this means that observing people interact with their works provides a way of understanding exactly how the work ‘performs’, that is, how it responds to the gestures, sounds and other features of audience behaviour in the immediate environment. Observing the responses of an interactive work can reveal unexpected effects that may or may not be predictable from the artist’s point of view’. I believe this applies to my piece considerably in that, myself as the artist, can better understand my work and its performance when seeing it in practice and observing its interaction.


Edmonds, E., 2011. Interactive Art [online]. University of Technology: Sydney.

Floryan, M., 2010. Interactive and Participatory Art [online]. Art 21 Magazine. Available from: [Accessed 21 January 2015]. 


Design Iterations

Bounding Box – Smooth Movement 

In further developing my interactive graphic I decided to smooth the movement of the bounding box, this was due to the display being jittery.

In doing so I added the following code to my interactive graphic:



The result was a smooth interaction with relation to the transition of frames. I’ve planned to test my interactive graphic in Weymouth House before its display, to ensure that everything works accordingly in the given environment.

Design Iterations

Interactive Graphic – Bounding Box Outer Area

In developing my Interactive graphic I chose to develop ‘idea two’. Based on this decision I have blanked out the outer area of my bounding box, to do this I added a mask which drew multiple black rectangles around the whole outer area.

This is demonstrated in the following code:


Below is the outcome I achieved. My interactive graphic portrays the ideas of entrapment and claustrophobia in the digital world excellently, as individuals try to force the bounding box open and are confined to a given space. In addition I believe there is an opportunity to develop the bounding box interaction. The movement of the bounding box can be quite jittery and I would quite like the movement to be a smooth interaction. This is something which can be developed upon within the code of the interactive graphic.

Design Iterations

Interactive Graphic Bounding Box – Dimensions

In order to fix the issue that resulted in the dancer or participants whole body not being enclosed within the bounding box, I added dimensions to the x, y, width and height co-ordinates to allow extra room to entrap the individuals inside that bounding box.


In relation to which colours the bounding box draws around (darkest colour), the threshold can be altered on the day of display in its given environment. Allowing any colour that is darker than the background colour (white) to draw a box around. In doing so this should assure the bounding box picks up the participants or dancers as a whole.

Below is the code which can be altered in relation to this:


Design Iterations

Interactive Graphic – Prior Testing

I selected to test my interactive graphic at the development stage to ensure there were no unforeseen issues which needed looking at prior to my display. A colleague and I interacted with the graphic by dancing to obtain an understanding of how the graphic could look on the presentation day. The issues I encountered during setup was that the bounding box became rather distracted by the background elements. Therefore I need to ensure the background display is a clear white. Another problem I encountered was that the bounding box did not keep the dancers inside at all times which is an issue to be further resolved. Equipment wise I found that using a projector really took away the quality of the piece, which has led me to present only on the TV screens. Using the TV screen enables individuals (dancers or participants) to see themselves interacting with this bounding box on a screen. My piece will still include the performance element as individuals are performing in relation to what they view on screen.


Design Iterations

Development with the Blob Detection Library 

Upon experimenting with the Blob Detection Library code, I was able to change the colour of the bounding box, remove blob’edges and blur from the video as well as limiting the quantity of bounding boxes to 1. By completing these tasks my development of the information graphic is definitely coming along well, in that I now have the bounding box containment element coded to my specific design.

The following images were taken in this development process with fellow colleagues interacting with my interactive graphic:


The Blob Detection Libraries ‘bounding box’ picks up the darkest elements in the video and places a bounding box round these elements. In this case it is essential to ensure that in the display of my information graphic that there is a white background (board) and the dancers are dressed in black to get the best overall performance effect. As you can see, in the following screenshots the bounding box can become extremely distracted by its location background. In addition individuals bodies are not being contained as a whole within the bounding box. To resolve this problem I decided upon altering a part of the Blob Detections Library code so that +2 is added to each side of the bounding box from the point it hits the dark element, therefore ensuring that individuals are contained within that box.


I believe the other elements I could look at changing or adding include making the width of the bounding box thicker so it stands out more as an element. Also in addition by adding sound to the information graphic for the purposes of performance.

Design Iterations

Blob Detection Library

In order to create a bounding box for my interactive graphic, I went onto explore the various processing libraries which utilise similar elements. Whilst researching I came across the Blob Detection Library. The Blob Detection library is aimed at computer vision by finding ‘blobs’ on an image, that is to say areas whose brightness is above or below a particular value. It computes both blobs’edges and blobs’bounding box (Blob Detection Library 2014). The Blob Detection Library is a perfect fit towards my information graphic idea. It includes a form of bounding box which has the ability to be altered to create the enclosed claustrophobic space which I want to achieve. However there are aspects in the library that I will not be using including blobs’edges.


Going forward I will be using the following library in the creation of my interactive graphic. In further development of my interactive graphic I will alter the code, experiment and carry out testing prior to its display.


Blob Detection Library, 2014. Intro [online]. v3ga. Available from: [Accessed 9 December 2014].