PROTOTYPING INTERACTIVE EXPERIENCES Natalie Smith 40114814 Edinburgh Napier Univeristy
Development Booklet
2 Prototyping Interactive Experiences
PROTOTYPING INTERACTIVE EXPERIENCES
3 Development Booklet
4
5 Prototyping Interactive Experiences
Development Booklet
CONTENTS
NATTY-PIE.TUMBLR.COM
CONTENTS 4 NATTY-PIE.TUMBLR.COM 5 MODULE INTRODUCTION 6 PROCESSING INTRODUCTION TO PROCESSING 10 PROCESSING HANDBOOK 12 MAKING THINGS TALK 14 SOUND IN PROCESSING 16 TEXT IN PROCESSING 18 DESIGNING AN INTERFACE 20 PETE THE INTERACTIVE PET 24 ASSESSMENT 1 28 ARDUINO INTRODUCTION TO ARDUINO 34 INSIDE THE ARDUINO KIT 36 LITE 40 MORSE CODE 42 MAKING LIGHT OF EMOTION 44 SCAREDY BOT 46
As part of the Prototyping Interactive Experiences module we had to start a blog, updating it as we progressed through the coursework. The blog holds research, inspiration related to the module and photographs and videos of my progress.
link to tumblr
6
7 Prototyping Interactive Experiences
INTRODUCTION TO THE MODULE This module has been designed to introduce students to open source interactive technologies. Focused on good design practice the module will introduce the application and testing of technology in design. 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.
Development Booklet
Prototyping Interactive Experiences
Development Booklet
P R O C E S S I N G
10
11 Prototyping Interactive Experiences
INTRODUCTION TO PROCESSING In our very first introduction to Processing we learned of the basic rules such as setting up the code with ‘void setup( )’ and ‘void draw( )’ and simple drawing commands such as line, rect, ellipse and quad. We were then shown basic commands for the movement of these shapes and after, asked to draw our names using the commands we had learned.
Development Booklet
12
13 Prototyping Interactive Experiences
PROCESSING HANDBOOK In order to progress further with the learning of Processing, I purchased ‘Processing: A Programming Handbook for Visual Designers and Artists’ written by Casey Reas and Ben Fry, to guide me through the commands and options within the software. Working through the tutorials and examples gave me a better understanding of the commands and how to write codes.
see this online
Development Booklet
14
15 Prototyping Interactive Experiences
MAKING THINGS TALK After being introduced to ‘Processing: A Programming Handbook for Visual Designers and Artists’, I looked further into what could be done using the software and purchased ‘Making Things Talk’ after being recommended this book in class. I will look further into the tutorials in this book after completing this module as they involved more complicated tasks which did not relate to our assignments and projects. The pictures below show one of my favourite tutorials from this book.
link to tumblr
Development Booklet
16
17 Prototyping Interactive Experiences
SOUND IN PROCESSING After learning how to input sound into our codes, we were asked to create some kind of musical instrument and experiment with sounds. I chose to create a piano with six keys. The assending keys were C, D, E, F, G and A and when each note played, the soundwaves shown in the canvas moved.
link to tumblr
Development Booklet
18
19 Prototyping Interactive Experiences
TEXT IN PROCESSING Inputting text in Processing was very similar to playing with shapes as you can move the text the same way as you would shapes. In the examples shown, I used ‘mouseX’ instead of a set input so the text would move with the mouse.
link to tumblr
Development Booklet
20
21 Prototyping Interactive Experiences
DESIGNING AN INTERFACE The class was given code for a dice, which we would change to suit ourselves. When you roll your mouse over the screen, the dice rolls, randomly picking an output. With this dice we were to design an interface using either a desktop mouse or a trackpad.
Development Booklet
22
23 Prototyping Interactive Experiences
DESIGNING AN INTERFACE After designing our interfaces, we were to test these with people playing a game and film our findings. I did some research into some basic dice games and found ‘Big Six’, a simple game using a board with six spaces and some pieces. Each player gets six pieces and the aim of the game is to get rid of all your pieces. Each roll of the dice determins where you put your piece during your go, with six being a ‘black hole’, meaning that piece is out of the game. If you roll a number and a piece is already placed on that space, that piece is now yours, adding to the number of pieces you have left to loose.
link to tumblr
Development Booklet
24
25 Prototyping Interactive Experiences
PETE THE INTERACTIVE PET The class was split into groups of three and each group set out to create an interactive pet in Processing. Me, Elan and Jingwen decided we wanted our pet to have six emotions or states that would trigger in different environments.
Development Booklet
26
27 Prototyping Interactive Experiences
PETE THE INTERACTIVE PET There are the environments that the pet would experience. In the kitchen, the pet gets fed a doughnut and is happy. In the rain, the pet is sad. In the missletoe environment, the pet gives you a kiss. In the bedroom, the pet falls asleep. In the environment with the feather background, you tickle the pet with your mouse and it’s head wobbles.
link to tumblr
Development Booklet
28
29 Prototyping Interactive Experiences
ASSESSMENT 1 / INTERFACING WITH TECHNOLOGY After learning Processing and researching into games, we were to make our chosen or new game in the Processing software. As I had chosen to recreate the popular reaction game, I created a canvas similar to the dice we did earlier in the module, instead using nine dots and using the ‘random’ command. When you hit one dot, that one dissappears and another one appears elsewhere or in the same place as before. This reaction game requires focus and attention and has been used as a brain exercise before.
Development Booklet
30
31 Prototyping Interactive Experiences
ASSESSMENT 1 / INTERFACING WITH TECHNOLOGY These screenshots are from the film I shot of the game I create on Processing. It shows four people competing to get the quickest time in completing the reaction test. I named the game, simply, Reaction.
link to tumblr
Development Booklet
Prototyping Interactive Experiences
Development Booklet
A
R
D
U
I
N
O
34
35 Prototyping Interactive Experiences
INTRODUCTION TO ARDUINO I first came across Arduino while watching TED Talks on Netflix. ‘Arduino is an open-source electronics prototyping platform based on flexible, easy-to-use hardware and software.’ - Arduino Arduino is based on Processing and Wiring.
link to tumblr
Development Booklet
36
37 Prototyping Interactive Experiences
INSIDE THE ARDUINO KIT The Starter Kit for Arduino Uno includes: 1. Arduino Uno Board 2. Breadboard 3. USB A - B Cable 4. PP3 9V Battery Clip 5. Jumper Wires 6. LEDs (Red & Green 3mm & RGB) 7. Resistors (330, 1k and 10k ohm 8. Capacitors 9. Shields 10. Servo Motor 11. Push Button Switches and Slide Switch 12. Buzzer, Tilt Switch, LDR, Potentiometer, Diode
Development Booklet
1
2
3
4
38
39 Prototyping Interactive Experiences
Development Booklet
5
6
9
10
7
8
11
12
40
41 Prototyping Interactive Experiences
LITE / NATALIE SMITH AND JOZEF SVETLOSAK I was paired up with Jozef Svetlosak for the remainder of the module. We named ourselves ‘Lite’ after learning the meanings of our names and came up with this manifesto for our group.
Development Booklet
42
43 Prototyping Interactive Experiences
MORSE CODE To get used to Arduino and the breadboard and components, we were to, with our new partners, make two LEDs flash in morse code using our surnames, Smith and Svetlozak. Smith is spelt out using the red LED and Svetlozak is spelt out using the green LED.
link to tumblr
Development Booklet
44
45 Prototyping Interactive Experiences
MAKING LIGHT OF EMOTION HOOT is a sunrise alarm clock. Using and LDR and a buzzer, the alarm will sound when it detects daylight outside. This means you can wake up easily at the crack of dawn. This alarm clock is great for people who like to get up early and go for a jog before work or take the dog out for a walk.
link to tumblr
Development Booklet
46
47 Prototyping Interactive Experiences
SCAREDYBOT This final project was to make a battery powered robot 10cm x 10cm x 10cm that would show a human emotion. As our group, Lite, we decided to create a robot based on the emotion of fear. The ScaredyBot runs away in fear whenever it hears noise. As it runs away, the box flashes yellow. This shows the colours yellow and black which together, are associated with warnings. The final and finished product would include more features such as randomised movement, peeing itself in fear and screaming noises.
Development Booklet
Prototyping Interactive Experiences