Caitlin Crawford/40053270
PROTOTYPING INTERACTIVE EXPERIENCES Development Document
CONTENTS 1. Introduction 2. Tumblr and Examples of Design 3. Processing Introduction 4. Disney Mouse Map 5. Interactive Pet 6. Objets D’Interface/Assessment 1 7. Don’t Worry Be Happy
8. Arduino Introduction 9. Making Light of Emotion 10. Exploding Sharks 11. Emotional Objects/Assessment 2 12. Tickle Spot 13. Evaluation
//
INTRODUCTION
The prototyping interactive experiences module has provided us within a range of skillsets that are an addition to our design portfolios. In this module, we have learned to use coding programs, such as Processing and Arduino to create interactive devices to help us understand human response and emotion. This booklet with detail what we have learned throughout the module and the main projects we have worked on.
TUMBLR: CCDOESPROCESSING
Over the course of the module, we were to use tumblr as a way to upload information we had learned from our time in class and also the work we had to do for various projects. Tumblr was also a way to research for assessments and minor projects throughout the module.
www.ccdoesprocessing.tumblr.com
EXAMPLES OF
The intriguing ‘Linger a Little Longer’ Table and Benches are a deceptively understated design with a dynamic twist. The thermochromic finish of the table and benches responds to the heat of any plate, mug or serving dish – or body part – placed on it, to leave an ephemeral ‘watermark.’
Designed by the Portugal-based architecture and design studio LIKEarchitects, the installation combined 1,200 LEDARE lamps affixed to 1,200 HEMMA floor bases. Aiming to introduce the new LEDARE bulb to the public, the LEDscape became an interactive maze, inviting visitors to explore the pulsating, foreign landscape.
INTERACTIVE DESIGN
//_PATH was created when examining our daily contemporary lives in western culture, one finds that there is barely a single situation that is not influenced by digital technology and communication through the World Wide Web. it affects our perception of the world around us all socially, emotionally, and physically
Tio is a bird-shaped light switch designed to teach children not to waste energy. Using a traffic stoplight’s color progression and a series of increasingly angry facial expressions, Tio lets children know how long the lights have been on, so they can decide when it is time to turn them off.
//
PROCESSING
INTRODUCTION
Processing is an open source programming anguage and integrated development environment (IDE) built for the electronic arts, new media art, and visual design communities with the purpose of teaching the fundamentals of computer programming in a visual context.. The following section will show types of coding we learned during the module and the different tasks we were to complete, leading up to our final assessment which was to be in the style of a game..
SHAPES AND TEXT The first command we learned in processing was to make shapes, e.g to create a rectangle we use the command rect (value from side, value from top,value across, value down)
We also learned to how to create text and how to add fonts into the canvas. The code to write a word is: text (“hello�,x,y).
COLOUR AND MOVEMENT As well as shapes and text, we started to add colour and other shapes. The background colour can be defined in the void setup or void draw and the colour of the shape is put before the shape command.
To move the shape around the screen with the cursor, the x or/and y value is change to mouseX/mouseY.
MOVEMENT
To create strokes, this uses a command called “float�. This can be used for moving elements in the canvas such as audio equalisers or other features.
Next we learned about animation and how to use this in Processing. In this example, the ball is moving across the x axis and uses the command call switchState to animate it.
IMAGES Adding images is a very useful command and has been used a lot in projects over the module. We practiced adding 4 images into the canvas and changing the position of them along the x axis so all images were visible.
For this file, we were to have a blank canvas at first but depending on what quarter the mouse was hovering over, one of the four images would appear to the full size of the canvas.
//
DISNEY MOUSE MAP
DICE
In class, we were to make a dice that would change at random when the cursor moved acroos the screen. We were to incorporate this into either a new game or re-design of a current game.
INTERACTIVE MOUSE MAP
Help Simba run away with Timon and Pumba
Guide Jasmine and Aladdin to the Genie
Make Mary Poppins fly towards the kite
Help Elsa Build a Snowman
Help Ariel swim to Flounder and Sebastian
Make Buzz and Woody fall with style
After researching different board games that require dice, I choose Disney Trivial Pursuit and designed six different line maps, which when followed, move the cursor to roll the dice on the computer. Each design has a caption to make the instructions more clearer to the player. For inbuilt mouse use, each path is cut out and the characters are moveable, which makes it easier for the mouse to sense movement. For the external mouse, the image is left uncut and can be followed using the tip of the mouse.
//
INTERACTIVE PET
Design a virtual pet using processing that interacted with different actions created by users through physical artefacts.
Using commands previously learned in class, this virtual pet was created as part of a group project. There are four images, a kitchen, a play area, a bathroom and a bedroom which show up individually when the cursor hovers over each quarter of the screen. As well as this, there is an image that follows the cursor which also changes. Each image represents each image e.g there is a picture of an angry cat in the bathroom and a sleeping cat in the bedroom.
//
OBJETS D’INTERFACE
“For this project you must investigate and critique how the design and production of modern technologies are addressing the relationship between humans and objects, or not. Your investigate will lead you to design an everyday technological gaming experience with a specific focus on the relationship, interaction and communication between object and user, and, user and object.”
RESEARCH
Our first assessment of the module was to create a gaming experience that considers the psychological and physical relationship of the users. To begin with, past gaming interfaces were researched to understand what makes the visualisation of a game successful and how the images interact well within the game and also with the user.
CONCEPT DIRECTION
What is depression?
Symptoms of Depression
Everyone gets the blues now and then, but when there is little joy or pleasure after visiting with friends or after seeing a good movie, there may be a more serious problem. A depressed mood that stays around for a while, without letting up, can change the way a person thinks or feels. Doctors call this “clinical depression.”
a persistent sad, anxious or “empty” mood sleeping too little or too much reduced appetite and weight loss loss of interest or lack of pleasure in activities once enjoyed restlessness or irritability difficulty concentrating, remembering or making decisions fatigue or loss of energy feeling guilty, hopeless or worthless thoughts of death or suicide
Depression is a common, serious illness and not a personal weakness. Depression can happen to anyone, at any age, and to people of any race or ethnic group. It is never a “normal” part of life. Depression, which is treatable, can come from chemical imbalances in the brain, hormonal changes, medications or things going on in your life.
For the main concept of the interactive gaming experience, the idea was to raise awareness and help people with despression and anxiety. It would not only be a fun and enjoyable game on its own, but also provide an escape for people with depression to increase their well-being and mood.
FEATURES
First part of the code was to create a smiley face in the middle of the screen that changed when the cursor was dragged and released over it. When the cursor was not pressed over it, the image of the sad face would show and if the mouse was pressed over it, the image of the happy face would show. This was achieved using IF/ELSE conditions.
Icon shown with cursor over it
Icon dragged to smiley face to change it
Second part of the code was to make each icon draggable. They would start off transparent and if the cursor was hovering over them, they would become visible. It would be dragged over to the centre of the smiley to make it change and add a point to the game.
//
DON’T WORRY BE HAPPY
FINAL CONCEPT
For my final concept, I was very interesting in creating a gaming experience that was not only fun and easy to use, but brought to light how many people are dealing with depression and anxiety today and ways to overcome it. The aim of the game is to find four hidden icons: a heart, a star, a cat and a flower, which all represent different things people may need to overcome their depression. When one is found, the user has to drag it to a sad smiley face in the middle of the screen to change it into a happy smiley face and this is repeated until all the icons are found.
VISUALISATION
I chose the colour blue as the theme for the game is to try and relieve stress, anxiety and depression, so I wanted to make the colours light and soft, rather than using a very striking colour such as red. I added clouds in the start and end screen to make it look more like a sky.
END SCREENS
After all the icons were dragged to the smiley face, I wanted there to be four different end screens that would appear at random after each game. To do this, there had to be a scoring system, so after one icon is dragged to the face, this counts to four points and when it reached 16, the game would end. The points were made when the mouse was released over the smiley face only and the phrase “three to go� would appear in the top corner of the game to tell you how many you had left to go. Depending on what screen that appeared, the user would take a card.
CARDS
At the end, there is a screen which picks an icon at random and the user picks up a card that links to it. Each card has a quote and task/ inspirational phrase to encourage the user to go and do things for themselves or others to help improve their general happiness and wellbeing.
The themes of the cards were: Heart - To show love and compassion to others, Star - To do something for yourself to make you feel happier (no matter how small or silly the task) Flower - To explore nature and your surroundings Cat - Spend time with animals or pets (which one of most common ways to overcome depression and increase overall happiness
// ARDUINO
INTRODUCTION
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 The following section will show types of coding we learned during the module and the different tasks we were to complete, leading up to our final assessment which was a group effort to design a physical object that produced a human-like response through certain types of stimuli.
THE KIT
Arduino Uno is a micro controller circuit board that connect to digital and analog power sources..
Arduino Breadboard is where all digital connections are made and physical elements are added.
The basic Arduino kit contains many of the main elements used for arduino projects, including LED bulbs, resistors, wires, photocells etc. Other features such as a touch sensor or rotary motors can be purchase from the Arduino website or other source.
//
MAKING LIGHT OF EMOTION
LEDS
For this project, we were to create an object that responsed to light to create a physical response from what we learned earlier in class. The first thing we learned to use was an LED bulb, starting with one and progressing to using more. When introducing more than one, the programming was changed to have two bulbs light at the same time and for one bulb to blink one after the other. This method was used for the project, using in total, 12 LED bulbs.
SONIC THE TRAFFIC HEDGEHOG
The model was created with blue paper and foamboard feet to create the sonic exterior to cover the arduino circuit and breadbord. There are 12 red LEDS at the back of the unit which flash rapidly in a row. when a strong light source activates the photocell attached to the arduino board. When it is dark, the LEDs turn off. As hedgehogs tend to be nocturnal animals, this type of system could be used at night for when a hedgehog is walking across the road and a car approaches. When the headlights shine on the hedgehog, the lights will start flashing, warning the car of the presence of the hedghog.
//
EXPLODING SHARKS
INTRODUCTION
The second assessment of the module was a group assignment with myself and Iain Dobie. Our chosen group name was Exploding Sharks, inspired by the classic Adam West Batman television show.
MANIFESTO
INSPIRATION
Many designs such as the ones above gave us some inspiration for future projects and gave us a type of guideline we wanted to follow when designing. We mainly looked at certain types of robotics such as Robugtix and Nao.
//
EMOTIONAL OBJECTS
“The human body is a complex system of surfaces and organs that can detect heat, light, sound, movement, and we respond to these stimuli, or inputs based upon a contextual map of our surroundings, and in some cases our emotional state. As well as this, emotional stimuli can also elicit a physical response that for many of us is uncontrollable for example blushing.�
MIND MAP
The first stage of development for this project was to create a mind map of different ideas and ways the design could work, thinking about what arduino features we could use and what they would do.
DESIGN DEVELOPMENT
We sketched out different designs for three different types of stimuli : Tickling, Light and Sensory Movement. Our chosen concept was tickling, which allows the use of sound and movement as a stimuli response. This would give us the opportunity to develop more and design interesting elements.
//
TICKLE SPOT
ARDUINO CODE #include “mpr121.h” #include <Wire.h> int irqpin = 2; // Digital 2 boolean touchStates[12]; const int motorPin1 = 6; const int motorPin2 = 5; void setup(){ pinMode(motorPin1, OUTPUT); pinMode(motorPin2, OUTPUT); pinMode(irqpin, INPUT); digitalWrite(irqpin, HIGH); Serial.begin(9600); Wire.begin(); mpr121_setup(); } void loop(){ readTouchInputs(); } void readTouchInputs(){ if(!checkInterrupt()){ Wire.requestFrom(0x5A,2); byte LSB = Wire.read(); byte MSB = Wire.read(); uint16_t touched = ((MSB << 8) | LSB); for (int i=0; i < 12; i++){ if(touched & (1<<i)){ if(touchStates[i] == 0){ if(i==0){ Serial.print(“1”); digitalWrite(motorPin1, HIGH); delay(4400); // delay one second digitalWrite(motorPin1, LOW); }else if(i==1){ Serial.print(“2”); digitalWrite(motorPin1, HIGH); delay(4000); // delay one second digitalWrite(motorPin1, LOW); digitalWrite(motorPin2, HIGH); delay(400); // delay one second digitalWrite(motorPin2, LOW); digitalWrite(motorPin1, LOW); digitalWrite(motorPin2, HIGH); delay(2000); // delay one second digitalWrite(motorPin2, LOW); }else if(i==6){ Serial.print(“7”); digitalWrite(motorPin1, HIGH); delay(2000); // delay one second digitalWrite(motorPin1, LOW); digitalWrite(motorPin2, HIGH); delay(2400); // delay one second digitalWrite(motorPin2, LOW);
}else if(i==2){ Serial.print(“3”); digitalWrite(motorPin1, delay(3600); digitalWrite(motorPin1, digitalWrite(motorPin2, delay(800); digitalWrite(motorPin2, }else if(i==3){ Serial.print(“4”); digitalWrite(motorPin1, delay(3200); digitalWrite(motorPin1, digitalWrite(motorPin2, delay(1200); digitalWrite(motorPin2, }else if(i==4){ Serial.print(“5”); digitalWrite(motorPin1, delay(2800); digitalWrite(motorPin1, digitalWrite(motorPin2, delay(1600); digitalWrite(motorPin2,
HIGH); LOW); HIGH); LOW);
HIGH); LOW); HIGH); LOW);
HIGH); LOW); HIGH); LOW);
}else if(i==5){ Serial.print(“6”); digitalWrite(motorPin1, HIGH); delay(2400); digitalWrite(motorPin1, LOW); digitalWrite(motorPin2, HIGH); delay(2000); digitalWrite(motorPin2, LOW); }else if(i==6){ Serial.print(“7”); digitalWrite(motorPin1, HIGH); delay(2000); digitalWrite(motorPin1, LOW); digitalWrite(motorPin2, HIGH); delay(2400); digitalWrite(motorPin2, LOW);
}else if(i==8){ Serial.print(“9”); digitalWrite(motorPin1, HIGH); delay(1200); // delay one second digitalWrite(motorPin1, LOW); digitalWrite(motorPin2, HIGH); delay(3200); // delay one second digitalWrite(motorPin2, LOW);
// Section B - Controls filtering when data is < baseline. set_register(0x5A, MHD_F, 0x01); set_register(0x5A, NHD_F, 0x01); set_register(0x5A, NCL_F, 0xFF); set_register(0x5A, FDL_F, 0x02);
// Section C - Sets touch and release thresholds for each electrode set_register(0x5A, ELE0_T, TOU_THRESH); }else if(i==9){ set_register(0x5A, ELE0_R, REL_THRESH); Serial.print(“10”); set_register(0x5A, ELE1_T, TOU_THRESH); digitalWrite(motorPin1, HIGH); set_register(0x5A, ELE1_R, REL_THRESH); delay(800); set_register(0x5A, ELE2_T, TOU_THRESH); digitalWrite(motorPin1, LOW); set_register(0x5A, ELE2_R, REL_THRESH); digitalWrite(motorPin2, HIGH); set_register(0x5A, ELE3_T, TOU_THRESH); delay(3600); set_register(0x5A, ELE3_R, REL_THRESH); digitalWrite(motorPin2, LOW); set_register(0x5A, ELE4_T, TOU_THRESH); }else if(touchStates[i] == 1){ set_register(0x5A, ELE4_R, REL_THRESH); } set_register(0x5A, ELE5_T, TOU_THRESH); set_register(0x5A, ELE5_R, REL_THRESH); }else{ set_register(0x5A, ELE6_T, TOU_THRESH); if(touchStates[i] == 0){ set_register(0x5A, ELE6_R, REL_THRESH); digitalWrite(motorPin1, LOW); set_register(0x5A, ELE7_T, TOU_THRESH); digitalWrite(motorPin2, LOW); set_register(0x5A, ELE7_R, REL_THRESH); Serial.print(“pin “); set_register(0x5A, ELE8_T, TOU_THRESH); Serial.print(i); set_register(0x5A, ELE8_R, REL_THRESH); Serial.println(“ is no longer being touched”); set_register(0x5A, ELE9_T, TOU_THRESH); } set_register(0x5A, ELE9_R, REL_THRESH); touchStates[i] = 0; set_register(0x5A, ELE10_T, TOU_THRESH); } set_register(0x5A, ELE10_R, REL_THRESH); } set_register(0x5A, ELE11_T, TOU_THRESH); } set_register(0x5A, ELE11_R, REL_THRESH); } void mpr121_setup(void){ set_register(0x5A, ELE_CFG, 0x00); set_register(0x5A, MHD_R, 0x01); set_register(0x5A, NHD_R, 0x01); set_register(0x5A, NCL_R, 0x00); set_register(0x5A, FDL_R, 0x00);
// Section D // Set the Filter Configuration // Set ESI2 set_register(0x5A, FIL_CFG, 0x04); // Section E // Electrode Configuration // Set ELE_CFG to 0x00 to return to standby mode set_register(0x5A, ELE_CFG, 0x0C); // Enables all 12 Electrodes // Section F // Enable Auto Config and auto Reconfig /*set_register(0x5A, ATO_CFG0, 0x0B); set_register(0x5A, ATO_CFGU, 0xC9); // USL = (Vdd-0.7)/vdd*256 = 0xC9 @3.3V set_register(0x5A, ATO_CFGL, 0x82); // LSL = 0.65*USL = 0x82 @3.3V set_register(0x5A, ATO_CFGT, 0xB5);*/ // Target = 0.9*USL = 0xB5 @3.3V
}
set_register(0x5A, ELE_CFG, 0x0C); boolean checkInterrupt(void){ return digitalRead(irqpin);
void set_register(int address, unsigned char r, unsigned char v){ Wire.beginTransmission(address); Wire.write(r); Wire.write(v); Wire.endTransmission(); } }
FIRST PROTOTYPE
The first prototype was created to test the arduino code and make sure that every feature used would fit into the 10x10x10 box. Inside the box, there is the arduino circuit and breadboard. Features used in this prototype were a touch sensor in the middle of the breadboard which has 12 wires attached to it which will be stuck to the outside of the box to pick up touch.
FINAL PROTOTYPE
Our final prototype was made out card and measured 10x10x10cm. The arduino board and other features were all placed into the box, with the motors taped to the sides. The box was covered in fur to give it more mystery when people start to interact with it and find out what it does. When people start to tickle the box, the sensors stuck to the outside of the box pick up the movement and it startes to activate the motors, making the box vibrate.
POSTER
As part of our final hand in, we had to create an A2 board for an exhibition to be held on Friday 2nd May. This board was to detail our concept development, prototype testing and evaluation and also a space for our box to be mounted on.