prototyping interactive experiences
Documentation of Development
03
processing void setup & void draw
These examples are the first excercises we carried out in processing. Using the print, and println commands to illustrate how the “void setup” only carries out the command once whereas the “void draw” continuously replays a command.
04
processing shapes
Points, lines, ellipses and rectangles were the first shapes we learned to create and control.
This code example is in relation to the picture drawing “DAN� on the canvas. Shapes use x and y co-ordinates to position them within the canvas and pictures can be drawn.
01
02
introduction The module descriptor states - “The Prototyping Interactive Experiences module will provide you with an introduction to the use of interactive softwares and hardwares, basic electronics and the development of skill and knowledge in the practice and visualization of interaction and experience design in various design genres. In the field of contemporary digital design it is essential that designers consider their role exists in both the virtual and physical world. This module will give you a broad and detailed knowledge of both the tools and principles of experiential design for both the screen and physical space. The relationship between the user and object, audience and artwork can form some memorable and impacting experience. To successfully produce an immersive designed experience we must employ more than just technical skills. You will study and analyze technical tools for interaction, interaction and experiential design precedents, and critical interpretation in relation to contemporary practice that will support your own practical visualization and modeling methods. You will engage with developing skill in the visualization, application and function of interactive tools and experiential relationships in contemporary design practices in 2 & 3 dimensions, while gaining an understanding of the value of immersive interactions in digital art & design both culturally and contextually. Analytical skill, visual understanding and practical knowledge will underpin the development of creative interactive, immersive and visual relationships in a range of design genres. The range of projects given will include the application of interactive, designed solutions to screen, space and place.�
05
processing colour
Colour is available through the format of RGB, CMYK or hexidecimal. There is a colour selector tool within processing to find particular colours. Transparency is also available to edit through adding a number after the colour number which will relate to the percentage of the opacity.
06
processing colour
These examples show the command of “noStroke� which take away the outer stroke on the shapes as well as an example of the opacity being lowered so shapes become transparent.
07
processing movement
The aim of this excercise was to move a circle from one side of the screen to the other, with it actively changing direction if it reached the edge of the screen. This was achieved by using x++ which is adding 1 to the x co-ordinate, and x-which is doing the oppoisite. Then it was possible to add y-and y++ to change the entire direction of the circle and increase the speed of the circle adding numbers too the end, for example x+10, x-10.
08
processing images
Next was inserting images into processing which could then be moved around or manipulated to appear when someone interacted with the canvas, possibly through moving the mouse or clicking a key on the keyboard.
09
processing keyboard
Keyboard commands were next, we used keyPressed to increase x by 1, this meant that if the key “1” was pressed on the keyboard, the number in the command box would increase as that number is x.
The keyboard can also be used as it’s own void, such as void keyPressed, this allows you to create a variety of different rules and commands which rely on keys being pressed on the keyboard. As a standard keyboard has a large numbers of available different keys it allows for an extreme level of interaction through a lot of different inputs.
10
processing text
To load a font onto the sketch you have to go into tools>create font and then choose which font you would like to work with. I chose the font Carton. You can then add it into the sketch by defining the font variable as PFont font; and then letting processing know what that variable relates too in the void setup, font = createFont(“Carton”, 48); and then within the void draw you can display the type by writing text(“what you would like it to display”,the x co-ord,the y co-ord); and using textAlign(CENTER); it will center the type.
11
processing sound
12
processing sound
To load a font onto the sketch you have to go into tools>create font and then choose which font you would like to work with. I chose the font Carton. You can then add it into the sketch by defining the font variable as PFont font; and then letting processing know what that variable relates too in the void setup, font = createFont(“Carton”, 48); and then within the void draw you can display the type by writing text(“what you would like it to display”,the x co-ord,the y co-ord); and using textAlign(CENTER); it will center the type.
13
instrument After learning to use the minim library which controls the sound in processing we were asked to creat our own musical intrument. I proceeded to find a variety of different notes from a piano on the internet and then coded processing to play the different notes when different keys were pressed, making my laptop similar to a piano.
14
instrument
15
eye spy
My game began by being based on the game you play as a child “I spy�. I wanted to incorporate a real life game into the digital form and use similar elements that would be used in real life. Due to this I wanted vision to play a large part in my game, however as I got further into the project I realised how difficult this would be. I settled for just changing the interface of my laptop to better suit the game and have less buttons. The target audience/user group would be widespread, however as the imagery used in this version include pictures of Edinburgh, local people may have more of a personal experience than others.
16
eye spy
It begins by the player pressing space to start the game. It will then bring up a selected object/place which will be a particular colour also, the aim is for the player to then find and click on the object, when they click on it a new object will be chosen.
17
eye spy
This example is to find a shop which is blue, as the game allows the player to spin an entire 360 degrees I had to make sure that on every single image the area the player can click on changes. In this example if the player clicked anywhere on the blue shop in the middle left the word will change and bring up the next object to look for.
18
eye spy
This is an example of another object to look for which is a dark blue jacket, it is 180 degrees behind the player currently so they will need to scroll round to find it.
19
the cat For this project we were asked to create a digital pet using processing. The pet needed to be interactive, my group and I opted to create a cat out of my laptop. Depending on where the user put the mouse and how they moved it the screen(the cat’s face) reacted and changed between three variations. When the cats head was stroked, like in the example below its face would be happy and a cat purring sound would play. When the cat wasn’t being interacted with it would have a normal face with cat noises. Finally when the user clicked on the cat’s nose it would turn angry and hiss at the user.
20
the cat
21
arduino starter kit
We used a proto-pic version of the arduino starter kit, arduino is explained as “arduino is an open-source electronics prototyping platform based on flexible, easy-to-use hardware and software. it's intended for artists, designers, hobbyists and anyone interested in creating interactive objects or environments.�
22
arduino components This is a list of all the components which are included in the proto-pic starter pack for arduino. All of the images are taken from the supplied booklet.
led red
breadboard
led green
rgb led
resistor 330 ohm resistor 1k ohm resistor 10k ohm
23
arduino components
ldr
buzzer
thermistor
push button switch
tilt switch
slide switch
capacitor 10nF
capacitor 100uF
24
arduino components
capacitor 100nF
jumper wires
diode
PP3 battery clup
potentiometer
usb cable
servo
25
arduino blinking LED
The first excercise within the booklet which came in the starter pack is to make an LED blink, this is an example of what the circuit looks like with the code involved basically stating the output port and then telling the arduino when to output a voltage to the LED and how long to delay, this causes the LED to blink repeatedly.
26
arduino servo
This circuit was an excercise to understand the servo motor, it involved a potentiometer which could be turned causing the servo to turn the same amount. I used the servo motor a lot throughout my projects and so this excercise was particularly important for me.
27
GoooooD We were put into a group for the final project as well as a smaller one before hand, I was partnered with Chang Ge. We came up with the group name GoooooD due to the letter at the beginning of both our names, a logo was created for our powerpoint presentation and we devised a manifesto.
28
manifesto With our focus on unique technological interaction, the plan is to consider ease of use and function as the most important aspects. Innovative interactive possibilities regarding the user or audience being a key consideration. Simple design which is well executed.
29
the bird For this excercise we were asked to create an object which reacted to light in some way, my partner and I decided to use a servo and create a bird which opened and closed it’s eyes depending on the light. Then we created a video illustrating the process of the bird being outside and it waking up in the morning. We really aimed to consider our manifesto when tackling this project, we wanted our design to be unique yet simple.
30
the bird
31
the bird We created a simple box to house the servo, the servo had a circle of card with both sets of eyes, one set closed and the other open. We used the LDR to get a reading of the light it could pick up and coded the servo to spin 180 degrees if there wasn’t much light being picked up.
32
the bird
Finally for our presentation video we created a tree for the bird to perch in and added a city turning from night to day with the bird waking up, showing how our concept worked.
33
emotional response cube This project goal was to create an emotional object in the form of a 10x10x10 cube. The cube needed to have some sort of human response, we chose to make our cube react to bright light in the form of squinting.
34
emotional response cube Our original concept involved the cube having eyes and when a certain light level was reached the cube would squint, then when an even brighter light was involved the cube would have sunglasses which came down over the eyes.
35
emotional response cube Throughout the development a variety of different problems were encountered, the first being that the materials we were using didn’t react how expected(the paper bent in a way we didn’t anticipate). Finally we decided to use a servo to control either set of eyelids for the cube.
36
emotional response cube A concept was decided on and I created all of the parts needed in illustrator to print out and use as templates.
Battery holder Battery holder
Breadboard Breadboard
37
emotional response cube After many prototypes getting ripped apart by the servos as soon as they were inserted into the model we decided to change the code so that they didn’t move so quickly.
38
emotional response cube
37
emotional response cube The final working cube.