Prototyping interactive experiences (Revised)

  • Published on
    11-Mar-2016

  • View
    212

  • Download
    0

Embed Size (px)

DESCRIPTION

 

Transcript

<ul><li><p>Prototyping interactive experiences</p><p>Digital Booklet</p><p>Sam valentine</p></li><li><p>Research</p><p>Through the use of film and photographs I conducted research into how </p><p>people react with technology on a daily basis and I also looked at already </p><p>existing pieces of generative art suing light and movement. </p></li><li><p>First attempt at Processing</p><p>Here I was learning the basics of processing, I was attempting to create a </p><p>box that moved with the mouse and changed colour and size as you moved it. </p></li><li><p>The challenge here was to create two circles that moved independently of </p><p>each other on both the X and Y axis. This was to learn how to make objects </p><p>move continuously on a single plane back and forth. </p><p>Challenge one</p></li><li><p>This was a continuation of challenge one, here we had to tweak the already </p><p>existing code we had to make the circles leave a trail. </p><p>Challenge two</p></li><li><p>Here I was trying to incorporate images with the interaction of the mouse, </p><p>AS you move the mouse up and down the images follow. The quicker you move </p><p>the mouse the bigger the gaps between and the slower you move the mouse </p><p>the smaller the gaps become. </p><p>Challenge three</p></li><li><p>For this challenge I was trying to combine linear movement with changing </p><p>colour, as the cube moves up the y axis it changes colour through different </p><p>shades of green.</p><p>Challenge four</p></li><li><p>Here I was incorporating sound into my processing, by clicking on each </p><p>album that starts the song and then clicking on the other album will pause </p><p>the first and start the new track. </p><p>Challenge five</p></li><li><p>With these two pieces when you click each they play and audio file which is a </p><p>quote from the movie, this was more testing with sound and Processing. </p><p>Challenge five</p></li><li><p>Presentation 1</p><p>Generative art piece </p></li><li><p>SITE</p><p> The site I was assigned was the new entrance to the music department from the end of the design corridor. </p><p> 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 </p><p>corridor.</p></li><li><p>CONCEPT</p><p> My concept was to study the movement of people through the space. I wanted to create something that would represent the foot walk </p><p>through the area.</p><p> I also wanted to create something that would attract people to the area. </p></li><li><p>RESEARCH</p><p>here I was exploring linear forms, I wanted to show my </p><p>interpretation of movement through a linear form, I also </p><p>used these examples to help me understand how to make </p><p>variations in the code. </p></li><li><p>DEVELOPMENTS</p><p>DEVELOPMENT 1DEVELOPMENT 2</p><p>DEVELOPMENT 3</p></li><li><p>int num = 200;int range = 20;</p><p>float[] ax = new float[num];float[] ay = new float[num]; </p><p>void setup() {size(1024, 768);for(int i = 0; i &lt; num; i++) {ax[i] = width/2;ay[i] = height/2;</p><p>}frameRate(30);</p><p>}</p><p>void draw() {background(1);</p><p>for(int i = 1; i &lt; num; i++) {ax[i-1] = ax[i];ay[i-1] = ay[i];</p><p>}</p><p>ax[num-1] += random(-range, range);ay[num-1] += random(-range, range);</p><p>ax[num-1] = constrain(ax[num-1], 0, width);ay[num-1] = constrain(ay[num-1], </p><p>height/4, height/2);</p><p>for(int i=1; i</p></li><li><p>CODE FOR DEVELOPMENT 2</p><p>int num = 200;int range = 20;int diameter = 50;int positionX = 50;int Switch = 0;</p><p>float[] ax = new float[num];float[] ay = new float[num]; </p><p>void setup() {</p><p>size(1024, 768);for(int i = 0; i &lt; num; i++) {</p><p>ax[i] = width/2;ay[i] = height/2;</p><p>}frameRate(30);</p><p>}</p><p>void draw() {</p><p>background(1);</p><p>Afor(int i = 1; i &lt; num; i++) {</p><p>ax[i-1] = ax[i];ay[i-1] = ay[i];</p><p>}</p><p>ax[num-1] += random(-range, range);ay[num-1] += random(-range, range);</p><p>ax[num-1] = constrain(ax[num-1], 0, width);ay[num-1] = constrain(ay[num-1], height/4, </p><p>height/2);</p><p>fill(random(153),138,96,92);</p><p>if(positionX &gt;= width-diameter/2){Switch = 1;</p><p>}if(positionX == diameter/2){</p><p>Switch = 0;}</p><p>if(Switch == 0){ positionX++; //position = position + 1;</p><p>}else {</p><p>positionX--; }</p><p>for(int i=1; i</p></li><li><p>RANDOM MOVEMENT </p><p>Whilst looking at the movement of people throughout</p><p>the space I noticed everyone moves randomly, this</p><p>was a major inspiration to my design and ultimately</p><p>affected the final outcome..</p></li><li><p>FINAL IDEA</p><p>This was my final design for the generative art piece, this is to symbolise</p><p>the footfall through the given area, the small lines represent the foot</p><p>prints and they move randomly across the image to show that movement is</p><p>random.</p></li><li><p>int num = 200;int range = 20;</p><p>float[] ax = new float[num];float[] ay = new float[num]; </p><p>void setup() {</p><p>size(1024, 768);for(int i = 0; i &lt; num; i++) {</p><p>ax[i] = width/2;ay[i] = height/2;</p><p>}frameRate(30);</p><p>}</p><p>void draw() {</p><p>background(1);</p><p>for(int i = 1; i &lt; num; i++) {ax[i-1] = ax[i];ay[i-1] = ay[i];</p><p>}</p><p>ax[num-1] += random(-range, range);ay[num-1] += random(-range, range);</p><p>ax[num-1] = constrain(ax[num-1], 0, width);ay[num-1] = constrain(ay[num-1], height/4, </p><p>height/2);</p><p>for(int i=1; i</p></li><li><p>Presentation 2</p><p>Tangible time </p></li><li><p>Tangible Time </p><p>For our second project we had to create something that</p><p>related to time and was also interactive. In groups of three</p><p>we has three weeks to design and make our time telling</p><p>devices and we would then show them at an exhibition.</p><p>Group Name- Team Rocket</p><p>Final Idea- A braille Clock</p><p>Concept- Perception of time, the closer you stand to the</p><p>clock the slower time goes, as if you were watching the clock,</p><p>the further back you stand the quicker time goes, Represents</p><p>how different people perceive time.</p></li><li><p>Getting to know the arduino kit</p></li><li><p>Developing the clock</p><p>These are some initial sketches that me </p><p>and my group came up with. We were </p><p>looking at different ways to mount and </p><p>rotate the circular disks. </p></li><li><p>Developing the clock</p></li><li><p>Developing the clock</p></li><li><p>Developing the clock</p></li><li><p>Creating the Poster</p><p>As part of the final hand in we had to have an A2 poster detailing our product,</p><p>as a group we decided to engrave our poster on to board of plywood. This was in</p><p>keeping with our clock as the arduino boards were mounted on a board of</p><p>plywood.</p></li><li><p>The finished Clock</p></li><li><p>#include </p><p>#define echoPin 7 // Echo Pin</p><p>#define trigPin 8 // Trigger Pin</p><p>Servo seconds;</p><p>Servo minutes;</p><p>Servo hours;</p><p>int counter = 0;</p><p>int mins = 2;</p><p>int hrs = 4;</p><p>int sensor = 1000;</p><p>int led = 11; // the pin that the LED is attached to</p><p>int led2 = 5;</p><p>int brightness = 0; // how bright the LED is</p><p>int fadeAmount = 10; // how many points to fade the LED by</p><p>int maximumRange = 200; // Maximum range needed</p><p>int minimumRange = 0; // Minimum range needed</p><p>long duration, distance; // Duration used to calculate distance</p><p>void setup() </p><p>{ </p><p>seconds.attach(9); </p><p>minutes.attach(3);</p><p>hours.attach(2);</p><p>pinMode(trigPin, OUTPUT);</p><p>pinMode(echoPin, INPUT);</p><p>Serial.begin(9600); </p><p>pinMode(led, OUTPUT);</p><p>pinMode(led2, OUTPUT);</p><p>} </p><p>void loop() {</p><p>{</p><p>digitalWrite(trigPin, LOW); </p><p>delayMicroseconds(2); </p><p>digitalWrite(trigPin, HIGH);</p><p>delayMicroseconds(10); </p><p>digitalWrite(trigPin, LOW);</p><p>duration = pulseIn(echoPin, HIGH);</p><p>distance = duration/58.2;</p><p>}</p><p>if (distance &gt;= maximumRange || distance 150){</p><p>sensor = 100;</p><p>}</p><p>else if(distance &lt; 20){</p><p>sensor = 5000;</p><p>}</p><p>else{</p><p>sensor = 1000;</p><p>}</p><p>if(counter == counter){</p><p>//PULSE </p><p>analogWrite(led, brightness); </p><p>analogWrite(led2,brightness); </p><p>brightness = brightness + fadeAmount;</p><p>{ </p><p>Code for the Clock</p></li><li><p>if (brightness == 0 || brightness == 255) {</p><p>fadeAmount = -fadeAmount ; </p><p>} </p><p>delay(sensor); </p><p>}</p><p>}</p><p>if((counter % mins) == 0) </p><p>{</p><p>if((counter % hrs) == 0)</p><p>{</p><p>minutes.write(88);</p><p>seconds.write(88);</p><p>hours.write(88); </p><p>delay(100);</p><p>minutes.write(90);</p><p>seconds.write(90);</p><p>hours.write(90);</p><p>delay(sensor); </p><p>} </p><p>else </p><p>{</p><p>minutes.write(88);</p><p>seconds.write(88); </p><p>delay(100);</p><p>minutes.write(90);</p><p>seconds.write(90);</p><p>delay(sensor); </p><p>}</p><p>}</p><p>else </p><p>{</p><p>seconds.write(88);</p><p>delay(100);</p><p>seconds.write(90);</p><p>delay(sensor);</p><p>} </p><p>counter++;</p><p>}</p></li><li><p>The Exhibition </p><p>This was our final layout for our exhibition, we mounted the clock on a Plywood</p><p>board beside our A2 poster, we also had a monitor showing the creative process</p><p>we went through to get our final idea. The Exhibition lasted two hours with</p><p>various staff members of the university and students coming to view our work.</p></li><li><p>Links</p><p>YouTube Link- Testing Arduino Videos</p><p> http://www.youtube.com/watch?v=Er5joKZfGDU&amp;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</p><p>Other Links </p><p> http://samvalentine20.tumblr.com/ http://issuu.com/samvalentine8/docs/issuu_booklet_pdf</p></li></ul>

Recommended

View more >