Prototyping Interactive Experiences KATHERINE LOUISA GIBSON katherinelouisagibson.tumblr.com
Contents Page
Prototyping Interactive Experiences
Processing
Page 3 – 5
Human Interactions
Page 6 – 8
Project 1- Generative Art Installation
Page 9 -12
Arduino
Page 13 – 15
Project 2 – Tangible Time
Page 16 – 23
Processing
Firstly we were introduced to Processing. I drew some basic shapes and got the hang of the program. I experimented with making shapes transparent, coloured, 3D and animated.
Perspective 3D Cube After lots of experimenting with Processing and altering the code I finally worked out how to make the lines join to the corners even when the cube was moving around the sketch.
Code void setup() { size(400,400); background(255,255,255); } void draw(){ background(255,255,255); strokeWeight(1); fill(208,32,144); stroke(mouseX,mouseY,0); rect(50,50,50,50); fill(255,0,20); rect(mouseX,mouseY,100,100); line(50,50,mouseX,mouseY); line(100,50,mouseX+100,mouseY); line(100,100,mouseX+100,mouseY+100); line(50,100,mouseX,mouseY+100); println(mouseX + "" + mouseY);
Bouncy Balls
Small ball bouncing from left to right at varying speeds and not leaving the sketch.
Bouncy ball bouncing diagonally at varying speeds and not leaving the sketch.
Bouncy balls going from left to right and top to bottom without leaving the sketch.
Images and Sound
Wave sounds are played whilst the mouse is pressed and it stops playing on the mouse release.
When the mouse is released the clip pauses until the mouse is pressed again.
Human Interactions with Spaces and Technology I made a short video showing human interactions within space and technology while at London Design Festival which can be seen on my Tumblr.
Human Interactions We were asked to make several human interactions on Processing. I used my previous knowledge and looked at examples on open processing to hep me represent the interactions clearly.
Lights affected by movement Cube changes colour depending on where the mouse is in the window.
Touch screen White box appears where the mouse is clicked and disappears on next interaction.
Camera flash
Conveyor Belt
A series of white squares that flash yellow on the mouse click like a bright camera flash.
Moving Conveyor belt that begins to move by clicking once in the window.
Human Interactions Interactive Touch Screen I inserted an image and drew a rectangle on top of the current screen. The image now has an interactive touch screen. The cursor changes to red on each mouse click.
Project 1- Generative Art Installation What is it? Generative art refers to any art practice where the artist uses a system, such as a set of natural language rules, a computer program, a machine, or other procedural invention, which is set into motion with some degree of autonomy contributing to or resulting in a completed work of art. Philip Galanter Research John Napier is best known as the inventor of logarithms and spherical trigonometry also known as Napier's Rules of Circular Parts. He also invented the "Napier's bones" and made common the use of the decimal point in arithmetic and mathematics. Concept I would like to create an installation that makes passer by stop and think and be proud of being part of ‘Napier’. I hope to do this by incorporating John Napier's spherical trigonometry and creating a piece of art that draws you in and makes you think about who we are now and in the past and what we hope to be in the future.
Research into Generative Art Exploring movement
Exploring the circular form
Development I altered the code to change the position of the sphere and tried a few variations of the design. I used Napier red to represent the University and give a feeling of being part of something.
I evaluated the space to choose where my installation would be placed. I analysed the lighting in the space, how big I wanted the projection to be and developed my design to ensure it enhanced the space.
Final Design
I created an installation that made passers by stop and think about what Napier means to them and allows them to feel part of something special. Please go to my Tumblr to see my installation moving and at my site Napier Tower.
Arduino We were introduced to Arduino and began exploring the circuits and making led lights flash at different speeds by altering the code. We changed the Arduino code to make two LEDs flash in turn and also make the two LEDs flash together and increased the speed.
Arduino - Motor We were introduced to the motor and the different things it can do. We experimented with the LDR( Light Dependant Resistor). We altered the code to make it change its response such as make the motor spin if bright light was shone on it and stop when it was dark. We were then given a task to choose an inanimate everyday object and show how it could respond to light. We chose a paintbrush as it’s an object people us to express themselves and that is our Exprime concept. We made the paintbrush spin around when light was shone on it and stop when it was darker.
Arduino Investigating Arduino further using it as an input and output to control visual responses.
Project 2 - Tangible Time ( Interactive Installation) Ethos Exprime meaning = Express yourself Through expressing themselves people find their inner creativity. Making fun interactions in a public space allows people to laugh or smile and forget the stress of everyday life for a few minutes. Enjoyable Expressive Exciting We wanted to create an installation using an hourglass sand timer to represent time. Participants have a limited time to enjoy and express themselves through drawing in the sand. When the time is up their creativity is captured by a photo.
Research and Inspiration We looked at many different kinds of interactive experiences such as shadows, art and many that represented time.
A million times by Humans since 1982
The Treachery of Sanctuary by Chris Milk
Night Lights byYesYesNo
Well Spent? by Sophie Macneil
Development After initial research we came up with the idea of using an hourglass sand timer to represent time and give people a limited time to have fun and express themselves. We developed a prototype model, tested the light sensor and tried to get the codes to work. Muxuan mostly worked on the Arduino codes, Manon on the processing codes and I made the final model and Poster, however we helped each other at different stages of the project.
Final Model I made the final model and came up with solutions for problems as they occurred during the model making process. Once we brought all the components together we had several issues that had to be resolved and caused us to have to alter our final design.
Resolving Issues
We came across several issues when we brought together the Processing, Arduino and our model. The motor was not strong enough the pull the tray back up after the time was up so we had to change our idea and decided to make the participant tip the tray to begin the interaction. The issues we came across allowed us to learn valuable lessons about prototyping as you do not know if something will work until you try it.
Exprime Interactive Installation Express Yourself
Exprime Interactive Installation The exhibition went well and everyone enjoyed expressing themselves in a fun way. They also liked the fact we used ‘snow’ to make the installation a bit Christmassy. I would say our installation was a success as it was quite a simple concept but I felt that participants appreciated this and the child like sense of play that was involved. The aspect of trying to time a minute to make sure their art was finished added a sense of pressure and reminded participants that time is precious. The photos captured from our installation are on the next page.
Photos Here are some of the photos captured of participants expressing themselves.
For more information on any of the projects and videos please go to.. katherinelouisagibson.tumblr.com