Prototyping interactive experiences

Digital 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 1DEVELOPMENT 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/• http://issuu.com/samvalentine8/docs/issuu_booklet_pdf