prototyping interactive experiences
Post on 10-Mar-2016
216 Views
Preview:
DESCRIPTION
TRANSCRIPT
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/
top related