17
PIE BOOKLET Prototyping and interactive experiences By Matthijs Barentsen 40138691

Final booklet

Embed Size (px)

DESCRIPTION

Final booklet Matthijs Barentsen for prototyping and interactive experiences

Citation preview

Page 1: Final booklet

PIE BOOKLETPrototyping and interactive experiencesBy Matthijs Barentsen 40138691

Page 2: Final booklet

TABLE OF CONTENT3 -Tumbler4- About the module5 - First assignment7 - Processing the beginnings15 - Processing final submission20 - Arduino23 - Arduino final submission

TUMBLERPrototyping and interactive experience class is focusing mostly on JavaScript, and other interactive documentation. Some of the coding in java is very extensive. For this reason and the fact that this document does not support video or java, I decided to keep the coding and video separate from this document.You cant find this information on my tumbler site which can be accessed by following these links.

http://matthijsbarentsen.tumblr.com/http://ilikepiebutnotashomework.tumblr.com/

This tumbler site is used as a blog. You will find the same documentation there as you will find here, but not so much in an explanatory nature as you will find it here.

Page 3: Final booklet

About the moduleTaken from the module descriptor: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 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 will study and analyze technical tools for interaction, interaction and experiential design precedents, and critical interpretation in relation to contemporary practice that will support your own practical visualization and modeling methods.

You will engage with developing skill in the visualization, application and function of interactive tools and experiential relationships in contemporary design practices in 2 & 3 dimensions, while gaining an understanding of the value of immersive interactions in digital art & design both culturally and contextually.

Analytical skill, visual understanding and practical knowledge will underpin the development of creative interactive, immersive and visual relationships in a range of design genres.

The range of projects given will include the application of interactive, designed solutions to screen, space and place.

First AsignmentResearch interaction

Page 4: Final booklet

Research interactionOur first assignment was to research forms interaction within the schools boundries.In what ways do staff and students interact with objects or services within the boundries of the campus?

Some of the examples:-Toilet-Cash machine-Beamer-Door handle-Elevator interface

Processing the beginningsStarting with the basics

Page 5: Final booklet

Starting with the basicsTo start the module at a basic level we started with creating basic shapes and text in processing. Defining shapes such as squares, rectangles and circles and placing them at divined locations on the screen.

Starting with the basicsFurther on we started with implementing colors and an assignment to create your own initials using the basic shape tools

For picking colors multiple options were given. It was possible to use a grey scale ranging from 0 to 255. The RGB scale can be used or using hexadecimal notations like programs such as photoshop.

By using overlapping layers it is possible to create shapes that resemble letters

Page 6: Final booklet

Moving onNext up was manipulating the shapes we learned to create.Using int values gave us to oppertunity to actively manipulate shape. Functions like x++ or x=mouseX were used to adjust size location and visiblilty of objects.

DiceOur first processing related assignment was to create a dice., but there was a catch. The user had to preform a task, which resulted in randomizing the dice throw.

I created a little frog throwing game which allowd the user swipe the dice button, only if he or she got the frog onto the lilypad. To get people to interact, we lured them with chocolate.

Page 7: Final booklet

InstrumentWhere the dice game was focussed on exterior interaction; the instrument assignment was focussed on interaction with the program itzelf. Not only did it have to look good, it had to work properly.The instrument I created was a board with 3 octaves and its notes. Each note had its own button and the octave could be switched by using a turning knob.

InstrumentA library was created to have the 36 notes I needed for my instrument.To differ the octaves I used the function switchstate.

Switchstate allowed me to couple different notes to one button.

Page 8: Final booklet

PetAlthough I am a product designer, I am not talking about Polyethylene terephthalate.Our third processing assignment was a virtual pet. Something along the lines of a tamagochi.We were to create a pet someone could relate toTogether with Gavin Housley I created a little kitten. You could rubb its belly and it would give you a nice purr. But when clicked on the surprise button, an axe came into play to chop of the kitty’s head.

Processing final submissionThe Game

Page 9: Final booklet

The gameIt has probably become clear that our processing assignments were no longer about the code itzelf but the way it interacted with people. Our skills were sufficient enough to create the ellaborate coding needed for simple software.No it was time to test are skills by making a full worthy game.For this project we must investigate and critique how the design and production of modern technologies are adressing the relationship between humans and objects. This investigation will lead us to the design of an everyday gaming experience.

The gameBecause we were adressing the relationship between humans and objects. I started researching “ relationships” itzelf. It turned pout that in relationships we hold values to certain aspects. These are for instance:-Love-Control-Commitment-Responsibilities-Hatred

The three values I took to implement within my game were commitment, control and responsibilities.

By creating an attachment you can make the user feel responsible. And by adding a reward you create commitment, for the user wants to get that reward and is therefore committed to the game.

Page 10: Final booklet

The gameNow for the control part.This is the value which determined the game. I based my game on an existing game where control is the main form of interaction.SimCityThe idea was to use a grid layout to use as building spots. And different styles of buildings

The gameThe finalysed game was one that did not deviate to much from its original idea.The grid planning worked well with the switchstate function. For most building I used more than one building style which resulted in a more apealing looking game. The exterior of the building was determined by a randomizer just as we did with the dice.

Using archetypes for the building buttons helped to keep the game easy and natural to read.

Page 11: Final booklet

The beginning`Arduino Arduino

In basic arduino is very much the same as processing. During the first classes we were tought the basic principles and differences between Arduino coding an that of processing.

Page 12: Final booklet

ArduinoDuring the first week we were split up into groups of two. The second week we were given our first Arduino assignment. The assignment was to create an object which exhibits some form of reaction. We were to show how we could cobine our knowledge of coding with the practability of building a functioning model.We build a little model of a cricket, which would react to light. As soon as it gets dark, the cricket would start to tjirp. This was possible due to the usage of a light sensor.Sadly due to a conflict within my group, I do not have any visible material of this project.

Emotional ObjectsArduino final submission

Page 13: Final booklet

Emotional objectsFrom the project descriptor:Using the Arduino microprocessor we were asked to design an object which exhibits the human response characteristics to an input factor, based upon a specific human response to stimuli.

Designed attributes we should consider are- A computer program for Arduino that is able to take this input and control an output device in a predetermined manner- A sensor or sensors that are able to detect an input- An appropriate output device.- An electronic circuit to enable the above- A physical manifestation of your design that will contain the Arduino, breadboard and power supply.

Emotional objectsThe first thing to start with was choosing the stimuly and the corresponding responses.Without directly picking one of the stimuly we took them all under investigation.

The two stimuly we chose to use eventually were noise and movement.

The idea was to create an object that must be treated gently. By making to much noise or moving to quicly the object could be scared of. But when aproached gently it would stay calm and therefore aproachable.

Page 14: Final booklet

Emotional objectsThe planning was underway and the first concepts were drawn out.Backing of or aproaching would be done by a big wheel in the middle of our project which would touch the ground trough an opening in the underside of the box.

There were also ideas to make the object rotate and turn away, but these were ditched due to over complexity.

Emotional objectsThe eyes would expres emotion either normal angry or scared. To move the eyelids a servo could be used.

The eye movement was eventually reduced to two states (normal and scared) to prevent over complexity. Another factor was let go was the mouth, It did not ad enough extra compaired to the difuclty of placing it in our little box.

By using rod or handlebar, there would only be one servo needed to rotate two eyelids.

Page 15: Final booklet

Emotional objectsDue to the box dimensional limits of 100x100x100mm a carefull planning was made where to place what object. And to make sure that these boundries weren’t crossed I limited myzelf to work within a space of 90x90x90mm as a safety measure.

Emotional objectsLike in every project there were some setbacks. The first was the split of my group which resulted in me doing this project on my own. The seccond was the delivery time for my arduino package. The package only arived 1 week before the dealine which lead me to have little time to experiment. The third a biggest problem was a misconception of the component.I tought I bought a kit which contained a proximity sensor and a microphone. Only to late I realized that these components weren’t in my arduino kit.I had to improvise.What I came up with was a flame detecting sensor. This would give off a signal when detecting fire within a small range.

Page 16: Final booklet

Emotional objectsBecouse of my change in stimuly I wanted to chenge the character of my object. It now became Steve the (not so) fearless fire fighter.The revised Idea was to use the flame sensor make steve look scared and back of.A steppen motor would be used to move the object.First thing was learning how the steppenmotor worked. Slowly trying to manipulate it with first one and then two buttons. And eventually replacing the buttons with the flame sensor to get the same effect. When that was clear. It was time to work out the servo for the the eyelids.

Emotional objectsSadly this is where another problem arived. For the backwards movement of the object an “if” function was needed. Say if see flame then move backward.The problem was that I could not workout how to implement the servo function within that same “if” function. After some hours of struggeling I decided to contruct the technique for the eyebrows but leave the coding out.

Page 17: Final booklet

Emotional objectsConstruction began. You can see the technique for the eyebrows being implement using a triple layered front and little push rod at its back.The little box was just big enough to hold a servo, arduino and a steppenmotor powered wheel.And before long (that’s not true, it took ages) Steve was done.

Emotional objectsAnd here you have Steve. Its look is fear and not boredom. If you look closely you can even see the little flame sensor in itsright eye.

Steve functioned, though not as wel as wanted, but he worked. For improvement a stronger motor would be advised. Th litlle steppenmotor just did not have the juice required.But the assignment was a proof of concept, and in that Steve had succeeded.