Prototyping Interactive Experiences
Table of Contents 1. Introduction to booklet and module 2. Processing: Grasping the basics 3. Processing: The Cat’s out of the bag 4. Processing: Assignment 1 5. Processing: Assignment 2 6. Let’s Arduino! 7. Arduino: Assignment 1 8. Arduino: Assignment 2 9. Bibliography of sorts 10. The Tumblr Blog
Booklet and Module
This booklet fulfills part of my final submission for my Prototyping Interactive Experiences module. Or P.I.E for short. This a synopsis of the module: “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 the screen and physical space.�
Processing: Grasping the Basics
Processing was the first interactive coding technology that the class used. It combines a vast array of functions, inputs and outputs to create visually stunning interactive digital designs. The first few tasks we had were; - to create a simple dice - create abstract objects - create colours - create moving objects - make objects move - plotting coordinates for shapes -integrating images and sound .
Processing: The Cat’s out of the bag
Our first main task whilst learning Processing was to create an interactive pet using the application. We were to consider the visual output as well as the interactive capabilities it would have. For this we were put into groups of 3 to come up with and implement our ideas. Our group came up with the concept of a pet cat which if you ran the mouse over different parts of its face you would get a different reaction. For example if the mouse was to go over the eye area the cats face would become angry and it would hiss. Other areas had similar reactions.
Processing: Assignment 1
The first assignment for Processing was to take the concept of a Dice roll and make it in to an interactive game I struggled with finding a concept that was original, engaging and simple at the same time so I jotted all my ideas down to pick the one that worked best.
My final game turned out to be a Destination Selector where the user would move the mouse across the screen and when it stopped a randomly generated image would appear and that would be the city which they should visit next.
Processing: Assignment 2
The second assignment using Processing was to incorporate sound in to an interactive game form. For this I wanted to use a system that correlated a certain shape to a certain sound. I also wanted to expand how the user interacted with the game and decided to use a graphics tablet and stylus as the mode of interaction.
As my development of the game continued I decided to make one shape the ‘winning’ shape and have a special noise play when the user found it. For all the other shapes it would play a sharp buzzing noise to represent losing. The overall design of the game was to be considered as well. Originally I had wanted to contain my laptop in a model styled like an old arcade console but my laptop has over heating problems and I didn’t want to create a fire hazard.
Let’s Arduino!
Arduino proved just as much a challenge as Processing did. With the added quirk of using a lot of electronic bits and bobs it got fairly complicated at parts. The first few tasks we took part in were the basics of making things move, light up and have a sensory input and output. Arduino is very interesting and limitless little piece of technology.
Arduino: Assignment 1
For both our Arduino assignments we were put in to a partnership with another member of the class and asked to come up with a brand. Our group name is ‘HaHa’ and we wanted to specialize in cute interactive objects. The first project that we were to do was create an interactive object that has a designed Pseudo bulbar response to light. The object was to have some form of awareness as well as a purposefully designed physical presence.
Our final concept was a small robot that could feel pain. The idea was the light sensor we used for the project would act as the in put for the ‘pain’ factor and the LEDs we had would act as the response to the pain. The user would pinch the robots ear covering the light sensor and as it was covered the LED eyes would blink showing the robot to be in pain.
Arduino: Assignment 2
The second and main assignment for Arduino was to create a Cube with a pseudo human characteristic using what we had learned already and experimenting as well. For our interactive cube we decided at first to use a movement and depth sensor to create a cube that would run away from people. However the wheels we wanted to use did not come in time and we had to re-design our cube to use a buzzer to indicate its fear.
I wanted to keep the cube as simple as possible for people to interact with and discover what it did. My partner felt that the cube should have more of a persona and made the ‘Captain America’ shield for the cube to use as the object it would sense. I did not feel this was a great idea but in group projects there always needs to be room for compromise. The cube is to be exhibited after the final hand in for the module.
Bibliography of sorts
Throughout the module I have accessed many points of information about interactive designs. I felt that to dismiss these when it came to write my booklet would be silly as they have helped me benefit from the module significantly. From documentaries, other interactive designs, books and finding new games I felt I have really broadened my design horizons during this semester.
The Tumblr Blog
During the course of the module we were asked to keep a Tumblr blog of all our activites so we could refer back to them at the end of the year and so the lecturers would be able to keep up to date on what we were doing outwith class. The link to my full un-edited blog is : http://hazellovespie.tumblr.com/
Hazel Mochan Bdes Digital Arts & Design 40112635