Fiorella modolo "Prototyping Interactive Experiences Development Booklet" by Fiorella Modolo

fiorella modolo. 40056892 DES09124 2013-4 TR1 001 - Prototyping Interactive Experiences

final booklet of development.

first project

The brief for this project was to: “Document through photograph and film 50 examples of interactions between humans and mobile technologies, humans and space, and technologically enhanced spaces”.

Full video: https://www.youtube.com/watch?v=O41vIIWrtTw The interaction were mainly filmed in: - Edinburgh - King’s Cross, London - London Design Week

processing

Experiments with Processing from the 23rd of September onwards: - These sketches were created to understand how to use shapes, strokes and basic colours.

The main shapes that were used were: rectangle(); ellipse(); fill(); stroke(); etc

MouseX and MouseY commands: - The MouseX and MouseY comands can be added to the code to replace certain fixed x and y elements. In this way the movement of the mouse directly influences the shape of the geometrical elements, but also the colours of borders, background and the number of elements.

Processing reads commands with coordinates, such as (50,50), but also in terms of fractions. These examples show how on a screen of 400 px, if an x position is 5, it can be written as: - width/8 if it is 100 it will be: width/8+50 2*width/8 width/4 And so on.

Other ways to use mouseX and mouseY. These commands can be placed in the code to change colour, stroke and position on shapes. In this case they were used to make lines and rectangles change one in relation to the other. For example: - line(150, 50, mouseX+100, mouseY+100); - rect(mouseX-100, mouseY-100, 200, 200); ...

interactions

For this assignment the brief was to watch a chosen video of interactions from project one, choose various examples of interactions and convert 5 them into abstract Processing sketches. Video: http://www.youtube.com/watch?v=sqWTxkwvUXI&feature=youtu.be

1st Interaction: 24-hour Tesco in Leytonstone. The interaction related to the picture is: taking products from a structured environment. I decided to represent it having a circular shape moving down the main aisle. The long rectangles are the shelves and the products on them have different colours. Only some of them are the same shape and colour of the moving circle (a customer), and those are the ones that are going to be taken.

For this sketch I mainly used rect() and ellipse() for the circles. MouseY was used to make the main circle move vertically. http://www.openprocessing.org/sketch/112421/embed/?width=600&height=600&border=true 2nd Interaction: Bridge near the Tate Modern. The movement was detected with sensors before and under the bridge. The vault would glow but not the walls. For this reason the blocks before and after the bridge represent the sensors, and the black lines are the walls that donâ&#x20AC;&#x2122;t react. When people (the squares), walk past, the symbol for bridge reacts.

The sketch was a combination of rectangles and lines and mouseY in the fill() commands make the colour change. MouseY was also put in the rectangles so they would move vertically. 3rd Interaction: The Tube.

I followed a tutorial on processing.org about curves. Itâ&#x20AC;&#x2122;s quite nice and relatively easy to follow and explains all the different curves that can be achieved with Processing. Arc(), curve() and creating splines seems still tricky, so for this sketch I tried to create continuous spline curves with the generic code: stroke(0,25,255); strokeWeight(3); noFill(); beginShape(); curveVertex(100,100); curveVertex(100,100); curveVertex(150,150); curveVertex(300,280); curveVertex(350,250); curveVertex(500,150); curveVertex(500,150); endShape(); Where the first 2 and last 2 curveVertex() are the starting point, first control point, last point and last control point of the curve. The curveVertex() in the middle control how the curve goes in the centre of it. To have a continuous spline first point/first control point and last point/last control point should match.

The 4th interaction takes place in a bridge on the Thames. To represent it I focused on the idea of a bridge as a gathering point from different points scattered around town to let things flow from one side on the river to the other.

The sketch was created using a hierarchy or lines. The rect() in the middle change the colour if the mouse moves from one side to the other; that was possible using mouseX on the fill() command.

The 5th interaction was an installation at Design Junction and the London Design Festival. Different printers printing different receipts were aligned under colourful credit cards. To get a receipt with info about each credit card, one had to activate the printer related to it.

I used curveVertex() trying to make the splines smoother. To make the shapes change colour I tried to use the commands: if(mousePressed == true){ fill(255,0,0); }else{ fill(255);

Sketches using variables with the int function applied with the diameter of an ellipse. Once the value of the diameter is set in the code, it can be used in the ellipse() but also in fill() to control how the colour changes. If mouseX (or mouseY) is typed into the diameter value, the dimensions of the ellipse change with the position of the cursor. The “if” and “else” fucntions can also be used to make the colour of the ellipse changing depending to its dimensions.

and the if condition can also be used to make the shape of the ellipse change into another shape.

It is also possible to make the circle move independently to the right and make it bounce back creating a loop. That is possible using int Switch to have different settings in which the loop can work. The circle can stop on the right border (above), or bouncing back (below).

Codes to insert, resize, zoom and move images in a Processing sketch, with also the addition of shapes.

interactive objects

Project brief: â&#x20AC;&#x153;You must create a new and interesting interaction between an existing object and the user by redesigning the interaction that object is designed to have with usâ&#x20AC;?. After a walk around Merchiston with my group, I picked the water dispenser in the corridor of the design studios. As much as it is a functioning object, it seemed rather abandoned to itself in the middle of the corridor.

Moodboard and further inspiration for the project: Creation of an interactive vending machine/ water dispenser with an interesting personality. Existing examples: - an automatic vending machine that is actually human. - a vending machine that recognises if people are happy and gives them free ice cream if they are. - a roulette and ironic vending machine that gives random products as long as you insert coins. - a passive aggressive vending machine. You insert coins and decide which object the machine is going to smash for you. Vending machines donâ&#x20AC;&#x2122;t have necessarily to be positive, but they can also be ironic, mean or sarcastic.

http://www.openprocessing. org/sketch/113832

Codes to make coloured rectangles appear in certains parts of the sketch with mousePressed, if, and else conditions and && command.

Importing audio files into processing with the minim library, creationf of data folders and renaming the files.

Among the other commands, when importing an audio library the main ones are: - player.play(); - player.pause(), - player.stop(); combining this combines means being able to play certain tracks at certain times without having the overlapping.

Links to other audio interaction: - http://www.openprocessing.org/sketch/115014 - http://www.openprocessing.org/sketch/115009 - http://www.openprocessing.org/sketch/115007 - http://www.openprocessing.org/sketch/115008

Experiments on weavesilk.com:

generative art

by Yuri Vishnevsky

“Generative art is neither programming nor art, in their conventional sense. It’s both and neither of these things. Programming is an interface between man and machine; it’s a clean, logical discipline, with clearly defined aims. Art is an emotional subject, highly subjective and defying definition. Generative art is the meeting place between the two.

from “Generative Art“ by Matt Pearson

ld or W

Computers r pi ns

i of n io

ld or W

GenArt

Organic

l of ic og

Emotion Aesthetics

The cold language of programming and logic comes to touch with inspiration and spontaneity in Generative Art. Computers explore organic forms, the world of emotions and aesthetic values through the artist. The AIM of Generative Art is to â&#x20AC;&#x153;make something beautifulâ&#x20AC;&#x153;.

Generative Art is defined in terms of the methods used to create it, not in terms of the final outcomes and the different styles achieved. Artist + a mechanism that autonomally generates the art.

assigned space

The designated space for this project is the passageway through Napier Tower in Merchiston Campus., more specifically the NorthWest wall, the ceiling and floorspace. The space has an aesthetic of its own compared to the rest of the university building which is not always appreciated by the crowd that walks quickly to the JKCC and the rest of the campus. Stone walls and 4 carved wooden chairs create an atmosphere of its own.

Design studios

offices

Design studios shop

other building, canteen

JKCC ECCI student hub

Main directions of people walking through the space.

cafe

way out

library

Elements in the space and how the users react to them: Timber chairs: the passageway is part of the original Napier tower and the chairs (together with the stone walls) are the clear sign that that part of the building is historical. The chairs could be removed, but they might play an interesting role in the project. People walking past at the moment donâ&#x20AC;&#x2122;t seem to pay attention to them. Window: the window created a deep tunnel of dim light in the corridor. The light is not direct and it does not shine through, but it could cause an element of disturbance for the projection, for this reason the window is going to be covered with a panel.

Ideally people should be encouraged to sit on the chairs and be part of the projection, to reevaluate the passageway. Abstract elements â&#x20AC;&#x153;growingâ&#x20AC;? directly from the chairs to create a big coil on top of the wall would create an appealing design. The Perlin Noise function is ideal for this purpose, but also the random() function.

Recursive trees or horizontal flows of objects could also be appealing, even thought the idea of falling shapes seems more appropriate for the space.

Design development using Perlin Noise:

Modifying the PVector coordinates was I was trying to achieve was two separate streams of lines moving upwards. Changing the PVector didnâ&#x20AC;&#x2122;t work, and changing the i++ growing factor of the particle to iâ&#x20AC;&#x201D; did not work. This function seems also visually heavy.

Further development: - On “Generative Art”, Matt Pearson talks about recursive trees (pg 159 onwards), which could have been a cool tool to explore. There seems to be a mistake in the code though. - OpenProcessing has lots of examples of engaging design to get some inspiration aboutfree falling objects. Space Rain by Jerome Herr, coveys the same results that the design for the Napier Tower wants to achieve. - From this code the “rain” was limited to certain areas of the screen so it would cover only one, or more chairs. -Placing a black rectangle on top of the rain seemed the most logical approach to take. Unfortunately, as much as visually this trick works, the rain is considerably slowed down by it.

final design

Change frame rate to make it more flowy

Colour of the particles from random to white

Original sketch moved to the top left corner

Bigger particles.

- to create a second flow, compatible with the white stream of particles, I used the random() function applied to rect(). - I put red as default but other colours could work too: - With a quick questionnaire I asked people in Merchiston walking past the location what colours they thought would be appealing and appropriate for the space. Purple seems to be the most popular one. - Keeping both flows white with different chairs seems an interesting option, too.

Think about having 2 chairs with 2 streams of light flowing down on them. Considering that one stream is white, which other colour would you choose for the other stream? warm

cold

red

maroon

bright green

bright blue

light blue

purple pink yellow

7 2

testing - The space given by the brief if relatively small. - Positioning a projector in here could be difficult, especially if we consider cast shadows by passers by. placing the projector on the floor close to the wall could be an option but the width of the projection could not be enough to cover the wall. - Moving the projector in the middle of the space seems out of the question. - The best option is to use mirrors. The projector would face the opposite direction from the wall, and it would be close to it, but thanks to curved mirrors the projection would be wide enough. People walking past wouldnâ&#x20AC;&#x2122;t trip on it.

Two independent white streams flowing on the chairs and on the people sitting on them. The chairs are not the same two by accident, but if both the floes are white, two different chairs create an interesting effect.

arduino Arduino Starter Kit including: - Arduino Uno board - USB cable - simple and RGB leds - Wires - Resistors -Capacitors -Motor -Breadboard

leds

Ardiuino & leds: Simple connection to make a led blink.

To have a basic blinking led: - connect a red wire from 5V to a + on the breadboard and a black wire from GND to a - connect a resistor from a + on the breadboard to a space in the middle of it - plug a led (being careful about the right direction to keep) from a space aligned to the resistor to another point in the middle of the board. - plug a black wire from a point aligned to the other end of the led to a - on the board. - plug it with the USB. This circuit will light up the led.

Arduino task: spell your name with the Morse code using blinking leds: Fiorella (..-. .. â&#x20AC;&#x201D;- .-â&#x20AC;Ś-.. .-.. .-),

int led = 13; pinMode(led, OUTPUT); } void loop() { digitalWrite(led, HIGH); digitalWrite(led, LOW); delay(1000); digitalWrite(led, HIGH); delay(30); digitalWrite(led, LOW); delay(1000); digitalWrite(led, HIGH); delay(1000); digitalWrite(led, LOW); delay(1000); digitalWrite(led, HIGH); delay(30); digitalWrite(led, LOW); delay(1000);

digitalWrite(led, HIGH); delay(1000); digitalWrite(led, LOW); delay(1000);