Blog Posts

All of my posts are important but if i had to say in particular I would say the most crucial are

  • Remediation and Convergence
  • Exposed
  • The most progressed iteration cycle
  • Embodiment
  • iteration cycle 1
  • iteration cycle 2
  • Reflection

and thats a wrap .


Reflecting upon my project. unfortunately at this point in time I don’t have my piece of interactive art working as well as I would have hoped. I am very happy with my concepts, however I just need to correct a few bits of code as I have tried a few variations which changed the functions of the art work and there fore by seeing the reactions I can conclude I am close to having it finished to the standard I want. Through out this project I have maintained a consistent theme of convergence throughout my work. I have spoke to my peers and I even produced a short survey about my work. Which helped gain me an insight into other peoples thoughts on my work. Mostly the feed back was positive as a lot of people seemed to show a genuine interest in my work. Because the survey is anonymous I don’t know who made which comments. Most people appreciated the illusion of two things in one drawing. Which left me feeling positive about my art.  People thought that the ideas behind the piece were very interesting and well thought out. However it became apparent I could have emphasised the dragon part of my sketch more. In the future I see this piece having potential and I will continue to improve it as this project has got me more interested in computer generative art and interaction design in general. One aspect I would say this project has definitely made me think about more is how to design for an environment, therefore how important the lighting and colours are to creating great effective designs.

The most Progressed Iteration cycle

Analysis And Design

It was now time to re design from what I had previously evaluated. I have determined that neither brightness tracking or colour tracking were going to be the best option for tracking the people. As the environment doesn’t have enough consistency in either of the factors of brightness or colours. If i was to use colours an environment with white walls would be ideal, but we have to work with what we have. For this instance I will be using the library for Face detection. Building on from this as is the same with the previous iteration cycles I will use this tracking to interact with my piece of art.

I have decided to change my approach of defining the boundary point at which i want it to trigger the changes in transparency. I decided to create and three floating values as opposed to using pixel measurements. these floats would would represent left right and central.

For the purpose of development I have used colours instead of images to start with. This is to make it easier to understand the logics.


  • float aL, aM, aR; the three floating values for left right and central (middle)
  • float uW; (ultimate width)
  • uW = width / 3;   (ultimate width = width/3) this gives the exact correct width for each individual section as a third.
  • aL = width – tx; the left width
  • aR = tx; the right 
  • aM = (height * 0.5) – abs(tx – width*0.5); 

 “abs Calculates the absolute value (magnitude) of a number. The absolute value of a number is always positive”. This was used because I needed this to always remain a positive value.

  • fill(255,0,0, aL); filling the shape with red
  • rect(0, 0, uW, height);
  • fill(0,255,0, aM); filling the shape with green
  • rect(uW, 0, uW, height);
  • fill(0,0,255, aR); filling the shape with blue
  • rect(uW*2, 0, uW, height);

the reason behind colouring the rectangles in the high contrast colours is because aesthetically they are not that pleasing they are very clear and make it easy to calculate the logics of the actions.

Testing  & Evaluation

Screen Shot 2015-01-21 at 15.37.57

This shows that the right movement was in direct correlation with the opacity of the two thirds leaving only the desired third visible

Screen Shot 2015-01-21 at 15.38.11

This is another example of my testing which shows that the opposite side also had the correct correlation.

Analysis And Design

In order to view the exact point at which the face is detected on the x axis I needed to implement some code this was only for use during the development stage. Below you can see the code I used.


float tx = faces[i].x+(faces[i].width/2); this gives you the centre point of the boxes which are created around the faces this makes it more precise.

I put this in because beforehand the tracking wasn’t precise enough so I used this code and combined it with this code


This meant that I had a line showing me the exact point on the x axis that it was tracking. This made it easier to determine how well the interaction between the user and the computer was working.

Analysis and Design

 I reached a point where the functionality of my code was good enough. From this point it was time to take my work to the next stage. This meant I would have to change the colours and instead I would replace them with three images. Each image is a third of the size of the canvas. So I now had to create the art piece.


img = loadImage(“left.jpg”);
tint(255,map(aM, width , 0, 0,255));
image(img,0, 0, uW, height);

img = loadImage(“central.jpg”);
tint(255,map(aM, width , 0, 0,255));
image(img,uW, 0, uW, height);

img = loadImage(“right.jpg”);
tint(255,map(aR, width , 0, 0,255));
image(img,uW*2, 0,uW,height);



As you can see from the video the functionality wasn’t working as well as i wanted. So after this I continued working on my code.

img = loadImage(“left.jpg”);
tint(255,map(aM, uW ,0, 0,255));
image(img,0, 0, uW, height);

img = loadImage(“central.jpg”);
tint(255,map(aM, uW*2,uW , 0,255));
image(img,uW, 0,uW, height);

img = loadImage(“right.jpg”);
tint(255,map(aR, width , 0, 0,255));
image(img,uW*2, 0,uW,height);

Analysis and design


This is what it should have looked like if you were standing in front of the camera and central.


This is what it should have looked like if you stood in front of the camera but to the right.


This is what it should have looked like if you stood in front of the camera but to the left.


To Embody is to put into a body an idea or spirit, to give a concrete form to or to express (principles, thoughts, or intentions) within art, action, word combinations, or institutions. Thus, an embodiment of an idea or principle is its physical form, realisation or expression, or the incarnation of that idea. (Hansen 2003) .

This explanation fits well with my idea. The audience have to participate with the art and by doing so they will understand it better and interpret it. This interpretation is a key part in interactive art and the ideas behind my piece of interactive media.

When we move and think and feel, we are, of course, a body. This body is constantly changing, in and through its on going relationships. This body is a dynamic form, full of potential. It is not ‘a body; as thing, but embodiment as incipient activity. Embodiment is a continuously emergent and active relation. It is our materialisation and articulation, both as they occur, and about to occur. Embodiment is moving-thinking-feeling, it is the body’s potential to vary, it is the body’s relations to the outside. And embodiment, I contend, is what is staged in the best interactive art.(Stern 2013, p.2)

This is what I hope to achieve in my work as interacting with something makes it become a part of you. This means you build a relationship with that thing. Marshal Mcluhan describes this as;

“All media are extensions of some human faculty- psychic or physical” – (McLuhan, Fiore and Agel 1967, p.26)

This connection that we create with media is elucidated by Merleau-Ponty

she emphasizes the importance of an internal third ear or third eye in creating this grounding.  For Merleau-Ponty our body is unique as a medium, in that it both sees and is seen; our bodies are sensory objects and objects to be sensed.  Consequently our senses are self-conscious.  We can sense ourselves sensing, and therefore gain perspective on our own point of view.

This unique characteristic of being a medium that is sensing ourself sensing is a key fundamental characteristic that makes interactive art such an interesting topic. You display art which people interact with and by interacting with it they are creating a narrative that people want to join in with. Embodiment is a crucial part of interactive design and one of the most intriguing challenges as you can discuss with people how participating with the art made them feel, by embodying the art you have the visual element of art in its original form of simply being looked at but You also have the additional element of the audience as performers.


Hansen, M., 2003. body/embodiment | The Chicago School of Media Theory. [online] Available from: [Accessed 28 Dec. 2014].

Hansen, M., 2003. body/embodiment | The Chicago School of Media Theory. [online] Available from: [Accessed 28 Dec. 2014].

McLuhan, M., Fiore, Q. and Agel, J., 1967. The medium is the massage. New York: Bantam Books, p.26.

Stern, N., 2013. Interactive Art and Embodiment: The Implicit Body as Performance. Gylphi Limited, p.2.

Remediation and convergence

My idea has a direct correlation with both the theories of remediation and convergence.  I have taken the idea of a lenticular display in the original sense. As a lenticular display provides me with a sense of nostalgia as I remember enjoying receiving them free with cereal boxes when I was younger. Or on the front of book covers. I have taken these fond memories and interpreted them with this idea in a way that is more in touch with a contemporary society. I have remediated the lenticular display principle of movement left or right changing what you see. However instead of moving the screen the person moves. My piece of interactive art relates well with new media because in contemporary society as almost everything becomes digital their is a distinct media convergence. I have followed this theme in order to create my art work. I have created a piece of art which uses a more historic art movement of illusion which has always fascinated me. However through re interpreting it in a way that it reflects contemporary societies culture. An instance of contemporary societies culture by this I mean the way in which we interact with technology. People are so use to interacting with technology that they sometimes don’t do so in a conscious manner. This is an interesting point that I have decided to expand upon. I have created a piece of art. Where by people will have to engage with it in order to understand it fully. So through the use of technology people interact with the art through their visual senses but also their physical movements this will be directly related to what they will see. This movement of the individual causing a change in what they see will help them see what I have tried to achieve.

Today we are beginning to notice that the new media are not just mechanical gimmicks for creating worlds of illusion , but new languages with new and unique powers of expression (McLuhan, McLuhan and Zingrone 1995, p.272).

By creating a piece of art which is made up of several images but as a collective also creates a bigger picture.

To create this image I used a drawing tablet and the software sketchbook by auto desk.  I drew out a picture and then I edited it in photoshop afterwards. I deliberately themed it as a painting. I created it as a an image of train tunnels, mountains and clock towers. However it is also suppose to look like a dragons head. Through creating a painting made entirely of using digital tools and then representing it through a digital device, this is a clear representation of convergence. Convergence is a key themes as it is ever present in contemporary society. I wanted to take the principle of how everything transitions from old medium to new. This convergence through technology is something that wouldn’t have been able to exist in the past but now can be achieved with relative ease.

A process called the ‘convergence of modes’ is blurring the lines between media, even between point-to-point communications, such as the post, telephone and telegraph, and mass communications, such as the press, radio, and television. A single physical means – be it wires, cables or airwaves – may carry services that in the past were provided in separate ways. Conversely, a service that in the past was provided by any one medium – be it broadcasting, the press, or telephony – can now be provided in several different physical ways. So the one-to-one relationship that used to exist between a medium and its use is eroding. (Dwyer 2010, p.25)

Convergence can be seen in many areas of modern lifestyles,from instances such as books translated into ebooks. Another key element in the creation of this project was the inter connectivity of devices through the computers and the internet. In modern society you can have a website or a piece of software that allows you to access things from multiple devices in many different environments. This convergence increases accessibility and the potential of creativity as it makes the entire process more seamless. An example of this would be a website/software like dropbox which was used in the creation of this project to create an easy connection between devices such as mobile phone and computer.

These inter connectivities implications are explained greatly by Henry Jenkins

A word that describes technological, industrial, cultural and social changes in the ways media circulates within our culture. Some common ideas referenced by the term include the flow of content across multiple media platforms, the cooperation between multiple media industries, the search for new structures of media financing that fall at the interstices between old and new media, and the migratory behaviour of media audiences who would go almost anywhere in search of the kind of entertainment experiences they want. Perhaps most broadly, media convergence refers to a situation in which multiple media systems coexist and where media content flows fluidly across them. Convergence is understood here as an ongoing process or series of intersections between different media systems and not a fixed relationship.

below you can see my analysis and design.

Analysis and design

From left to right shows the stages from initial to chosen design.
Photo on 26-01-2015 at 11.30 #2 Photo on 26-01-2015 at 11.29Photo on 26-01-2015 at 11.30 Photo on 26-01-2015 at 11.29 #2 2

Following on from this I progressed to to the next stage which was implementing my design.  Below you can watch a video which displays me creating the image. It doesn’t show the entire process but Using premier pro I have increased the speed as a percentage to 1200%. the video shows a continuous design, implement and re- design as I am going through the process.



McLuhan, M., McLuhan, E. and Zingrone, F., 1995. Essential McLuhan. New York, NY: BasicBooks, p.272.

Jenkins, H., 2006. Convergence culture. New York: New York University Press, p.282.

Dwyer, T., 2010. Media convergence. Maidenhead: McGraw Hill/Open University Press, p.25.


Following on from a previous post this post is about an idea I had. My idea was to sign my art work but with a hidden signature.

This idea was inspired by two things. These two things consist of the interactive art I have previously posted an inspiration blog post about called Constable and more specifically the part named Xray created by a collaboration between the artist/designer Chris O’Shea and the Interactive/user experience design agency AllofUs. The second thing that inspired my idea was the way in which art created by great forgers who make fake versions of original pieces do it to such a high standard that they sign them with there own signature in some discrete way. This is of course risky but they are so proud of their work that on some level they want recognition of the skills it takes to produce something art this quality even if it is only a replica.

Analysis and design

From this I decided in theme with my piece of artI decided to sign My art work but I would sign it behind the art so that you would only see the signature If you interacted with the piece of art. I decided to do this through the use of processing.


my original code is here

PFont f;

f = createFont(“Arial”,16,true);


text(“Callum Sulsh”,10,100);


Screen Shot 2015-01-24 at 19.20.05

Screen Shot 2015-01-24 at 19.18.38


I decided that I didn’t like this font, I wanted it to have a more authentic looking signature by this I mean a calligraphy style font.

Re-Design and Implementation

So I used this code

String[] fontList = PFont.list();

To see all the available fonts and then I tried several fonts consisting of;

BernardMT-Condensed , HelveticaNeue-Medium and NuevaStd-BoldCondItalic


Screen Shot 2015-01-24 at 19.33.37  Screen Shot 2015-01-24 at 19.35.31  Screen Shot 2015-01-24 at 19.39.23


Although the last one I tried I decided was the best font I had discovered was the best so far I was certain there would be one even more suitable. I also evaluated that it would be better if the font was positioned differently and the font size needed to be increased.

Re-Design and Implementation

Then I found the font BrushScriptStd so I tried that and I moved the font to the bottom right corner and increased the size.

f = createFont(“BrushScriptStd”,25,true);



text(“Callum Sulsh”,600,550);


Screen Shot 2015-01-24 at 19.50.43


I was happy with the outcome of this and I decided that this element of my interactive art piece had been completed.

Iteration Cycle 2


I implemented my designs and then I tested them using a variety of colours. For the purpose of testing I will consistently be displaying the camera feed as well as the images/ colours I want the tracking to interact with. This is because it allows me to gain a better understanding of the functionality of my code.

fill(255, 204, 0, 10);
ellipse(colorX, colorY, 200, 200);
img = loadImage(“small.jpg”);
tint(255,map(colorX, 0, width, 0,255)); //tint(colour,transparency()) map(width is being used as BrightestX, height, width, 0, 200);

fill(255, 204, 0, 10);
ellipse(colorX, colorY, 200, 200);
img = loadImage(“space.jpg”);
tint(255,map(colorX,220 , 440, 255,255));

fill(255, 204, 0, 128);
ellipse(colorX, colorY, 200, 200);
img = loadImage(“heart.jpg”);
tint(255,map(colorX, width,0, 0,255));

This code was used to load the images map them with the colour tracking, positioning of the images transparency of the images etc.

this part part of code 

 fill(255, 204, 0, 128);
ellipse(colorX, colorY, 200, 200);

as you can see in the .gif below shows the position of the brightest pixel and it displays these co-ordinates visually by displaying a red ellipse.



float colorProximity =   abs(red(pixelValue)-0)+abs(green(pixelValue)-0)+abs(blue(pixelValue)-0);


float colorProximity =   abs(red(pixelValue)-255)+abs(green(pixelValue)-255)+abs(blue(pixelValue)-255);


float colorProximity =   abs(red(pixelValue)-255)+abs(green(pixelValue)-255)+abs(blue(pixelValue)-0);


I have evaluated that the environment had too much white and black in it which was causing problems with the tracking. When i changed the colour to yellow it worked much more efficiently. From this I concluded I had several options I could either give the people who would interact with my piece of media in the foyer something yellow such as a yellow arm band. Or I could change the type of tracking. I concluded that as the foyer would have different colours in its appearance as to the room I tested in. I couldn’t therefore assume that it would work as effectively in the foyer as there may be more yellow in the environment. I have decided due to this that my best option will be to change the type of detection. As face detection will work more universally I have decided to try that instead.