Issuu on Google+

Prototyping Interactive Experiences Portfolio

Ana Teodora Miran 40060431 BDes (Hons) Interior and Spatial Design, Year 3


First task We had to create the illusion of perspective, just by using lines and rectangles. One of the rectangles is fixed in space the other one is controlled by the mouse and the two are connected by 4 lines .

Code: void setup() { size(400,400); fill(255); background(0,0,255); } void draw() { background(255); strokeWeight(1); fill(234,152,152); rect(50,50,40,40); fill(255,0,0); rect(mouseX, mouseY,100,100); strokeWeight(1); stroke(8,8,8); line(50,50,mouseX,mouseY); line(90,50,mouseX+100,mouseY); line(50,90,mouseX,mouseY+100); line(90,90,mouseX+100,mouseY+100); }

Video : http://anamiran.tumblr.com/page/3


Second Task The first thing we had to do for Prototyping Interactive Experience was a movie that had to illustrate interactions between people and technology. For this second task was to select 5 interactions between man and technology from the film of another person and interpret them in Processing.

Code: int moveX,a,b,c,Y; void setup(){ moveX = 0; Y=50; a=64; b=0; c=142; size(800,400); } void draw(){ background(a,b,c); ellipse(moveX,Y,70,70); moveX++; if(moveX>=800){ moveX=0; Y=Y+100; a=64; b=100; c=142; }

if(Y>=Y+200){ a++; } if(moveX>=200){ a++;} if(moveX>=400){ b++; } if(moveX>=700){ a--;} }

1. Through this code I am trying

to show the idea of ‘slide’, the motion that you use on the touchscreen gadgets. The ellipse slides slowly from one side to another while the background changes gradually as the circle passes certain points.

Video : http://anamiran.tumblr.com/page/3


Code: int a,b,c;

void setup(){ size(460,460); a=0; b=0; c=0; } void draw(){ background(0); fill(a,b,c); rect(40,40,100,100); rect(180,40,100,100); rect(320,40,100,100); rect(40,180,100,100); rect(40,320,100,100); rect(180,180,100,100); rect(320,320,100,100); rect(180,320,100,100); rect(320,180,100,100); } void mousePressed(){ if(a==0){ a=80; b=22; c=144; }else{ a=0; b=0; c=0; } }

void keyPressed(){ if(key=='a'){ a=255; } else{ a=0; } if(key=='b'){ b=200; } else{ b=0; } }

2. Whit this code I want to suggest

colour changing lights. The rectangles start one colour, if you press the mouse the rectangles appear and if you press ‘a’ or ‘b’ the colour changes. You can also can create other colours depending what colour the rectangles are when you press another button except ‘a’ and ‘b’.

Video : http://anamiran.tumblr.com/page/3


Code: int a,b,c;

void setup(){ size(400,400); a=0; b=0; c=0; } void draw(){ strokeWeight(5); stroke(a,b,c); if(mousePressed==true){

3. This code is suppose to imitate

those shapes made in the air with sparklers. There is a line that gradually changes colour while you draw. It starts when you press the mouse and continues only if you keep the mouse pressed. You can do any shapes you want. It starts black than gradually go to red, orange, yellow until it becomes white.

line(mouseX,mouseY,pmouseX,pmouseY); a++; if (a>=255) { b++; }else{ Inspiration: b=0; } if (b>=255){ c++;} else{c=0; } if(c>=255){ c--;

}

} }

Video : http://anamiran.tumblr.com/page/3


Code: int a,b,c; void setup(){ size(460,460); a=223; b=180; c=232; } void draw(){ background(0); fill(a,b,c); if(keyPressed){ if(key==’1’){ rect(40,40,100,100); }else if(key==’2’){ rect(180,40,100,100); }else if(key==’3’){ rect(320,40,100,100);} else if(key==’4’){ rect(40,180,100,100);} else if(key==’7’){ rect(40,320,100,100);} else if(key==’5’){ rect(180,180,100,100);} else if(key==’9’){ rect(320,320,100,100);} else if(key==’8’){ rect(180,320,100,100);} else if(key==’6’) rect(320,180,100,100);} }

4. With this code I create the 9

numbers on any phone that you use to dial . Each rectangle appears when the right number is pressed and it looks as if you are dialling.

Video : http://anamiran.tumblr.com/page/3


Code: int a,b,c;

void setup(){ size(400,400); a=0; b=0; c=0; } void draw(){ strokeWeight(5); stroke(0,0,0); line(mouseX,mouseY,pmouseX,pmouseY); background(255,255,255); fill(0); arc(mouseX,mouseY,50,50,0,PI,CHORD); rect(mouseX-15,mouseY-15, 5,30); rect(mouseX+10,mouseY-15, 5,30); ellipse(mouseX,mouseY+25,10,10); if(mouseY<=10){ fill(240,240,40); noStroke(); ellipse(200,200,50,50);} if(mousePressed && (mouseButton == LEFT)){ noFill(); strokeWeight(10); stroke(240,240,40); ellipse(200,200,100,100); }

else if(mousePressed && (mouseButton==RIGHT)){ noFill(); strokeWeight(10); stroke(240,240,40); ellipse(200,200,200,200);} else if(keyPressed){ if (key=='a'){ noFill(); strokeWeight(10); stroke(240,240,40); ellipse(200,200,300,300);} else if(key=='z'){ noFill(); strokeWeight(10); stroke(240,240,40); ellipse(200,200,400,400);} } }

Video : http://anamiran.tumblr.com/page/2

5. This program creates a plug and a light. If

you put in the plug (in the upper part of the screen) a circle appears( light). Then if you press right click, left click, ‘a’ and ‘z’ other hollowed circles appear that if pressed in order look like a light that is getting brighter or dimmer. Each hollowed circle is visible only if the corresponding button is pressed. The actual plug is controlled by the movements of the mouse.


Other codes To be able to understand Processing and to create more complex codes we learned multiple programs that will be very useful. We started with some basic codes, that can be combined to create very interesting projections.

Code: int a,b,c; void setup(){ size(400,400); a=0; b=0; c=0; } void draw(){ strokeWeight(5); stroke(a,b,c); if(mousePressed==true){ ellipse(mouseX,mouseY,40,40); a++; if (a>=255) { b++; }else{ b=0; } if (b>=255){ c++;}

Shapes made of lights.

In this code you can draw shapes with circles that gradually change colour : black- red- orange- yellow- white

else{c=0; } if(c>=255){ c--;

}

} }

Video : http://anamiran.tumblr.com/page/2


Changing circle 1 In this code I created a circle stat changes size and colour while the mouse is moved.

Code: int diameter=100; void setup(){ size(400,400); } void draw(){ background(192); diameter=mouseX*2; println(diameter); fill(diameter,mouseX,diameter); ellipse(200,200,diameter,diameter); }

Video : http://anamiran.tumblr.com/page/2


Changing circle 2 In this code I created a circle stat changes size gradually on its one and becomes red when its diameter is larger than 200. The size increases infinitely because there is no condition that stops it.

Code: int diameter=100; void setup(){ size(400,400); } void draw(){ background(192); diameter=diameter+2; if(diameter >= 200){ fill(255,0,0);} else fill(255); println(diameter); ellipse(200,200,diameter,diameter); }

Video : http://anamiran.tumblr.com/page/2


Bouncing ball 1

Bouncing ball 2

The ball is bouncing from left to right .

This ball goes up and down

Code:

Code:

int diameter=100; int positionX=50; int Switch=0;

int diameter=100; int positionX=50; int Switch=0;

void setup(){ size(400,400); } void draw(){ background(192); if(positionX >= width-diameter/2){ Switch=1; } if(positionX==diameter/2){ Switch=0; } if(Switch==0){ positionX++;} else{ positionX--; } ellipse(positionX,200,diameter,diameter); }

void setup(){ size(400,400); } void draw(){ background(192); if(positionX >= width-diameter/2){ Switch=1; } if(positionX==diameter/2){ Switch=0; } if(Switch==0){ positionX=positionX+5; } else{ positionX--; } ellipse(200,positionX,diameter,diameter); }

Bouncing ball 3 This ball bounces around the window: up down, down up, left right, right left and diagonally.

Code:

int diameter=50; int positionY=50; int positionX=200; int Switch=0; void setup(){ size(400,400); } void draw(){ background(192); if(positionY >= height-diameter/2){ Switch=1; } if(positionY==diameter/2){ Switch=0; http://anamiran.tumblr.com/page/2 } if(positionX>=height-diameter/2){ Switch=2;} if( positionX==diameter/2){ Switch=3;} if(Switch==0){ positionY=positionY+3; } else if(Switch==1){ positionY=positionY-3; positionX=positionX+3; } else if(Switch==2){ positionX--;} else if (Switch==3){ positionX++; positionY--; } ellipse(positionX,positionY,diameter,diameter); }


Interaction Way of interacting with a vending machine. You start by pressing a button thinking you will get a delicious Bounty…but no…it is in fact a tomato. You try again, maybe a Twix…but again no..it’s blackberries. Maybe some delicious McCoy’s crisps…not a chance…it’s bananas. Last try, maybe it is more lucky with some Popchips. Pressing the button, waiting…but no…no delicious crisps for me today just some broccoli.

Code: PImage a,b,c,d,e,f,g,h,i,j,k,l,m,q,r,s; int n=90, o=230, p=370,t=510; void setup(){ size(600,700); a=loadImage(“14.jpg”); b=loadImage(“15.jpg”); c=loadImage(“18.jpeg”); d=loadImage(“19.jpg”); e=loadImage(“a.jpg”); f=loadImage(“b.jpg”); g=loadImage(“c.jpg”); h=loadImage(“d.jpg”); i=loadImage(“e.jpg”); j=loadImage(“f.jpg”); k=loadImage(“g.jpg”); l=loadImage(“h.jpg”); m= loadImage(“5.png”); q=loadImage(“12.jpg”); r=loadImage(“Banana.jpg”); s=loadImage(“2.jpg”); imageMode(CENTER); } void draw(){ background(192); image(b,230,90,100,100); image(c,370,90,100,100); image(d,90,230,100,100); image(f,370,230,100,100); image(h,230,370,100,100);

image(i,370,370,100,100); image(j,90,510,100,100); image(k,230,510,100,100); image(e,230,o,100,100); image(g,90,p,100,100); image(l,370,t,100,100); image(a,90,n,100,100); noFill(); strokeWeight(7); stroke(0); rect(20,20,420,670); rect(440,20,140,670); strokeWeight(2); stroke(255,255,255); rect(470,400,20,20); rect(470,430,20,20); rect(470,460,20,20); rect(500,400,20,20); rect(500,430,20,20); rect(500,460,20,20); rect(530,400, 20,20); rect(530,430,20,20); rect(530,460,20,20); rect(470,490,20,20); rect(500,490,20,20); rect(530,490,20,20); if(n>=350){

image(m,90,n,100,100);} if(o>=380){ image(q,230,o,100,100); } if(p>=500){ image(r,90,p,100,100); } if(t>=600){ image(s,370,t,100,100); } } void keyPressed(){ if(key==’1’){ n=n+5; fill(0); rect(470,400,20,20);} else if(key==’2’){ o=o+5; fill(0); rect(500,430,20,20); } else if(key==’3’){ p=p+5; fill(0); rect(470,460,20,20);} else if(key==’4’){ t=t+5; fill(0); rect(530,490,20,20);} }

http://anamiran.tumblr.com/page/3


Images 1

Images 2

This code inserts images in processing and controls with the help of the mouse their position . The images appear only if the Y coordinate is larger that 100.

This code inserts images in processing and controls the dimensions of the pictures. The first image appears when Y is larger than 100 and the second one appears when X is larger than 200.

Code:

Code:

PImage a; PImage b;

PImage a; PImage b;

void setup(){ size(600,600); a= loadImage("001.jpg"); imageMode(CENTER); b= loadImage("002.jpg"); imageMode(CENTER); noCursor(); }

void setup(){ size(600,600); a= loadImage("001.jpg"); imageMode(CENTER);//de unde controlezi img. b= loadImage("002.jpg"); imageMode(CENTER); noCursor();// daca vrei sa nu mai apara mouse-ul. } void draw(){ background(0); if(mouseY>100){ image(a,300,300,mouseX,mouseY); } if(mouseX>=200){ image(b,300,300, mouseY,mouseX); } }

Video : http://anamiran.tumblr.com/page/2

void draw(){ background(0); if(mouseY>100){ image(a,mouseX,mouseY,a.width/8,a.height/8); image(b,mouseY,mouseX, 300,200); } }


Mouse pressed and music This code inserts music in to processing. The window is divided in 4 parts. When you left click the mouse on one side a music starts, when you press another one the first song is paused and another one starts and so on with the other parts.

Code: import ddf.minim.*; Minim minim; AudioPlayer player1; AudioPlayer player2; AudioPlayer player3; AudioPlayer player4; void setup(){ size(400,400); minim = new Minim(this); player1 = minim.loadFile("1.mp3"); player2 = minim.loadFile("2.mp3"); player3 = minim.loadFile("3.mp3"); player4 = minim.loadFile("4.mp3"); } void draw(){ line(width/2,0,width/2,height); line(0,height/2,width,height/2); if(mousePressed==true){ if(mouseX<width/2 && mouseY<height/2){ fill(255); rect(0,0,width/2,height/2); player2.pause(); player3.pause(); player4.pause(); player1.play(); }

else if(mouseX>width/2 && mouseY<height/2){ fill(255); rect(width/2,0,width/2,height/2); player3.pause(); player4.pause(); player1.pause(); player2.play(); } else if(mouseX>width/2 && mouseY>height/2){ fill(255); rect(width/2,height/2,width/2,height/2); player2.pause(); player4.pause(); player1.pause(); player3.play(); } else if(mouseX<width/2 && mouseY>height/2){ fill(255); rect(0,height/2,width/2,height/2); player2.pause(); player3.pause(); player1.pause(); player4.play(); } } else{ background(192); line(width/2,0,width/2,height); line(0,height/2,width,height/2);} }

http://anamiran.tumblr.com/


Music without mouse pressed This code inserts music into the program. The window is still divided in 4 parts but the music starts without the mouse click , you just have to move the mouse cursor around the part that you want to activate.

Code: import ddf.minim.*; Minim minim; AudioPlayer player1; AudioPlayer player2; AudioPlayer player3; AudioPlayer player4;

void setup(){ size(400,400); minim = new Minim(this); player1 = minim.loadFile("1.mp3"); player2 = minim.loadFile("2.mp3"); player3 = minim.loadFile("3.mp3"); player4 = minim.loadFile("4.mp3"); } void draw(){ background(0); stroke(255); line(width/2,0,width/2,height); line(0,height/2,width,height/2); if(mouseX<width/2 && mouseY<height/2){ fill(255); rect(0,0,width/2,height/2); stroke(49); player2.pause(); player3.pause(); player4.pause(); player1.play(); }

else if(mouseX>width/2 && mouseY<height/2){ fill(255); rect(width/2,0,width/2,height/2); player3.pause(); player4.pause(); player1.pause(); player2.play(); } else if(mouseX>width/2 && mouseY>height/2){ fill(255); rect(width/2,height/2,width/2,height/2); player2.pause(); player4.pause(); player1.pause(); player3.play(); } else if(mouseX<width/2 && mouseY>height/2){ fill(255); rect(0,height/2,width/2,height/2); player2.pause(); player3.pause(); player1.pause(); player4.play(); } else{ background(192); line(width/2,0,width/2,height); line(0,height/2,width,height/2);} }

http://anamiran.tumblr.com/


Project 1 “View out the window at night” Installation For this project we had to create an installation in Merchiston Tower.

Site research The Tower was built in the middle of the 15th century, and it is most notable for being the home of John Napier, the eighth Laird of Merchiston and inventor of logarithms who was born there in 1550. The Tower is an example of the medieval tower house, being built on the familiar “ L “ plan of many of Scotland’s fortified towers. Now the tower stands in the centre of Napier University’s Merchiston campus. The university has taken out large sections of wall on the north part of the tower to accommodate a corridor which runs through it, connecting the campus buildings The tower is in contrast with the rest of the buildings in the campus, both on the outside and inside. It maintains it’s original style and the other buildings are built around it. The first plan is of the front part of Merchiston Campus and highlighted in orange Merchiston Tower. There are also orange and blue arrows that show the fact that a lot of people use the corridor in both directions. The second one is the plan of Merchiston Tower and it also shows the location of the projector in the space and where the projection is going to be. The actual space in the tower is 2.4 m high and around 3.5 m wide. On the right side there is a very small window that is deep in the wall but the sun doesn’t come through very clear because the glass is translucent. The space feels enclosed even though 2 of the 4 sides are open. Before and after there are a lot of windows and light while in the corridor through the tower there are none. It is pretty dark even with the artificial lights: floor lights and spotlights on the ceiling that are controlled by two switches on the wall .You can’t see nature , you are completely separated from it. The space is widely used by many people that go in both directions. It is a transit space, a space that connects 2 of the campus buildings. People just pass through, they don't spend any time there, they don’t pay attention to what happens in the corridor. Both floor and walls are different from the before and after sections of the building.


Concept With this project wanted to create something that attracts the attention of those that pass through the corridor. Something that would make people stop and look. The idea appeared when I noticed the contrast that exists between the corridor in the tower and the sections of buildings that are before and after. The tower is darker, with no windows, and it separates the people that pass through it from nature, you feel like you are in a little box. Also I thought about the fact that before the rest of the university was built around it, Merchiston Tower was surrounded by nature not by a lot of buildings. I wanted to incorporate these 2 facts in my projection on the wall so I created the starry night sky with a wolf on one side that howls at the full moon in the background. I considered this to be an image that would show my interpretation of the past surroundings of the building when the night sky would have been covered in bright glowing stars. Now because the light of the city their light appears dimmer and sometimes barely noticeable.


Process

1.First I created just the black background

2.Than I add the small circles that will be the stars http://anamiran.tumblr.com/page/2

3.After that create the shooting stars. http://anamiran.tumblr.com/

http://anamiran.tumblr.com/

4. Than I added the 6 positions of the wolf

5.And the last step is to insert the sound of the forest at night and the howl of the wolf.


Testing the projection on site

http://www.youtube.com/watch?v=ddQw4BbZflo&feature=youtu.be

http://www.youtube.com/watch?v=ErmkKS7qHZ0&feature=youtu.be

This is the projection during the day. The light makes it look very pale and you can barely see the stars. Also here I tried to cover the window and I took the 2 chairs from the sides of the wall. Even if it wasnâ&#x20AC;&#x2122;t to its full strength the projection still attracted the attention of people that passed through. Some asked what it is for others asked how I did it and others just said it looks cool.

The second testing happened when it was a little bit darker outside. There is a noticeable difference in the projection. It is more intense, the contrast is obvious and you can definitely see the stars. The image is also a lot clearer. The best way to show this is definitely when it is darker outside. For this test I decided to remove only one of the chairs and not cover the window because I thought they added to the effect of the projection.


Final product

http://anamiran.tumblr.com/


Project 2

Tangible time The brief for this project was to design in a group of 3 a new visual experience for telling the time. It had to have an element of interactivity and response with the users. The key to this brief was not only visualising the display of time but how the userâ&#x20AC;&#x2122;s actions create a responsive experience. The new design had to include the work of Arduino and Processing.


First we started with something simple: just to use the Arduino to light an LED light. After that we had to light 3 LED lights and make them pulsate in Morse code each of our names. After that we learned how to connect dimmers to the Arduino.


We had to work in groups of 3 . The name of our group was : Team Rocket.

TEAM

ROCKET

- We want to play with light and sound, and the different interactions that you can create with both

- We are also looking to attract lot of people into our interactions: the more, the merrier. - We want to find a balance between the abstract and the practical side of generative art: FUN!


We started to think what we have to include in our project and we came up with the braille clock. We wanted to create on object that means something. The braille clock is both for the visually impaired people and for people that see perfectly well. For the visually impaired they would be able to touch the clock and understand what time it is, while for the people that see they would have to concentrate at the clock. The object is created out of 3 disks : seconds, minutes and hours and a light underneath each one shows what time it is.


The project will consist of a box that will hold the Arduino and the other components, 2 Arduino boards one master and one slave, 3 disks that are controlled by 3 motors that are at different heights, LED lights blue that are blinking and white ones that are useful in telling the time. The top of the box in wood while the sides are made from translucent acrylic boards. The disks are made from bright orange transparent acrylic boards. To cut the Braille numbers in the disks we used the laser cutter. The poster was created in illustrator and carved with the laser cutter.


The project will consist of a box that will hold the Arduino and the other components, 2 Arduino boards one master and one slave, 3 disks that are controlled by 3 motors that are at different heights, LED lights blue that are blinking and white ones that are useful in telling the time. The top of the box in wood while the sides are made from translucent acrylic boards. The disks are made from bright orange transparent acrylic boards. To cut the Braille numbers in the disks we used the laser cutter. Before we glued the disks on the motors we tested them on their own to see if they are rotating properly. We also had an ultrasonic sensor. The sensor will feel the distance between the clock and a person and that will influence the speed of the clock. If a person is close it goes slower, if a person is further it goes faster and if nobody is in the line of sight of the sensor the clock works normally.


This is the final clock before the exhibition and what is inside the box


Code for the fading effect of the lights: #define echoPin 7 // Echo Pin #define trigPin 8 // Trigger Pin int led = 11; // the pin that the LED is attached to int led2 = 5; int brightness = 0; // how bright the LED is int fadeAmount = 5; // how many points to fade the LED by

// reverse the direction of the fading at the ends of the fade: if (brightness == 0 || brightness == 255) { fadeAmount = -fadeAmount ; } // wait for 30 milliseconds to see the dimming effect delay(10); }

// the setup routine runs once when you press reset: void setup() { // declare pin 9 to be an output: pinMode(led, OUTPUT); pinMode(led2, OUTPUT); Serial.begin(9600); } // the loop routine runs over and over again forever: void loop() { analogWrite(led, brightness); analogWrite(led2,brightness); // change the brightness for next time through the loop: brightness = brightness + fadeAmount;

http://youtu.be/ZFknp7DjJ-c


Code for motors and sensor: #include <Servo.h> #define echoPin 7 // Echo Pin #define trigPin 8 // Trigger Pin

void loop() { {

digitalWrite(trigPin, HIGH); delayMicroseconds(10);

Servo seconds; Servo minutes; Servo hours; int counter = 0; int mins = 2; int hrs = 4; int sensor = 1000; int led = 11; // the pin that the LED is attached to int led2 = 5; int brightness = 0; // how bright the LED is int fadeAmount = 10; // how many points to fade the LED by int maximumRange = 200; // Maximum range needed int minimumRange = 0; // Minimum range needed long duration, distance; // Duration used to calculate distance void setup() { seconds.attach(9); minutes.attach(3); hours.attach(2); pinMode(trigPin, OUTPUT); pinMode(echoPin, INPUT); Serial.begin(9600); pinMode(led, OUTPUT); pinMode(led2, OUTPUT); }

digitalWrite(trigPin, LOW); delayMicroseconds(2);

digitalWrite(trigPin, LOW); duration = pulseIn(echoPin, HIGH); }

distance = duration/58.2;

if (distance >= maximumRange || distance <= minimumRange){ Serial.println("-1"); } else { Serial.println(distance); } delay(50); if( distance == -1){ sensor = 1000; } else if(distance > 150){ sensor = 100; } else if(distance < 20){ sensor = 5000; } else{ sensor = 1000; } if(counter == counter){ //PULSE

analogWrite(led, brightness); analogWrite(led2,brightness); brightness = brightness + fadeAmount; { if (brightness == 0 || brightness == 255) { fadeAmount = -fadeAmount ; } delay(sensor); } } if((counter % mins) == 0) { if((counter % hrs) == 0) { minutes.write(88); seconds.write(88); hours.write(88); delay(100); minutes.write(90); seconds.write(90); hours.write(90); delay(sensor); } else { minutes.write(88); seconds.write(88); delay(100); minutes.write(90); seconds.write(90); delay(sensor); } } else { seconds.write(88); delay(100); seconds.write(90); delay(sensor); } counter++; }


Final product


Videos of testing and final product: • • • • • •

http://youtu.be/Bhg2ujCaZcA http://youtu.be/ncr-7BAytBw http://youtu.be/ZFknp7DjJ-c http://youtu.be/7tYQXTE73kA http://youtu.be/4I5rPbW9qXQ http://youtu.be/G0Ul4oCXUxg


Tumblr account:

http://anamiran.tumblr.com/


Prototyping interactive experiencesf