import processing.image.*;
Prototyping Interactive = Experiences int videoSliceX; int drawPositionX; void setup() { size(600, 240); // This the default video input, see the GettingStartedCapture // example if it creates an error video = new Capture(this,320, 240); // Start capturing the images from the camera video.start(); videoSliceX = video.width / 2; drawPositionX = width - 1; background(0);
}
By Chloe Alcorn
Contents ;*Prototyping Interactive Experiences int Page 4 = Contents Page int Page [5] = Tumblr Page 6; Introduction to Prototyping Interactive Experiences void setup() { Page7 ( Inspiration ); // This the default video input, see the GettingStartedCapture // example if it creates an error page 8 = Capture(examples); // Start capturing the images from the camera Page9.start(Interactions); numPage10 = Processing * video.height; Page11 = new int[Learning Processing]; loadPage12 ( change in size ); }
Page30[i] =Final Image color(diffR, diffG, diffB); //Page31[i] = Final Concept 2 0xff000000 | (diffR << 16) | (diffG << 8) | diffB; // Save the current color into the ‘previous’ buffer Page32[i] Final Image 2 = currColor; } // To prevent flicker from frames that are all black (no movement), // only update the screen if the image has changed. Page33++ Special Thanks (movementSum > 0) { updatePixels(); println(movementSum); // Print the total amount of movement to the console } } }
void draw(Page 13) { moving across the screen if (Page14 ()) { Random Images // When using video to manipulate the screen, use video.available() and // video.read() inside the draw() method so that it’s safe to draw to the screen Page15 // Dice interface Page16(); // Grey Hound Lucky Dip Page17 = 0; // Processing Handbook for (int i = 0; i < numPixels; i++) { // For each pixel in the video frame... Page18 = Learning Text[i]; Page19 =[i];Introducing Sound // Extract the red, green, and blue components from current pixel int Page20 = ( >> Pet Game) & 0xFF; // Like red(), but faster int Page21 = (Final Game >> 8) & 0xFF; int Page22 = Arduino ++ currColor & 0xFF; // Extract red, green, and blue components from previous pixel int Page23 = Arduino Components (prevColor >> 16) & 0xFF; int Page24 = Insperation (prevColor >> 8) & 0xFF; int Page25 =Inspiration prevColor & 0xFF; // Compute the difference of the red, green, and blue values int Page 26= Morse Code abs(currR - prevR); int Page27 = Light as Emotion abs(currG - prevG); int Page28 = Arduino Final 1 abs(currB - prevB); // Add these differences to the running tally Page29 = ++ Development Images // Render the difference image to the screen
Tumblr Klostardoingsomethingcool This Portfolio has a complete documentation of the course material covered available on Tumblr. Videos which are not available to watch on this development booklet are available to display on www. klostardoingsomethingcool.tumblr. com
The Tumblr Link will take you to the specific blog which has everything in this booklet in the order which was done in class as extra research.
page (4) {
page (5) {
INTRODUCTION
Examples
The Module Descriptor The Prototyping Interactive Experiences module will provide you with an introduction the use of interactive software and hardware, 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 immersible designed experience we must employ more than just technical skills. You will study and analyse technical tools for interaction and Experiential design precedents, and critical interpretation in relation to
Contemporary practice that will support your own practical visualization and modelling 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 Immersible interactions in digital art & design both culturally and contextually. Analytical skill, visual understanding and practical knowledge will underpin the development of creative interactive, immersible 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.
page (6) {
Rain Room - rAndom International
Aurasma
Rain Room is a hundred square metre field of falling water through which it is possible to walk, trusting that a path can be navigated, without being drenched in the process. As you progress through The Curve, the sound of water and a suggestion of moisture fill the air, before you are confronted by this carefully choreographed downpour that responds to your movements and presence.
Aurasmaâ&#x20AC;&#x2122;s image recognition technology uses a smartphoneâ&#x20AC;&#x2122;s or tabletâ&#x20AC;&#x2122;s camera to recognize real world images and then overlay rich media on top of them in the form of animations, videos, 3D models and web pages. Both businesses and individuals use Aurasma to create and share their own augmented reality experiences
page (7) {
Examples
Interactions
Interaction - taste Experience - enjoyment
Fortune Table - Crispin Jones
Swarm Lights - rAndom International
The table gives you a select amount of cards that you hold down in a card slot. This slot slowly heats up to the point that it is unbearable, while heating up the table gives you a ghostly message. This message is a reply to the card that you put into the slot.
Swarm Light designed in 2010 in collaboration with Fredik Pretini is a experimental light installation which subtly reacts to the audible presence of a viewer which is detected using four microphones which picks up the variations of sound
Interaction - touch Experience - happiness, having fun
The first class was an interaction to interactions and understanding what interactions are. In groups we were to go round university and find 50 examples of people that are interacting with any object and what experiences that they got from that interaction.
]
The most popular interaction is push and the experience is movement from one place to another. Other examples include pull, touch, taste.
interaction - push experience - moving from a-b
page (8) {
interaction - rip/pull experience - gathering information
The experiences include enjoyment, gathering information and moving from one place to another.
page (9) {
INTRODUCTION
;
In the beginning we started the module, the first topic was about learning what an interface is. We used traditional interfacing that we knew of already. The result was creating fast prototypes using the mouse and keyboard to get an interactive response
PROCESSING To get used to using processing and creating shapes using anchor points and coordinates,we were to make our names.
page (10) {
We were then to create stationary and moving shapes. circle moves vertically on the screen.
page (11) {
Processing
Processing As we were learning code to make shapes move across the screen, we were also taught to make these shapes stop at the edges and then move back to the start.
Next, we introduced integers, to create shapes that grew and shrank when the mouse was pressed. The colour of the shape was also edited when the shape size changed.
We also learned to make them move both horizontally and vertically across the page.
page (12) {
page (13) {
Processing The next lesson was learning to make selected photos come up by moving the mouse around the screen and when you stop moving the mouse the image pops up.
]
Dice interface Project 1: create a game using a dice interface.
The dice, which pops up a random number once you stop moving the mouse across a screen this lesson was similar to the project with the random images poping up except the images were changed to numbers
page (14) {
page (15) {
Greyhound Lucky dip
Sketches Looking through the processing handbook, i found this sketch and thought Iâ&#x20AC;&#x2122;d try it and edit the sketch.
My project was based on a lucky dip idea where when a customer would like to choose a lucky dip on a race, they move their finger across the screen and the number that the dice face shows that is the number that they put on.
when the mouse moves across the screen, random colors flash up and fill up the space and when the mouse is clicked, the screen is cleared and you can start again.
This was very successful in creating an interaction with customers as they then placed money on the dog or horse on the next race and sometimes, these choices won.
as code was new to me i decided to look at new sketches and see if i could understand the language better.
Customers usually ask for a lucky dip on these races instead of choosing one and this is where my inspiration came from.
page (16 {
page (17) {
;
text
INTroducing sound
We were then taught two different ways to introduce text to processing with the create font and draw font rules. create font allows you to edit the size of the text while draw font, if you try to resize it, the text becomes pixalated. Each of the two ways allows you to add text but you need to decide which way is best for the design. After understanding the difference between the two, we then interacted with the text on screen using the mouse. The text would follow the mouse across the screen and with the create font we could make it increase in size.
page (18) {
page (19) {
Week 4 assignment was to produce a musical instrument using processing. I decided to create a drum. As the mouse moves across the screen different drum beats are heard. I used four options. The video with sound is available on my tumblr. This also introduced the if = else rule. so if the mouse is in 1 quarter of the screen this drum beat will play, else, play this drum beat.
Interface pet
building relationships
In groups of three we were to design an interface pet.
On my own, i wanted to design a retro style game that would be seen in arcades. My target market was people aged 25+ who would have been to the arcades.
The pet we designed, would find its way around the wilderness and go to a certain place to eat where it would grow in size and be happy. then you would move the pet around the Forrest to play where it would still be happy, but when the pet banged into blocks it would become unhappy and shrink to the point where it died.
my game is a square who eats circles and the person with the quickest time would win a Mars bar. As i wanted it to look like something that would be seen in an arcade, i designed the box so the screen was set in with flashing lights to attract attention I also introduced a slot and designed Chloe Coins as credit so the users would interact with the game in the exact way that they woud with those in an arcade. the game went down well and people were really interested to play, though the users werenâ&#x20AC;&#x2122;t interested in using the money to start the game, they usually kept the money.
page (20) {
page (21) {
Introduction to Arduino Arduino is an opensource electronics prototyping platform based on flexible, easy to use hardware and software. The first project after receiving the Arduino kit, was to familiarise myself with the components.
arduino page (22) {
page (23) {
Arduino Uno Starter Kit
Arduino Uno board
Arduino Uno breadboard
Wires that connect the bread board to arduino board and other components
Inspiration
Awesome little project! found on http:// mylifescoop.com/2013/06/05/5-amazingly-coolarduino-projects/ Magic 8 Balls are so twenty years ago. Itâ&#x20AC;&#x2122;s time to update the hand-held fortune-telling device for the 21st century. With an Arduino board and a bit of ingenuity, you can. This project uses a simple LCD screen, a button, and some LED lights encased in an old cigar box to create a fortune-telling robot that displays a fortune, along with a lucky number, whenever someone pushes the button.
Inspiration 2
The Haunted Mansion Singing Busts.
Zoe.
Found on the same website, this project is based on the singing busts from The Haunted Mansion, when in-front of the heads, they begin to sing with a ghostly glow below them.
This design helps keep plants alive, the Zoe has moisture detectors so when the plants get too dry, an alarm is set so it will let you know when to water your plants.
page (24) {
This design lets light control when the pen starts drawing, when the light comes up a detector senses that it is light and begins to draw constantly. The drawing takes all day and finishes at night when it is then dark.
page (25 {
Morse code
Light as emotions
In a group that we were put into for the whole arduino section of Prototyping interactive experiences, we were to create our second names out of Morse code. Teaming up with Denise Allan, our Morse code read Alcorn-Allan.
In our group, which is named TADA. We were to create an object that reacted to light. We decided to make a fish whoâ&#x20AC;&#x2122;s heartbeat blinked at a steady pace until a shark came and bit its tail and the blinking would speed up.
This video is available on Tumblr.
This was done by using an LDR which when covered caused the LED to blink quicker.
The components involved were a red LED, the bread board, the arduino board, a ground wire, a power wire, and two wires to connect the power to the light.
page (26) {
page (27) {
]
Security Camera CCTV is constantly watching us. In the UK, for every 11 people there is a camera watching you. TADA, as a group started thinking about surveillance and what it would be like to watch people 24/7 as a job. We thought that the main human response would be boredom. We found on http://www. psychologytoday.com/blog/ curious/201003/science-showsyou-can-die- boredom-literally, that you can literally die of boredom. We wanted this also as a human response so the robot will act as if it’s short-circuited. TADA designed a camera that watches you walk by and acts as if it takes a photo of you. The camera gives of a flash so the user reacts to it. The camera then tells you what it thinks of you on an LCD screen. As its personifying boredom, its going to say “rude” things, like f**k off, go away and bored. It will also say
Development images
“dfhfg&^&£@” as if it has malfunctioned. This will be done using an infrared sensor for the camera to sense when people are inform of it, an ultra bright LED will be used to act as a flash so people will react to it and get the users attention. The LCD screen will be placed at the back of the box, its hidden at the back at an angle so no one can notice what its thoughts are as thoughts are usually kept to ones self. A mirror is placed underneath the LCD screen so the message is mixed up so its more difficult to read what the message is saying as its upside down and backwards. During the testing people recognized it as a camera and when they moved in front of it the flash would go off, but not many people would recognize that it had the LDC screen behind it with the box’s thoughts which is what’s its aim was.
This is the LCD screen we used to write the comments that the camera was thinking
Trying out the Ultra bright LED for the flash
Infrared Sensor.
The light linked up to the sensor.
Final design
project 2 baby bot Concept Ohh no, you have woken Baby Bot from his nap! He’s just opened his eyes and he’s not a happy baby! He’s flashing bright red and making a horrible noise to show you he’s not a happy baby. Once you go away he goes back to sleep until someone walks by and he wakes up again. TADA, created Baby Bot by using a wooden box painted white with tracing paper attached so the LED’s are visible. There is a buzzer attached that makes the horrible noise and a motor which changes its eyes from closed to open and back again. An infrared sensor is what is used to sense that someone is in front of him so he will wake up when someone walks by. Development The original idea did have Baby Bot dancing or vibrating with excitement but we changed it as a group to make It more child like Children are usually grumpy when woken up and start crying to get someone’s attention so we decided to use this idea instead. page (30 {
page (31) {
Sleeping state
Buzzers to make crying noise
Awake state flashing red and buzzing
Baby bot with the infrared sensor as a dummy
Baby bots box
Baby bots eyes
Final design Special Thanks to my Group TADA, Denise Allan & Megan McManamon
page (32) {
page (33) {