Prototyping Interactive Experience
Procesiing & Ardunio Product design Portfolio
LI HAO MIN Hi, there I truly appreciate for taking your time and effort to read my profolio. My name is Haomin Li. I am an undergraduate design student with hand- painted, software capabilities and creative thinking. I had lost my way before I met the design and miscellaneous technology attracts my eyes. After that, I found the reason why I love the design. From the daily progress, I am looking for a wonderful life and a stage that I can show my strength. At present, Product design is my major. Although drawing skill is quite important, I prefer to use software to show my concept and also realize that interactive design is more attractive for me. I am focus on the digital art, which should get the skill of Processing and Ardunio. It has been spent time to study these software, but I enjoy my time. Generally speaking, I am a hard working student especially do the thing I am interested in. I will try my best to finish it no matter how difficult it is. I won’t let you down if you give me this chance.
INFO Birthdate: 18-01-1992 Email: 373014225@qq.com Mob: +(44)7835275129/ 18736056477 Address:: 21/8 Bryson Road, Edinburgh,EH11 1ED / Zhengzhou
CO NT EN TS
P6
TUMBLR ACCOUNT & EXAMPLES OF INTERACTION
P10
RADOMISER DICE GAME
P14
MUSICAL INSTRUMENT
P16
PET GAME
P20
THE GLITCH KNIGHT-Game
P30
BASIC CIRCUIT-- USAGE OF KIT
P34
THE SENSOR ROBOT
P40
EMOTIONAL RESPONSE-Scared Cube
P48
Rebranding design
P58
Product design
P62
Model Skill
{
Documentation of Development
Prtototyping Interactive Experiences
50 Examples of interactions We were asked to find 50 examples of interactions between humans an technologies, human and space, and technologicall enhanced spaces.
Tumblr: Haomin Li(Candice)
The following portfolio has a complete documentation of the course “ Prototyping Interactive Experiences”. Almost all of the contents reciewed in this document have Javascript application and viedo outputs, which ar not possible to dis The content in this document is recorded by the course processing, it will be showing by the pictures, words, and the link of video which is not possible to display there. It still has some other information in tumblr, if you want to see it,
6 7
I prefer to use software to show my concept and also realize that interactive design is more attractive for me. I am focus on the digital art, which should get the skill of Processing and Ardunio. It has been spent time to study these software, but I enjoy my time. Generally speaking, I am a hard working student especially do the thing I am interested in. I will try my best to finish it no matter how difficult it is. I won’t let you down after you read this booklet. http://haominli.tumblr.com/
SOFTWARE / PROCESSING GUIDED DEVELOPMENT AND SELF DIRECTED EXPLORATION
Dice Project Homework this week create a something with the dice. An interactive game and 1min film.
“Mouse Pressed” plays an interesting roles in processing. In this ecample when the user click the mouse, the background or the fill of ellipses will changed to other colors. Use a mouse press to change what your program is doing! You can build off the example below or add to your previous design by selecting “My Code from Last Lesson” below. You can work on your own pace, but we recommend approximately ten minutes on this assignment before moving on. Here is an example of drawing a different color depending on whether the mouse is pressed.
10 11
void setup() { size(500,500); }
Dice project is pretty interesting project. The number in the dice interface is random, which you should roll your mouse. It is interactive game. The code should be considered by the position of the ellipse. In the past course, tutor has been told us how to arrange the location, so it is easy for me. But this is the first time that learn the code about “random”. There is a random number from 1-6. So it will be showed the different case.
void draw() { background(0); if (mousePressed) { fill(0,255,0); } else { fill(255,0,0); } ellipse(mouseX,mouseY,20,20); } You could also consider drawing the background only when the mouse is pressed. For example: void setup() { size(500,500); background(0); } void draw() { if (mousePressed) { background(0); } ellipse(mouseX,mouseY,20,20); }
Dice Project
Dice Project
Code for the homework and the testing filmic.
The link for testing filmic--- Minion Game http://www.youtube.com/watch?v=jR7iolKWMpM&feature=youtu.be
int num=6; int dia=50; void setup(){ size(600,600);// (displayWidth,displayHeight); smooth(); stroke(50); }
12 13
void draw(){ background(0); if(mousePressed){ if(mouseButton==LEFT){ fill(#FF0000); }else if(mouseButton==CENTER){ fill(#0041FF); }else { fill(#FFF700); } } if(mouseX==pmouseX && mouseY==pmouseY){ switch(num){ case 1: println(“One”);//Prints “One” ellipse(width/2,height/2,dia,dia); break; case 2: println(“Two”);//Prints”Two” ellipse(width/4,height/4,dia,dia); ellipse(3*width/4,3*height/4,dia,dia); break; case 3: println(“Three”);//Prints”Three” ellipse(width/2,height/2,dia,dia); ellipse(width/4,height/4,dia,dia);
}
}
ellipse(3*width/4,3*height/4,dia,dia); break; case 4: println(“Four”); ellipse(width/4,height/4,dia,dia); ellipse(3*width/4,3*height/4,dia,dia); break; case 5: println(“Five”); ellipse(width/2,height/2,dia,dia); ellipse(width/4,height/4,dia,dia); ellipse(3*width/4,height/4,dia,dia); ellipse(width/4,3*height/4,dia,dia); ellipse(3*width/4,3*height/4,dia,dia); break; case 6: println(“Six”); ellipse(width/4,height/4,dia,dia); ellipse(3*width/4,height/4,dia,dia); ellipse(width/4,height/2,dia,dia); ellipse(3*width/4,height/2,dia,dia); ellipse(width/4,3*height/4,dia,dia); ellipse(3*width/4,3*height/4,dia,dia); break;
} else{ num=int(random(6)); }
Video address: https://vimeo.com/93909171
Musical Instrument This project is main focusing on the audio instrument.Pause and Rewind is new code. import ddf.minim.*; Minim minim; AudioPlayer player; AudioPlayer player2; AudioPlayer player3; AudioPlayer player4; void setup(){ size(800,400,P3D); minim=new Minim(this); player =minim.loadFile(“Amy Diamond - Heartbeats.mp3”); player.pause(); player2= minim.loadFile(“Bob Dylan - Blowing in the wind.mp3”); player2.pause(); player3 =minim.loadFile(“Avril Lavigne - Innocence.mp3”); player3.pause(); player4 =minim.loadFile(“Taylor Swift - Long Live(feat. Paula Fernandes).mp3”); player4.pause(); }
14 15
void draw(){ background(0); stroke(255); smooth(); if (mousePressed=mouseX>0 && mouseX<width/2 && mouseY>0 && mouseY<height/2){ ellipse(mouseX,mouseY,25,25); fill(int(random(255)),int(random(255)),int(rand om(255))); for(int i=0;i<player.bufferSize() -1; i++) { float x1 = map( i, 0, player.bufferSize(), 0, width ); Video address: https://vimeo.com/93906019
);
float x2 = map( i+1, 0, player.bufferSize(), 0, width
line( x1, 100 + player.left.get(i)*50, x2, 100 + player.left.get(i+1)*50 ); line( x1, 250 + player.right.get(i)*50, x2, 250 + player.right.get(i+1)*50 ); } player2.pause(); player2.rewind(); player.play(); player3.pause(); player4.pause(); println(“PLAYER 1”); } if (mousePressed=mouseX>width/2 && mouseX<width && mouseY>0 && mouseY<height/2){ ellipse(mouseX,mouseY,25,25); fill(int(random(255)),int(random(255)),int(rand om(255))); for(int i=0;i<player2.bufferSize() -1; i++) { float x1 = map( i, 0, player2.bufferSize(), 0, width ); float x2 = map( i+1, 0, player2.bufferSize(), 0, width ); line( x1, 100 + player2.left.get(i)*50, x2, 100 + player.left.get(i+1)*50 ); line( x1, 250 + player2.right.get(i)*50, x2, 250 + player.right.get(i+1)*50 ); } player.pause(); player.rewind(); player2.play(); player3.pause(); player4.pause(); println(“PLAYER 2”); } if (mousePressed=mouseX>0 && mouseX<width/2 && mouseY>height/2 && mouseY<height){ ellipse(mouseX,mouseY,25,25); fill(int(random(255)),int(random(255)),int(rand om(255)));
for(int i=0;i<player.bufferSize() -1; i++) { float x1 = map( i, 0, player3.bufferSize(), 0, width ); float x2 = map( i+1, 0, player3.bufferSize(), 0, width ); line( x1, 100 + player3.left.get(i)*50, x2, 100 + player.left.get(i+1)*50 ); line( x1, 250 + player3.right.get(i)*50, x2, 250 + player.right.get(i+1)*50 ); } player4.pause(); player4.rewind(); player3.play(); player.pause(); player2.pause(); println(“PLAYER 3”); } if (mousePressed=mouseX>width/2 && mouseX<width && mouseY>height/2 && mouseY<height){ ellipse(mouseX,mouseY,25,25); fill(int(random(255)),int(random(255)),int(rand om(255))); for(int i=0;i<player2.bufferSize() -1; i++) { float x1 = map( i, 0, player4.bufferSize(), 0, width ); float x2 = map( i+1, 0, player4.bufferSize(), 0, width ); line( x1, 100 + player4.left.get(i)*50, x2, 100 + player.left.get(i+1)*50 ); line( x1, 250 + player4.right.get(i)*50, x2, 250 + player.right.get(i+1)*50 ); } player3.pause(); player3.rewind(); player4.play(); player.pause(); player2.pause(); println(“PLAYER 4”); } }
Cyber Pet We always say that â&#x20AC;&#x153;The countenance is the portrait of the mind, the eyes are its informers. â&#x20AC;? We considered using the simple movement of eyes to showing the emotion. We considered happiness, sadness, anger an indifference to begin with before deciding to swap the voice for image after releasing that it would be more suitable for a child to learn that rather than anger.
Video address: https://vimeo.com/95918296
16 17
Cyber Pet PImage pic; PImage pic2; PImage pic3; PImage pic4; int state = 0; Eye e1,e2; float jitter; float dim = 100; import ddf.minim.*; float x; float y; float easing = 0.05; PFont font; int angle = 0;
18 19
Minim minim; AudioPlayer player; AudioPlayer player2; AudioPlayer player3; AudioPlayer player4; void setup(){ size(500,400); smooth(); noStroke(); background(0); pic=loadImage(“play.jpg”); pic2=loadImage(“joke.jpg”); pic3=loadImage(“eat.jpg”); pic4=loadImage(“sleep.jpg”); e1 = new Eye( 250, 100, 120); e2 = new Eye( 100, 100, 120); rect(130,250,100,30); font= loadFont(“AdobeDevanagari-Italic-48.vlw”); textSize(15); frameRate(120); minim=new Minim(this); player =minim.loadFile(“laugh.mp3”); player.pause();
}
minim=new Minim(this); player =minim.loadFile(“laugh.mp3”); player.pause(); player2= minim.loadFile(“whistle.mp3”); player2.pause(); player3 =minim.loadFile(“eat.mp3”); player3.pause(); player4 =minim.loadFile(“snore.mp3”); player4.pause();
for (int a = 0; a < 360; a += 175) { // for iteration loop runs 4 times float xoff = cos(radians(a)) * val; // cosine angle for xoff float yoff = sin(radians(a)) * val; // sin angle for yoff fill(199); ellipse(mouseX + xoff, mouseY, val, val); ellipse(mouseX,mouseY+yoff+25,2*val,4*v al); } fill(199); ellipse(mouseX, mouseY, 2, 2); } e1.update(mouseX, mouseY/2); e2.update(mouseX,mouseY/2);
void draw(){ background(0); fill(255); rect(130,250,100,30); image(pic,390,0,100,100); image(pic2,390,100,100,100); image(pic3,390,200,100,100); image(pic4,390,300,100,100); }
e1.display(); e2.display(); }
if (mousePressed == true) { angle += 5; // increase angle float val = cos(radians(angle)) * 12.0; // decimal number using cosine angle for (int a = 0; a < 360; a += 175) { // for iteration loop runs 4 times float xoff = cos(radians(a)) * val; // cosine angle for xoff float yoff = sin(radians(a)) * val; // sin angle for yoff fill(199); ellipse(mouseX + xoff, mouseY, val, val);
Eye(int tx, int ty, int ts) { x = tx; y = ty; size = ts; } void update(int mx, int my) { angle = atan2(my-y, mx-x); }
fill(199); ellipse(mouseX, mouseY, 2, 2);
} if (mousePressed == true) { angle += 5; // increase angle float val = cos(radians(angle)) * 12.0; // decimal number using cosine angle
class Eye { int x, y; int size; float angle = 0.0;
void display() { pushMatrix(); translate(x, y); fill(255); ellipse(0, 0, size, size); rotate(angle); fill(153, 204, 0); ellipse(size/4, 0, size/2, size/2); popMatrix();
} } }
ellipse(size/4, 0, size/2, size/2); popMatrix();
void mousePressed(){ if (mouseX>400 && mouseX<500 && mouseY>0 && mouseY<100){ state = 1; player.pause(); player.rewind(); player2.play(); player3.pause(); player4.pause(); } if (mouseX>400 && mouseX<500 && mouseY>100 && mouseY<200){ state = 2; player2.pause(); player2.rewind(); player.play(); player3.pause(); player4.pause(); } if (mouseX>400 && mouseX<500 && mouseY>200 && mouseY<300){ state = 3; player4.pause(); player4.rewind(); player3.play(); player.pause(); player2.pause(); } if (mouseX>400 && mouseX<500 && mouseY>300 && mouseY<400){ state = 4; player3.pause(); player3.rewind(); player4.play(); player.pause(); player2.pause(); } }
20 21
There is a dice is arranged on the center of the screen, dice was randomly thrown, there are one to six digits can be shown.
Technology & Experience
Game Experience Object & User
Communication Input & Output
Interactive Design
The game has two eggs with two different facial expressions they represent the image of the two players 1 and 2. There is a dice is arranged on the center of the screen, dice was randomly thrown there are one to six digits can be shown. When dice came to a stop show that the number represents the number of steps forward. When the eggs reach the end of the track, it can no longer move forward, which represents the this players has won, then click on egg , the screen will appear the words â&#x20AC;&#x153;you winâ&#x20AC;? It is to show the outcome of the game, (The game system uses the same dice, in order to ensure fairness and randomness of the game, use two eggs with two different facial expressions just in order to distinguish the player order.
22 23
Processing is real funny software; therefore it makes me fall in love with it. And it is an easier program than other software. Much more games use JAVA to control the system. Game added music, pictures, text, and clicked on a region, horizontal and vertical coordinates of the target will move at a constant figure. However, there were many loopholes in the game after some testing; it is the need for further development.
Video address: https://vimeo.com/93908397
Game Code Processing Code
24 25
int num=6; int dia=10; int value=0; int x1=90; int x2=90; int y1=20; int y2=100; int wt=5; int s1=90; int le=50; int st1=70; int st2=150; int wh=500; int d1=255; int d2=270; int d3=285; PImage pic1; PImage pic2; PImage pic3; PImage pic4; int t; int ypos; int xpos; float opa; int inc; color col; boolean el; import ddf.minim.*; Minim minim; AudioPlayer player; void setup() { size(550,600); smooth(); noStroke(); pic1=loadImage(“001.jpg”); pic2=loadImage(“002.jpg”); pic3=loadImage(“003.jpg”); pic4=loadImage(“004.jpg”);
}
ypos=300;//y position frameRate(120);//fps el=false; col=color(255); minim=new Minim(this); player =minim.loadFile(“music.mp3”); player.pause();
void draw() { background(0); stroke(255); fill(255); rect(240,240,60,1);//dice board rect(240,300,60,1); rect(240,240,1,60); rect(300,240,1,60); image(pic3,240,200,30,30); //bottom surface1 image(pic4,275,200,30,30); noStroke(); fill(#FFE203); rect(s1,st1,400,wt);//road1 rect(440,st1+le,le,wt); rect(440,st1+le*2,le,wt); rect(440,st1+le*3,le,wt); rect(440,st1+le*4,le,wt); rect(440,st1+le*5,le,wt); rect(140,390,350,wt); rect(s1,st2,310,wt); rect(350,st2+le,le,wt);//road2 rect(350,st2+le*2,le,wt); rect(350,st2+le*3,le,wt); rect(350,st2+le*4,le,wt); rect(350,st2+le*5,le,wt); rect(350,st2+le*6,le,wt); rect(350,st2+le*7,le,wt); rect(350,st2+le*8,le,wt); rect(s1,550,310,wt); fill(0); rect(s1+le,st1,wt,wh);
rect(s1+le*2,st1,wt,wh); rect(s1+le*3,st1,wt,100); rect(s1+le*3,380,wt,200); rect(s1+le*4,st1,wt,100); rect(s1+le*4,380,wt,200); rect(s1+le*5,st1,wt,wh); rect(s1+le*6,st1,wt,10); rect(s1+le*6,390,wt,8); rect(s1+le*6,540,wt,18); rect(s1+le*7,st1,wt,wh); rect(s1+le*8,st1,wt,wh); textSize(30); fill(255); text(“Start”,5,110); text(“Stop”,5,480); image(pic1,x1,y1,50,50);//user surface image(pic2,x2,y2,50,50); fill(#FFE203); if(value == 1){ ellipse(d2,d2,dia,dia); } if(value == 2){ ellipse(d3,d3,dia,dia); ellipse(d1,d1,dia,dia); } if(value == 3){ ellipse(d2,d2,dia,dia); ellipse(d3,d3,dia,dia); ellipse(d1,d1,dia,dia); } if(value == 4){ ellipse(d3,d3,dia,dia); ellipse(d1,d3,dia,dia); ellipse(d3,d1,dia,dia); ellipse(d1,d1,dia,dia); } if(value == 5){ ellipse(d2,d2,dia,dia); ellipse(d3,d3,dia,dia); ellipse(d1,d3,dia,dia); ellipse(d3,d1,dia,dia); ellipse(d1,d1,dia,dia); }
if(value == 6){ ellipse(d3,d3,dia,dia); ellipse(d1,d3,dia,dia); ellipse(d3,d2,dia,dia); ellipse(d1,d2,dia,dia); ellipse(d3,d1,dia,dia); ellipse(d1,d1,dia,dia); // println(“six”); }//dice random number println(mouseX +” “ + mouseY); if (mousePressed == true) { t=1; if(mouseX>240 && mouseX<270 && mouseY>200 && mouseY<230){
{
value=int(random(7)); if(x1<440 && y1==20){ x1=x1+value; }else if(x1>=440 && y1<330) y1=y1+value; }else if( x1>140 &&y1>=330){ x1=x1-value; }//1 speed and road }
if (mousePressed == true) { if(mouseX>275 && mouseX<305 && mouseY>200 && mouseY<230){ value=int(random(7)); if(x2<350 && y2==100){ x2=x2+value; }else if(x2>=350 && y2<490) { y2=y2+value; }else if( x2>90 &&y2>=490){ x2=x2-value; }//2 speed and road }
if (mousePressed == true) { if(mouseX>90 && mouseX<140 && mouseY>500 && mouseY< 550){ fill(random(255)); text(“You Win!!”,150,500); }//1 win if (mousePressed == true) { if(mouseX>140 && mouseX<180 && mouseY>350 && mouseY< 400){ if(el==true){ col= color(int(random(2 55)),int(random(255)),int(rand om(255))); el=false; } inc++; xpos=inc/12; opa= mouseY*2.5; fill(col,opa); text(“y”,2*xpos,ypos); text(“o”,3*xpos,ypos); text(“u”,4*xpos,ypos); text(“W”,5*xpos,ypos); text(“I”,6*xpos,ypos); text(“N”,7*xpos,ypos); text(“!”,8*xpos,ypos); }//2 win } if (mousePressed==true){ if(mouseX>4 && mouseY>90) { player.play();//music start } } } } } }
Evaluation 1.There are more problems came out, when I developed it. I need more knowledge to deal with them. I cannot deal with the problems that the screen can become the text ‘ you win!’ when the first user arrived at the end station. So I just finished that the players should click the mouse when one of them arrived. 2.Some great ideas can’t display by the program. Therefore give up some great idea. At the first time, I prefer to do the eggs’ step is not only according to the number of the dice, but also according to the different area.
26 27
3.Using the every single current skill is easier. However it is difficult to connect them together. There came out a lot of problems during writing the program. Further Development 1.he main problem is that when the first player reaches the end, the screen does not automatically appear “you win!” in the subtitles; instead the players themselves need to click on his picture to complete the subtitles scrolling. This code of processing is difficult for me. So I can figure out this code and develop it. 2.Mouse press is different with Touchpad. The touchpad is more sensitive; any little pressure will be displayed on the screen. The players’ intensity will affect the click time on the dice. But it seriously affects the fairness of this game. 3. Clicking the area is too small, and not easy to click.
4.It is necessary to do enough prepare work in order to do more useless work. And having genies brain calculate the position of every simply ellipse or rectangular is main requirement.
SOFTWARE / Ardunio
GUIDED DEVELOPMENT AND SELF DIRECTED EXPLORATION
Blink LED by Morse
The Arduino Basic Circuit
/* Blink Turns on an LED on for one second, then off for one second, repeatedly. This example code is in the public domain. */
In class arduino learning, blinking LED.
// Pin 13 has an LED connected on most Arduino boards. // give it a name: int led = 13; // the setup routine runs once when you press reset: void setup() { // initialize the digital pin as an output. pinMode(led, OUTPUT);
30 31
}
Controlling two led’s independently…..using arduino code. First Band = Number e.g. Green = 5 Second Band = Number e.g Blue 6 Third Band = Orange = Number of 0’s = (orange is 3 = 3 0’s) Ohm output would be 56,000 (5+6+ 3 0’s)
// the loop routine runs over and over again forever: void loop() { digitalWrite(led, HIGH); // turn the LED on (HIGH is the voltage level) delay(100); // wait for a second digitalWrite(led, LOW); delay(100); digitalWrite(led, HIGH); // turn the LED on (HIGH is the voltage level) delay(100); digitalWrite(led, LOW); delay(100); digitalWrite(led, HIGH); delay(100); digitalWrite(led, LOW); delay(100);
digitalWrite(led, HIGH); delay(100); digitalWrite(led, LOW); delay(100); //H digitalWrite(led, LOW); // turn the LED off by making the voltage LOW delay(2000); // wait for a second digitalWrite(led, HIGH); // turn the LED on (HIGH is the voltage level) delay(100); // wait for a second digitalWrite(led, LOW); delay(100); digitalWrite(led, HIGH); delay(1000); digitalWrite(led, LOW); delay(1000); //A digitalWrite(led, LOW); delay(2000); digitalWrite(led, HIGH); delay(1000); digitalWrite(led, LOW); delay(1000); digitalWrite(led, HIGH); delay(1000); digitalWrite(led, LOW); delay(1000); digitalWrite(led, HIGH); delay(1000); digitalWrite(led, LOW); delay(1000); //O digitalWrite(led, LOW); delay(2000); digitalWrite(led, HIGH); delay(1000); digitalWrite(led, LOW); delay(1000); digitalWrite(led, HIGH); delay(1000);
digitalWrite(led, LOW); delay(1000); //M digitalWrite(led, LOW); delay(2000); digitalWrite(led, HIGH); delay(100); digitalWrite(led, LOW); delay(100); digitalWrite(led, HIGH); delay(100); digitalWrite(led, LOW); delay(100); //I digitalWrite(led, LOW); delay(2000); digitalWrite(led, HIGH); delay(1000); digitalWrite(led, LOW); delay(1000); digitalWrite(led, HIGH); delay(100); digitalWrite(led, LOW); delay(100); //H }
Button Usage on Arduino
32 33
// Example 02: Turn on LED while the button is pressed const int LED = 13; // the pin for the LED const int BUTTON = 7; // the input pin where the // pushbutton is connected int val = 0; // val will be used to store the state // of the input pin void setup() { pinMode(LED, OUTPUT); // tell Arduino LED is an output pinMode(BUTTON, INPUT); // and BUTTON is an input } void loop(){ val = digitalRead(BUTTON); // read input value and store it // check whether the input is HIGH (button pressed) if (val == HIGH) { digitalWrite(LED, HIGH); // turn LED ON } else { digitalWrite(LED, LOW); } }
Sensor-LDR Usage
Light sensor with the arduino, replacing the button from a previous example with the sensor. When you cover the sensor with your finger it turns off the led.
Prepare Sensor Robot Research in marketing
Sensor Robot Ardunio Testing
After these two weeks, I can using the code of Ardunio to testing stuff. Therefore, for this project I am trying to design a Pseubulbar response to light, which must consider both the holistic design experience, this means the physical form is as important as the technological sophistication.
34 35
The first one of these is the work me and my partner Hazel on using an LDR, The concept is that when you close to the sensor, the light goes shine quickly. It looks shy face. The most fun you can have (after blinking LEDs) is using sensors to detect whats going on in the world and act on that information. The sensor has methods of interfacing, that can make it a real pain to work with. The LDR( light dependent resistor) has to have the simplest code, so it is easy to control.
Sensor Robot Processing /* Analog Input Demonstrates analog input by reading an analog sensor on analog pin 0 and turning on and off a light emitting diode(LED) connected to digital pin 13. The amount of time the LED will be on and off depends on the value obtained by analogRead(). The circuit: * Potentiometer attached to analog input 0 * center pin of the potentiometer to the analog pin * one side pin (either one) to ground * the other side pin to +5V * LED anode (long leg) attached to digital output 13 * LED cathode (short leg) attached to ground
36 37
* Note: because most Arduinos have a built-in LED attached to pin 13 on the board, the LED is optional. Created by David Cuartielles modified 30 Aug 2011 By Tom Igoe This example code is in the public domain. http://arduino.cc/en/Tutorial/AnalogInput Connect one pin of LDR to 5v and another pin to A0 input. This is a light sensor using LDR an ardunio, you can make it either shadow detector or light detector by simply changing the code given below. Finally, We make this robot interface, the LED will be show at the eyes, and the LDR will be show at the robotâ&#x20AC;&#x2122;s ear. When you close to the robotâ&#x20AC;&#x2122;s ear, it will shinny the eyes, it looks funny.
*/ int sensorPin = A2; // select the input pin for the potentiometer //int sensorPin2 = A1; int ledPin = 13;// select the pin for the
LED int ledPin2 = 12; int sensorValue = 0; // variable to store the value coming from the sensor void setup() { // declare the ledPin as an OUTPUT: pinMode(ledPin, OUTPUT); pinMode(ledPin2, OUTPUT); } void loop() { // read the value from the sensor: sensorValue = analogRead(sensorPin); // turn the ledPin on if( sensorValue <300); digitalWrite(ledPin, HIGH); digitalWrite(ledPin2, HIGH); // stop the program for <sensorValue> milliseconds: delay(sensorValue); // turn the ledPin off: digitalWrite(ledPin, LOW); digitalWrite(ledPin2, LOW); delay(sensorValue); if( sensorValue> 300); digitalWrite(ledPin, HIGH); digitalWrite(ledPin2, HIGH); delay(sensorValue); digitalWrite(ledPin, LOW); digitalWrite(ledPin2,LOW); // stop the program for for <sensorValue> milliseconds: delay(sensorValue); }
Video address: https://vimeo.com/90148827
Motor Usage/Switch Button
const int buttonPin = 2; // the number of the pushbutton pin const int ledPin = 13; // the number of the LED pin // variables will change: int buttonState = 0; // variable for reading the pushbutton status
38 39
void setup() { // initialize the LED pin as an output: pinMode(ledPin, OUTPUT); // initialize the pushbutton pin as an input: pinMode(buttonPin, INPUT); } void loop(){ // read the state of the pushbutton value: buttonState = digitalRead(buttonPin); // check if the pushbutton is pressed. // if it is, the buttonState is HIGH: if (buttonState == HIGH); // turn LED on: digitalWrite(ledPin, HIGH); } else { // turn LED off: digitalWrite(ledPin, HIGH); } }
Design an object which exhibits the human response characteristics to an input factor, based upon a specific human response to stimuli.
Interactive Cube
Investigating Human Auto-Response-----Emotional Objects
40 41
The HC-SR04 Ultrasonic Sensor is a very affordable proximity/distance sensor that has been used mainly for object avoidance in various robotics projects . It essentially gives your Arduino eyes / spacial awareness and can prevent your stuff from object. The CEM-1203 buzzer used in this instructable will need a resistor as well for the Arduino’s sake. The buzzer will also buzz in any direction. For consist- ency, we’ll be plugging the negative side of the buzzer toward the GND (ground) pin.
Interactive Cube Initial concept---Further development
42 43
Brainstorming for our final PIE piece. A cube that responds to a sensory input and gives and sensory out put. Frog in a box! Scared frog, come too close, starts to croak. Well, kind of. It’s meant to represent a form of hiding and the sensor we have looks like Video address: https://vimeo.com/93905610
frogs eyes. We had originally wanted to make it a little critter running away but the wheels hadn’t arrived on time for us to make that idea happen so we had to change it. It has a persona. We shouldn’t make it a character. It’s persona is that there’s something in the cube that is scared.
Interactive Cube Ardunio Code /* HC-SR04 Ping distance sensor: VCC to arduino 5v GND to arduino GND Echo to Arduino pin 7 Trig to Arduino pin 8 This sketch originates from Virtualmix: http:// goo.gl/kJ8Gl Has been modified by Winkle ink here: http:// winkleink.blogspot.com.au/2012/05/arduinohc-sr04-ultrasonic-distance.html And modified further by ScottC here: http:// arduinobasics.blogspot.com.au/2012/11/arduinobasics-hc-sr04-ultrasonic-sensor.html on 10 Nov 2012. */
44 45
#define echoPin 6 // Echo Pin #define trigPin 9 // Trigger Pin int maximumRange = 20; // Maximum range needed int minimumRange = 5; // Minimum range needed int buzzer=8; //#include <Servo.h> //int servopin = 8; //Servo myservo; void setup() { Serial.begin (9600); pinMode(buzzer,OUTPUT); pinMode(trigPin, OUTPUT); pinMode(echoPin, INPUT); }
void loop() { /* The following trigPin/echoPin cycle is used to determine the distance of the nearest object by bouncing soundwaves off of it. */ long duration, distance; digitalWrite(trigPin, LOW); delayMicroseconds(2); digitalWrite(trigPin, HIGH); delayMicroseconds(10); digitalWrite(trigPin, LOW); duration = pulseIn(echoPin, HIGH); //Calculate the distance (in cm) based on the speed of sound. distance = duration/58.2; if (distance >= maximumRange || distance <= minimumRange){ /* Send a negative number to computer and Turn LED ON to indicate “out of range” */ Serial.println(“-1”); digitalWrite(buzzer,HIGH);//Make some sound delay(1000);//Delay 1ms digitalWrite(buzzer,LOW);//Be quiet delay(1000);//Delay 1ms // myservo.attach(servopin); // myservo.write(90); } else { /* Send the distance to the computer using Serial protocol, and turn LED OFF to indicate successful reading. */ Serial.println(distance);
digitalWrite(buzzer,HIGH);//Make some sound delay(2);//Delay 2ms digitalWrite(buzzer,LOW);//Be quiet delay(2);//Delay 2ms } //Delay 50ms before next reading. delay(50); }
To give our model a persona, it was designed to look like Captain American who has a shield. That shield could protect him. The inside of our box is a scared thing, so the user need something to protect against danger. When the shield close to the box, it will make noise. We using the “buzzer” and the “ultrasonic sensor”. It offers excellent range accuracy and reading in an package.
Documentation of Development
Prtototyping Interactive Experiences
}
Practice/Re-Branding logo/ booklet/ website product/ package/
Booklet
50 51 Using the dynamic brand and colours in the poster design. Using simple shapes and blocks to create objects that represent the charity and its different aspects. The blocks that make up each part represent how Lifecare has so much going on and is made up of different parts to help the older people.
Print Proposals for a re-direction for the print side of the charity, including booklets, newsletters and annual reports
52 53
The dynamic colour scheme is implemented here strongly, combining multiple existing booklets into fewer.
Website The website has been stripped bare, utilising the previously evident colour scheme and much easier navigation.
The website will also have new features that include: Magnifying Glass: A tool that, when clicked, will allow the person to mouse over anything and see it magnified. Donate Button: Easier way to donate, by simply clicking a button. No nonsense. Donate Button: Easier way to donate, by simply clicking a button. No nonsense.
Product Proposals for product design for the charity, including a cup holder that can double as a place to put a shopping list.
Schetch & Software Product Design Poster and Booklet
58 59
Model skill Building full model Drawing the Concept
Motor Home Full size Model Design a Motor Home for Interview some proposal. It should including the six chair with space hold the IPad. It also could provide normal tools for daily life.
64 65
Motor Home Cover of Car & Final Proposal