Prototyping interactive experiencesDigital Booklet

Sam valentine

Research

Through the use of film and photographs I conducted research into how people react

with technology on a daily basis and I also looked at already existing pieces of

generative art suing light and movement.

First attempt at Processing

Here I was learning the basics of processing, I was attempting to create a box that

moved with the mouse and changed colour and size as you moved it.

The challenge here was to create two circles that moved independently of each other

on both the X and Y axis. This was to learn how to make objects move continuously on

a single plane back and forth.

Challenge one

This was a continuation of challenge one, here we had to tweak the already existing

code we had to make the circles leave a trail.

Challenge two

Here I was trying to incorporate images with the interaction of the mouse, AS you

move the mouse up and down the images follow. The quicker you move the mouse the

bigger the gaps between and the slower you move the mouse the smaller the gaps

become.

Challenge three

For this challenge I was trying to combine linear movement with changing colour, as

the cube moves up the y axis it changes colour through different shades of green.

Challenge four

Here I was incorporating sound into my processing, by clicking on each album that

starts the song and then clicking on the other album will pause the first and start the

new track.

Challenge five

With these two pieces when you click each they play and audio file which is a quote

from the movie, this was more testing with sound and Processing.

Challenge five

Presentation 1

Generative art piece

SITE

• The site I was assigned was the new entrance to the music department from the end of the design corridor.

• Due to the site being a relatively new addition to the building the foot fall through the area is not great. • I wanted to design something that would attract people to the area taking more traffic off the main

corridor.

CONCEPT

• My concept was to study the movement of people through the space.

• I wanted to create something that would represent the foot walk through the

area.

• I also wanted to create something that would attract people to the area.

RESEARCH

here I was exploring linear forms, I wanted to show my

interpretation of movement through a linear form, I also used

these examples to help me understand how to make variations in

the code.

DEVELOPMENTS

DEVELOPMENT 1 DEVELOPMENT 2

DEVELOPMENT 3

int num = 200;int range = 20;

float[] ax = new float[num];float[] ay = new float[num];

void setup() {size(1024, 768);for(int i = 0; i < num; i++) {ax[i] = width/2;ay[i] = height/2;

}frameRate(30);

}

void draw() {background(1);

for(int i = 1; i < num; i++) {ax[i-1] = ax[i];ay[i-1] = ay[i];

}

ax[num-1] += random(-range, range);ay[num-1] += random(-range, range);

ax[num-1] = constrain(ax[num-1], 0, width);ay[num-1] = constrain(ay[num-1],

height/4, height/2);

for(int i=1; i<num; i++) { float val = float(i)/num * 300+ 51;stroke(val);line(ax[i-1], ay[i-1], ax[i-1], ay[i-1]);

}}

CODE FOR DEVELOPMENT 1

CODE FOR DEVELOPMENT 2

int num = 200;int range = 20;int diameter = 50;int positionX = 50;int Switch = 0;

float[] ax = new float[num];float[] ay = new float[num];

void setup() {

size(1024, 768);for(int i = 0; i < num; i++) {

ax[i] = width/2;ay[i] = height/2;

}frameRate(30);

}

void draw() {

background(1);

Afor(int i = 1; i < num; i++) {

ax[i-1] = ax[i];ay[i-1] = ay[i];

}

ax[num-1] += random(-range, range);ay[num-1] += random(-range, range);

ax[num-1] = constrain(ax[num-1], 0, width);ay[num-1] = constrain(ay[num-1], height/4,

height/2);

fill(random(153),138,96,92);

if(positionX >= width-diameter/2){Switch = 1;

}if(positionX == diameter/2){

Switch = 0;}

if(Switch == 0){ positionX++; //position = position + 1;

}else {

positionX--; }

for(int i=1; i<num; i++) { float val = float(i)/num * 204.0 + 51;stroke(val);line(ax[i-1], ay[i-1], ay[i], ay[i-1]);

}}

RANDOM MOVEMENT

Whilst looking at the movement of people throughout the

space I noticed everyone moves randomly, this was a

major inspiration to my design and ultimately affected the

final outcome..

FINAL IDEA

This was my final design for the generative art piece, this is to symbolise the footfall

through the given area, the small lines represent the foot prints and they move

randomly across the image to show that movement is random.

int num = 200;int range = 20;

float[] ax = new float[num];float[] ay = new float[num];

void setup() {

size(1024, 768);for(int i = 0; i < num; i++) {

ax[i] = width/2;ay[i] = height/2;

}frameRate(30);

}

void draw() {

background(1);

for(int i = 1; i < num; i++) {ax[i-1] = ax[i];ay[i-1] = ay[i];

}

ax[num-1] += random(-range, range);ay[num-1] += random(-range, range);

ax[num-1] = constrain(ax[num-1], 0, width);ay[num-1] = constrain(ay[num-1], height/4,

height/2);

for(int i=1; i<num; i++) { float val = float(i)/num * 204.0 + 51;stroke(val);line(ax[i-1], ay[i-1], ax[i], ay[i-1]);

}}

CODE

Presentation 2

Tangible time

Tangible Time

For our second project we had to create something that related to

time and was also interactive. In groups of three we has three weeks

to design and make our time telling devices and we would then

show them at an exhibition.

Group Name- Team Rocket

Final Idea- A braille Clock

Concept- Perception of time, the closer you stand to the clock the

slower time goes, as if you were watching the clock, the further back

you stand the quicker time goes, Represents how different people

perceive time.

Getting to know the arduino kit

Developing the clock

These are some initial sketches that me and

my group came up with. We were looking at

different ways to mount and rotate the

circular disks.

Developing the clock

Developing the clock

Developing the clock

Creating the Poster

As part of the final hand in we had to have an A2 poster detailing our product, as a group we

decided to engrave our poster on to board of plywood. This was in keeping with our clock as

the arduino boards were mounted on a board of plywood.

The finished Clock

#include <Servo.h>

#define echoPin 7 // Echo Pin

#define trigPin 8 // Trigger Pin

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);

}

void loop() {

{

digitalWrite(trigPin, LOW);

delayMicroseconds(2);

digitalWrite(trigPin, HIGH);

delayMicroseconds(10);

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;

{

Code for the Clock

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++;

}

The Exhibition

This was our final layout for our exhibition, we mounted the clock on a Plywood board

beside our A2 poster, we also had a monitor showing the creative process we went through

to get our final idea. The Exhibition lasted two hours with various staff members of the

university and students coming to view our work.

Links

YouTube Link- Testing Arduino Videos

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

• http://youtu.be/2qjMVkTc4vg

• http://youtu.be/7zkhRCvuhrU

• http://youtu.be/FYJ1se4h9G4

• http://youtu.be/-2zNQ15HJ_8

• http://youtu.be/l7hXuXxW-t8

• http://youtu.be/UJXAX_g1KNA

• http://youtu.be/EW65APG9G3c

• http://youtu.be/Gk1g9KAWeu8

Other Links

• http://samvalentine20.tumblr.com/