TABLE OF CONTENTS THE ARDUINO KIT
40
TUMBLR: PROTOTYPING INTERACTIVE 5 EXPERIENCES
C R E AT E A B A S I C CIRCUIT BY ARDUINO
48
INTRODUCTION TO THE MODULE
6
BASICS OF PROCESSING
10
A SIMPLE PROJECT USING THIS PRINCIPLE
TABLE OF CONTENTS
4
SOME EXAMPKES OF INTERACTIONS 14 OTHER ASSIGNMENTS
16
ANOTHER PROJECT - DICE GAME
18
EMTIONAL PET PROJECT
22
ASSIGNMENT
24
THE BRIEF
26
CONCEPT
28
ROUGH PLAN
30
PROTOTYPING
32
RULES GAME DEVELOPMENT EXHIBITION
34 36 38
ASSIGNMENT
51
52
RESEARCH
56
CONCEPT
60
THE CIRCUIT
62
SOFTWARE
64
PROTOTYPE
66
EXHIBITION
72
TUMBLR: PROTOTYPING INTERACTIVE EXPERIENCES I will introduce you the content of the tumblr later in this booklet. The content of the tumblr called ''prototyping interactive experiences'' is about experiences and projects about learning the softwares of processing and arduino. It will tell you 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.
INTRODUCTION TO THE MODULE
The booklet engage with developing skill in the visualization, application and function of interactive tools and experiential relationships in contemporary design. The range of projects given will include the application of interactive, designed solutions to screen, space and place.
The Prototyping Interactive Experiences module will provide you with an introduction to the use of interactive s o f t wa re s a n d h a rd wa re s , b a s i c 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 can study and analyze technical tools for interaction, interaction and experiential design precedents and modeling methods.
PROCESSING/SOFTWARE IT IS AN EXPLORATION AND GUIDE ABOUT THE SOFTWARE
BASICS OF PROCESSING
You can draw some ellipses by the p ro c e s s i n g co d e . And you can make the ellipses following the position of your mouse.
Here is a simple Processing example that demonstrates its stateful nature. The pattern will shake according to the position of your mouse.
void draw() { if (mousePressed) { fill(255); } else { fill(0); } ellipse(mouseX, mouseY, 50, 50); } And here’s what it looks like: Note that we don’t specify the fill color in the ellipse. Instead, we set the fill color. All commands that draw something, from that point on, will use this new fill color. Also note that the ellipse command immediately draws something on the screen.
SOME EXAMPKES OF INTERACTIONS Create a simple set of rules for how the bubbles look and then for every vertical c o o rd i n a t e c re a t e one with a random x coordinate. It ended up looking something like this (or click here to try the applet for yourself)
I f yo u l e ave t h e m unattended they will increase in speed then shake then explode unless attended to. The snowflakes becoming faster and faster when unattended then once the mouse is within range their speed dampens down until it has completely stopped.
Get Charles Canfield richer. Use arrow keys to move.
Escape the maze by spinning it and avoiding enemies. Yo u c a n u s e t h e mouse to control the direction.
OTHER ASSIGNMENTS Using processing to write your name.
ANOTHER PROJECT - DICE GAME BY PROCESSING
It is a dice game that if you click the mouse, the dice will show a number at random like below.
OTHER ASSIGNMENTS Keyboard piano Create a music keyboard from the qwerty keyboard.
EMOTIONAL PET PROJECT When you touch the different position of thebody of this dog ,it will show different emotion. That is a really interesting group project that designed by processing.
This is a different vision of emotional p et d e s i g n e d by processing.
Va y a g e Adventure Game
Assignment Design an interactive game
AN EXAMPLE
The Brief For this project I will investigate and critique how the design and production of modern technologies are addressing the relationship between humans and objects, or not. My investigation will lead you to the design of an everyday technological gaming experience with a specific focus on the relationship, interaction and communication between, object and user, and, user and object. The responsive final output of the experience must be implemented using Processing. My task within the design of your final outcome will be on both the game controller and also the game itself. We may choose to re-design an existing game or design a new game through Processing.
My final designed outcome will consider not only the psychological relationship but also the physical relationship, meaning you must produce a physical interactive artefact of your design object. Key to the success of your outcome will be your investigation and development of your newly designed object. Test it, evaluate your results, revise your design and test it again. The rigidity of this phase in your process will allow you to find opportunity and insight in an already overcrowded world of consumable technologies. We must also closely consider the aesthetic design and finish of your outcome. The object should look and feel like a product. This is a prototyping stage output but card modelling should be implemented where appropriate.
CONCEPT
POINTS
Easy to control control using a handle make laptop like a machine that can play game And next... Design a game which is easy to control. Make the laptop like a machine that can play game.
ROUGH PLAN
new user/audience experience
My sketch bookabout a rough plan of the game I designed. My target users are children and young people who is 20-30 years old.
Young people 20-30 years old
Site: game room or home My prototyping interactive game is about a voyage adventure. You can use handle to control the direction of black bombs to avoid the bombs touch your ship.
Prototyping prototype modeling will become popular because the card model of handle is easy for controlling. And with the handle model to control the game, this will give people a sense of reality and let users feel more energitic to play with it. Samle game always is classic, and not easy to make people be bored with it.
There is a mouse in the box that connect with the blue handle. It is not only a interactive design ,but also a product. It is easy to make this product. Tools: Laptop, glue, knife, card , some boxes model,a wireless optical mouse,Scotch tape,stick Make codes by laptop. Next ,make card model Put wireless mouse into a box,and use let mouse fixed on a stick and handle(blue ball) by Scotch tape . Then the product is done.
Rules:
You can play the game like this.
The play environment is blue ocean, you have a little ship which is on the ocean.There will drop many black bombs.You need to control a control I designed to control the direction of black bombs. You have 100 lifes to play.Once your red ship touch the bombs,you lose one life. You can play with it until you die.
When your ship touch the bomb, you will lose one life, and the screen will changes like the picture below.
Game Development I look into these games.Then I decided to design a agile game. So I am going to use Processing and card modern to complete my game. Below is my code for the game.
PImage pic; PImage pic1; rect[] rect = new rect[10000]; int rectCount = 0; int timer; void setup() { size(800, 700); p i c = l o a d I m a ge ( " 0 5 . j p g " ) ; / / background //pic1 = loadImage("03.png"); for (int i = 0; i < rect.length; i++) { if (rect[i] != null) {//this code is the red block rect[i].init(); } } mouseX = width/2; } float playerPos; float playerSpeed; void draw() { background(100); image (pic,0,0,800,800); // image (pic1,175,320,100,100); makeEnemy();
moveEnemy(); player(); } float moveSpeed; void moveEnemy() { fill(255); noStroke(); playerSpeed = sqrt((sq(mouseX width/2)))/15;//speed moveSpeed+=playerSpeed/5; if (mouseX >= width/2) { for (int i = 0; i < rect.length; i++) { if (rect[i] != null) { rect[i].setXPos(rect[i].getXPos() playerSpeed); } } } else { for (int i = 0; i < rect.length; i++) { if (rect[i] != null) { rect[i].setXPos(rect[i].getXPos() + playerSpeed);
} } } } void makeEnemy() { noStroke(); timer++; if (timer % 2.5 == 0) { rect[rectCount] = new rect(); rect[rectCount].init(); rectCount++; } for ( int i = 0; i < rect.length; i++) { if (rect[i] != null) { rect[i].make(); rect[i].move(); rect[i].check(); } } } void player() { fill(204,44,44); rect(width/2, height*7/8, 50, 15); } class rect { float xpos; float ypos = 0; float siz = 40; float opacity = 0; void init() { x p o s = ra n d o m ( - w i d t h * 2 , width*3); siz = 30; }
void make() { fill(0, opacity); ellipse(xpos, ypos, siz, siz); } void move() { if (opacity <= 255) { opacity+=5; }i f (ypos <= height*3/2) { ypos+=5; siz+=.5; } } int lives = 100; void check() { if (sqrt((sq(xpos - width/2)) + (sq(ypos - height*7/8))) < 5 + siz/2) { filter(INVERT); } } float getXPos() { return xpos; } void setXPos(float x) { xpos = x; } }
EXHIBITION
ARDUINO/SOFTWARE IT IS AN EXPLORATION AND GUIDE ABOUT THE SOFTWARE
THE ARDUINO KIT
A Arduino box
Breadboard Breadboards are fantastic things for quickly prototyping circuits.Each column of holes is connected together internally so components can be easily connected together.
Jumper Wires Arduino
They plug into the breadboard and the connection pins on the Arduino and are used to connect all your cool projects together.
Resistor
Push button switch
330 ohm resistor - the colour b a n d s o n t h i s re s i sto r a re Orange, Orange, Black.
a simple momententary(when you press it, it is closed and when you let go it si open) that will fit nicely into the included Breadboard.
ik ohm resistor(1000 ohms) - the colour bands on the resistor are Brown, Black, Red. 10k ohm resistor(10000ohms) the colour bands on the resistor are Brown, Black, Orange.
LED light
LDR
a 3mm Red LED.
An LDR or Light Dependant Resistor is really a resistor whose resistance changes depending on how much light falls on to it.
PP3 Battery Clip You can use this to connect a PP3 Battery(the 9V rectangular type) to the DC input Jack on the Arduino.
Tilt Switch This little switch will be closedwhenever it is upright, however if you tilt it over the contacts open and it wont conduct.
Servo Motor A typical servo motor consists o f a s m a l l ge a re d e l e c t r i c motor which has an in-built potentiometer which allows for position control. Great for use in RC projects and anything where you want something to move to a speacial position.
USB A-BCable You will use this a lot! Used for uploading your programs onto the Arduino, it has a rectangular 'A' connector for connection to a PC and a square 'B' connection on the other end for plugging into the Arduino.
CREATE A BASIC CIRCUIT BY ARDUINO Making a LED Blink With a Button Components Needed for Sound Detector Circuit Arduino Uno R3 x 1 Breadboard x 1 Standard Type B USB cable x 1 Push Button x 1 10K resistor x 1 Short jumper wires x 3
The code as below: 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 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, LOW); }
A SIMPLE PROJECT BY USING THIS PRINCIPLE You
can control the light of the little car by push the button in the car.
Emotional project
ASSIGNMENT 2 Emotional project
DESIGN OF MY PROJECT ASSIGNMENT: EMOTIONAL OBJECT
The brief: I am going to design an object which exhibits the human response characteristics to an input f a c t o r, b a s e d u p o n a specific human response to stimuli. Using the Arduino microprocessor. A computer program for an Arduino microprocessor that is able to take this input and control an output device in a predetermined.
- A sensor or sensors that are able to detect an input - An appropriate output device. - An electronic circuit to enable the above constructed on a Breadboard. - A physical manifestation of your design that will contain the Arduino, b re a d b o a rd a n d p o we r supply. The design of the fo r m i s ex p e c te d to b e contextualised around your stimuli and response.
A N E X P LO R AT I O N A N D RESEARCH OF ARDUINO KIT
RESEARCH
Singing plant. Make your plant sing with Arduino, touche and a gameduino by madshobye.
That is a light installation.
Sound Sensor
A CDROM Brushless Motor
Touch Pad Button Switch Sensor
Modulo Ultrasonido Sensor De Distancia
CONCEPT The human body is a complex system of surfaces and organs that can detect heat, light, sound, movement.
I aimed at designing an object which has the characters as below.
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.
Light sensitive Interesting simple Easy to control Psychological
INPUT
OUTPUT
FINAL CONCEPT
WHISPER TO ME! I am going to design an object as a box, and the box will like a shy girl. When people coming to talk to her, her face will turned red. It is an interesting interactive project.
Input: Speak
The name of the project is: Whisper to me!
Output: Blush
THE CIRCUIT
Components Needed for Sound Detector Circuit
How to Build a Sound Detector Circuit? A sound detector circuit, as you would probably know, is a circuit that can detect sound, such as talking, clapping, or shouting.
breadboard red LED sound sensor jumper wires
Based on this sound that the circuit detects, we can let anything happen in the circuit, such as have an LED light. In this sound detector circuit which we will build now, we are going to use a microcontroller, an arduino board, to light an LED when sound is detected.
SOFTWARE
HERE IS THE CODE
int sound = 0; void setup() { pinMode (13, OUTPUT);// Serial.begin(9600); } void loop() { sound = digitalRead(2); if (sound == 1) { // If loud sound Serial.println("yin!"); digitalWrite(13,HIGH); delay(100); digitalWrite (13, LOW); //LED turns off } else{ digitalWrite(13, LOW); } }
PROTOTYPE
EXHIBITION
WHISPER TO ME!