Camera Interaction in Processing

Within Processing there are numerous examples of camera interaction that can be used and edited to create various different forms of camera interaction. Below are the video examples that are given:

Screen Shot 2015-01-07 at 14.30.37

This could be a good basis for ideas for my interactive design, and then I could build the idea

Screen Shot 2015-01-07 at 14.47.31

The most important part of camera interaction is the code above – this loads the camera for the information to be captured from. The possibilities with camera interaction for almost endless, see my Interactive Design Ideas post for my ideas of what I have come up with for camera interaction.

For example, this is what the Mirror 2 example looks like when run,


Screen Shot 2015-01-07 at 14.43.29

but it can be altered so easily, such as in the image below I changed the colour by changing the number of the background colour, and I also changed the ‘rect’ to an ‘ellipse’, making the pixels circles instead of squares.

Screen Shot 2015-01-07 at 14.59.20


From this, I am going to go through the examples already given and try and edit to try and create a really interesting and different example. One of my ideas is to capture a face and link it to my bouncing ball example, so it is essentially a bouncing face, this will be my next Processing task.

Media Spaces – The Science Museum

image-3 image-4 image-5 image-6 image-2 image-9image-7 image-8 image

We went on a course trip to the science museum, to study about media spaces and they way they use interaction to engage the audiences. Above is a small gallery of images I took when in the museum of places that I felt best represented the interaction and use of space.

The first image is of a piece to do with the internet and texting, it had a video on the screen about people texting and using the internet. The following two images are of an interactive piece revolving around the idea of profiles. The audience user was able to text in to the number and their phone would then be linked to the screen momentarily, it is able to access non personal data from your phone such as the usage and storage, or the games that are in use. I found this space very interesting as it is linking the idea of individuals interacting with their personal spaces of their mobile phone and making it part of the public space for the audiences to see and also use. I like this use of audiences interaction and would love to be able to incorporate this into my final idea, the use of texting can make it quite complicated but I would like to find other ways of having user interaction that requires the audience do fully participate for something to work/happen. Lorenic et al (2010) state that “designers have generally used moving image technology to push the exhibition in two directions; the large scale spectacle and the immersive environment”, the main element I am mainly interested in is the immersive environment; as this is when the user is fully surrounded and contained within the design.

Images 6 and 8 are both from the ‘Launchpad’ part of the museum which I personally found the most interesting, as every element in the room was fully interactive and immersive for the audience, but also highly educational. Image 6 is of small chemical rocks reacting with a liquid and creating smoke, but the audience could control it by blowing in the gap between the glass. This is the kind of interaction I would love to create in my interactive project, with the audience learning something as well as it being fun.

The science museum was a great trip, helping me to explore interaction further and give me more ideas into what I would like to do for my final project. See my Interactive Design Ideas post for my ideas so far.


Lorenic, J., Skolnick, L. and Berger, C. 2010. What is Exhibition Design? [online]. RotoVision, Switzerland. Available from: [30th November 2014].

Media spaces and mediating interaction

There are many different ways of looking at media spaces and the ways that audiences use spaces, but essentially most spaces are mediated, changed and controlled to make audiences do thinks in a certain way. Some great examples – Ikea:

ikeaThe shoppers are almost forced around the path that Ikea have created for them, making them look through all the different room layouts and showcasing all of the products, before descending to the warehouse to actually find the products to buy and make their purchases. It is almost like a narrative or program that shoppers are made to go through to complete the story or journey. James Tozer for the Daily Mail online explained Ikea as being “designed like a maze” so that the “shoppers find it hard to escape from”.

This idea that media spaces are controlled for efficiency is noticeable in many environments – domestic environments – the way that houses and gardens are laid out for example, or children’s playgrounds – like there is a set way in which the user is meant to implement the park, starting with the ladder followed by the monkey bars then finally the slide or firemans pole to get back down to the ground.


A digital example of mediating interaction is the medium of augmented reality. The technology uses the users natural environment around them and adds in digital images and displays, like mediating the users reality. “Augmented Reality is designed to blur the line between the reality the user is experiencing, and the content provided by technology” (Educause, 2005), so although it is imposing on the users reality, the user has chosen to engage with this kind of medium so it is not in a negative way that it is imposing, it could be seen as more of an escape from reality for the user.

For this project our final designs will be going in the space of the foyer in the Media School building, so I need to study and learn the patterns of the space well to know where will be best for my outcome to be positioned. From what I already know of the space, it is a very simple pattern of people walking almost straight through just to go to a class, so I need something that will catch attention and draw people in.


Educause, 2005. 7 Things You Should Know About Augmented Reality [online]. Educause. Available from: [Accessed 23 December 2014].

Tozer, J. 2011. Why shoppers find it so hard to escape from Ikea: Flatpack furniture stores are ‘designed just like a maze’ [online]. Available from: [21st November 2014].


Using Vectors in Processing

In our workshop we learnt how to code to simulate different forces, including velocity and gravity. We learnt how to create a simple ‘bouncing ball’ simulation using PVectors of position, velocity, gravity, force, and centre. Vectors are used to simulate the forces by using direction and magnitude, in a sense getting something from A to B. The image below shows how vectors work in 3D, using x, y and z co-ordinates.


Like we did in our workshop, we simulated real forces like gravity and velocity to make them react like they would do in a real life environment. This is perfect for our project of having to make an interactive graphic as it makes it more real for the users who would be in the environment and therefore heighten the interaction. Below is the code we used to simulate a bouncing ball, this is a good example to use as it uses numerous different forces but it is simple to understand. We learnt new language through doing this example, including .get, .set, .sub, .mult and .add.

Screen Shot 2014-11-27 at 13.25.07


Abstraction is the “freedom from representational qualities in art”.

Throughout all of my work during A-level and even GCSE I have always been interested in the concept of abstraction in relation to art and design. Within this concept I am very intrigued by the use of color, flow and movement. One of my favourite photographers who uses abstraction well is Alberto Sevesso, he plays with ink underwater and the movement and shapes it creates.


For my A-Level photography I took inspiration from photographers like Sevesso and completed my own photoshoots using ink and water for a topic of ‘Submerged’.


DSC_0521EDITFrom looking back on these images it has given me ideas for my final project – could I simulate the fluid movement of the ink in water to create an interactive design? I researched ‘fluid simulation’ on open processing and I came across a designer called Thomas Diewald who has made a simulation for the movement of fluidity and has his codes available to access – The outcome of his simulation looks like this:


Further research brought me to looking at other fluid simulations and movements, not just colour ink simulations. I looked at another designer Memo Akten, his work is highly interactive and very inspiring. His work ‘MSAFluid’ caught my eye the most, this particular design is interactively controlled by an iPhone.

I am aware that simulating this kind of movement is very tricky and requires quite a lot of coding, but I am going to keep researching to find inspiration for an interactive design that would be more achievable. The idea of having more of an installation to interact with rather than simply something happening on a screen interests me and I am going to do some more research into this.


Sevesso, A.

Processing Research – Spirograph

After some of the language we have learnt in processing making examples being very similar to looking like a spirograph, I wanted to search to see if I could find a code to make one myself. The first one I came across was by Sam Brenner, it was very different to what I was expecting to find when I was searching, but I was fascinated by it nonetheless. Try it out:

It is interactive in a way that every pixel is a different element of the spirograph and when the mouse is moved onto each pixel it changes in a fluid movement. I am intrigued in the use of colour in this example and I also feel it links well with the concept of abstraction which I am going to research into further as an idea to find inspiration for my final outcome. I also like the idea of linking abstraction with science and maths to create something that you would maybe not associate with arts and design.

The webpage shows the coding used to create the spirograph, and it actually has very little coding involved, however it includes trigonometry which we have not yet been taught which makes it look more complicated than it probably is. I am going to learn more language to do with maths and physics so I am able to do more advanced and different codes.

Screen Shot 2014-11-26 at 12.26.02



Adding a clock on Processing

In our workshops we were taught how to add images into processing and how to select individual pixels of the image so we can change a single pixel or a large group of pixels.

New language I learnt in this task:

  • PImage;
  • loadImage()
  • loadPixels()
  • text()
  • textSize()
  • String

We were then set the task to go home and put a clock on our images. We were given the code for the clock and had to add it to the images we had created in the workshop.

Screen Shot 2014-10-25 at 13.28.46


This is what the code looked like:

Screen Shot 2014-10-26 at 16.20.58

I will be playing around with this more to see what different effects I can get and make it look a bit more interesting!

References: CC BY-SA 3.0

Posters In Public Space

After our research of the Foyer as a public space and had decided where we wanted to place ours, we went down and put them up, however the space between the lifts had already been taken so we put one of our posters up on the side of a vending machine. We chose here instead as it is still visible to the audience as they walk through to go to the lifts and stairs and it is also right next to a water fountain so people getting a drink would be able to see it at eye level. The vending machine is black which made the green poster stand out more instead of having it on an already busy wall where it may not be seen as well.

photo 1-2

Our other poster went up on the pillar in Costa which we had decided before would be prime position…photo 2-2

…however our seminar was late in the day and this was the only time we had the opportunity to put our posters up, so Costa had already shut and there were not many people walking through the foyer at all so we did not get the chance to ask anyone about our posters.

We said if we were to do the task again we would print out the posters bigger to make more of an impact, we would make the font of the slogan bolder and we would also put the posters up and interview people at more of a prime time so we would get better data to take away from this.


Playing about with Processing

In workshops and in spare time I have been playing about with processing more and learning more of the language to broaden my Processing horizons.
In the workshop we started off with our usual ‘void setup’ and ‘void draw’ functions and then used triangles (triangle()) and rectangles (rect()) to create an image of a house. We then played with this so that it drew a house for each frame the mouse was held down for. I was being very imaginative and drew my name…

Screen Shot 2014-10-17 at 10.08.15

We then went on to create rows of houses and to rotate them. To create the blur effect we reduced the opacity levels of the object and this was the outcome:

Screen Shot 2014-10-17 at 10.23.45

In the workshop we also learnt about arrays so we could make a colour palette, so from this workshop I then went home and played around with the sketch. I was amazed at what I could create from simply changing a few small things. For example instead of having a house, I simply made an ellipse of an oval, I changed the opacity of the objects and I changed or added colours to my array.

pretty.spiral pretty.spiral3  house spiral pretty.spiral4  pretty.spiral5 pretty.spiral6

We were also taught how to export our sketch as a video, so I did this with one of my creations:

Audience Research

As our posters are to be displayed in the foyer of Weymouth House, we went to research it as a public space. We looked at the space itself – the furnishing, the things already up on the walls, the screens, the props, Costa, etc. We then looked at the people there and how they engaged with the space, we looked at gender, age, groups or individual, the movement through the space, and which areas are the most popular.


We concluded from our research that the majority of the population are either walking straight through the space to get to the lifts and stairs, or are queueing for Costa. It is normally individuals walking through or groups of people sat on the sofas and chairs, but they are engaging with each other rather than the space and visuals around them.

From this, we decided it would be best to put our posters either on the pillar in the middle of Costa which is eye level and straight to most of the people queueing, or to put it in between the two lifts as a lot of people have to wait a while for the lifts so would therefore look forward at it.