UTOPIA [Poetic Light]

UTOPIA

 

Final Video

 

Inspiration: James Turrell

 

Idea sketch & Plan-out

Materials: Distance sensor(Ultrasonic sensor), Sound sensor(Microphone sensor), Motor, Plexiglass, Cellophane paper, LED strip, Arduino Nano

 

Mockup - play around with light, shadow and shape

 

UTOPIA (Interactive Poetic Light)

 

Coding for LED strip(WS2812B) and Ultrasonic sensor

ultrasonic-sensor-with-arduino-hc-sr04.jpg
//set up variables for LED
#include <FastLED.h> //import Fast.Led

#define LED_PIN     5 
#define NUM_LEDS    20
#define BRIGHTNESS  500
#define LED_TYPE    WS2811
#define COLOR_ORDER GRB
CRGB leds[NUM_LEDS];

#define UPDATES_PER_SECOND 100

CRGBPalette16 currentPalette;
TBlendType    currentBlending;

extern CRGBPalette16 myRedWhiteBluePalette;
extern const TProgmemPalette16 myRedWhiteBluePalette_p PROGMEM;

//set up variables for Ultra Sonic sensor
int trigPin = 11;    // Trigger
int echoPin = 12;    // Echo
long duration, cm, inches;



void setup() {

    //setup for LED stripe
    Serial.begin (9600);
    delay( 1000 ); // power-up safety delay
    FastLED.addLeds<LED_TYPE, LED_PIN, COLOR_ORDER>(leds, NUM_LEDS).setCorrection( TypicalLEDStrip );
    FastLED.setBrightness(  BRIGHTNESS );
    
    currentPalette = RainbowColors_p;
    currentBlending = LINEARBLEND;

    //setup for Ultrasonic Seonsor
    pinMode(trigPin, OUTPUT);
    pinMode(echoPin, INPUT);
}


void loop()
{   

    //animtate light
    
    




    //ultasonic sensor
  digitalWrite(trigPin, LOW);
  delayMicroseconds(5);
  digitalWrite(trigPin, HIGH);
  delayMicroseconds(10);
  digitalWrite(trigPin, LOW);

   pinMode(echoPin, INPUT);
  duration = pulseIn(echoPin, HIGH);

  cm = (duration/2) / 29.1;     // Divide by 29.1 or multiply by 0.0343
  inches = (duration/2) / 74;   // Divide by 74 or multiply by 0.0135

  Serial.print(inches);
  Serial.print("in, ");
  Serial.print(cm);
  Serial.print("cm");
  Serial.println();


if (cm > 100){
      ChangePalettePeriodically();
    
} 

else {

  static uint8_t startIndex = 0;
    startIndex = startIndex + 1; /* motion speed */
    
    FillLEDsFromPaletteColors(startIndex);
    
    FastLED.show();
    FastLED.delay(1000 / UPDATES_PER_SECOND);
}

}
  




void FillLEDsFromPaletteColors( uint8_t colorIndex)
{
    uint8_t brightness = 255;
    
    for( int i = 0; i < NUM_LEDS; i++) {
        leds[i] = ColorFromPalette( currentPalette, colorIndex, brightness, currentBlending);
        colorIndex += 3;
    }
}



void ChangePalettePeriodically()
{
    uint8_t secondHand = (millis() / 1000) % 60;
    static uint8_t lastSecond = 99;
    
    if( lastSecond != secondHand) {
        lastSecond = secondHand;
        if( secondHand ==  0)  { currentPalette = RainbowColors_p;         currentBlending = LINEARBLEND; }
        if( secondHand == 10)  { currentPalette = RainbowStripeColors_p;   currentBlending = NOBLEND;  }
        if( secondHand == 15)  { currentPalette = RainbowStripeColors_p;   currentBlending = LINEARBLEND; }
        if( secondHand == 20)  { SetupPurpleAndGreenPalette();             currentBlending = LINEARBLEND; }
        if( secondHand == 25)  { SetupTotallyRandomPalette();              currentBlending = LINEARBLEND; }
        if( secondHand == 30)  { SetupBlackAndWhiteStripedPalette();       currentBlending = NOBLEND; }
        if( secondHand == 35)  { SetupBlackAndWhiteStripedPalette();       currentBlending = LINEARBLEND; }
        if( secondHand == 40)  { currentPalette = CloudColors_p;           currentBlending = LINEARBLEND; }
        if( secondHand == 45)  { currentPalette = PartyColors_p;           currentBlending = LINEARBLEND; }
        if( secondHand == 50)  { currentPalette = myRedWhiteBluePalette_p; currentBlending = NOBLEND;  }
        if( secondHand == 55)  { currentPalette = myRedWhiteBluePalette_p; currentBlending = LINEARBLEND; }
    }
}

// This function fills the palette with totally random colors.
void SetupTotallyRandomPalette()
{
    for( int i = 0; i < 16; i++) {
        currentPalette[i] = CHSV( random8(), 255, random8());
    }
}


void SetupBlackAndWhiteStripedPalette()
{
    // 'black out' all 16 palette entries...
    fill_solid( currentPalette, 16, CRGB::Black);
    // and set every fourth one to white.
    currentPalette[0] = CRGB::White;
    currentPalette[4] = CRGB::White;
    currentPalette[8] = CRGB::White;
    currentPalette[12] = CRGB::White;
    
}


void SetupPurpleAndGreenPalette()
{
    CRGB purple = CHSV( HUE_PURPLE, 255, 255);
    CRGB green  = CHSV( HUE_GREEN, 255, 255);
    CRGB black  = CRGB::Black;
    
    currentPalette = CRGBPalette16(
                                   green,  green,  black,  black,
                                   purple, purple, black,  black,
                                   green,  green,  black,  black,
                                   purple, purple, black,  black );
}



const TProgmemPalette16 myRedWhiteBluePalette_p PROGMEM =
{
    CRGB::Red,
    CRGB::Gray, // 'white' is too bright compared to red and blue
    CRGB::Blue,
    CRGB::Black,
    
    CRGB::Red,
    CRGB::Gray,
    CRGB::Blue,
    CRGB::Black,
    
    CRGB::Red,
    CRGB::Red,
    CRGB::Gray,
    CRGB::Gray,
    CRGB::Blue,
    CRGB::Blue,
    CRGB::Black,
    CRGB::Black
};
 

Coding for Microphone sensor and DC Motor

motor.png
int motorPin = 3;
int sensorPin=7;
boolean val =0;

void setup() {
  pinMode(motorPin, OUTPUT);
  pinMode(sensorPin, INPUT);
  Serial.begin (9600);
}

void loop() {
   val =digitalRead(sensorPin);
  Serial.println (val);
  
  if (val==HIGH) {
    digitalWrite(motorPin, HIGH);
  }
  else {
    digitalWrite(motorPin, LOW);
  }   
   
}

Digital INPUT/OUTPUT - Tone output

//1. Range of the analog input
void setup() {
  Serial.begin(9600);       // initialize serial communications
} 
 
void loop()
{
  int analogValue = analogRead(A0); // read the analog input
  Serial.println(analogValue);      // print it
}
 

SOLDERING

IMG_0077.jpg

I tried to figure out why circuit was not working. Since Arduino read and printed analog input fine, I could know there was a problem with speaker circuit. I found out that the ‘+’ wire from the speaker was not connected right. It should’ve connected to D8 not ‘+’ of a breadboard. Finally, I made a sound come off from the speaker.

//2. Play Tones
void setup() {
 }
 
 void loop() {
   // get a sensor reading
   int sensorReading = analogRead(A0);
   // map the results from the sensor reading's range
   // to the desired pitch range:
   float frequency = map(sensorReading, 0, 1000, 100, 1000);
   // change target range will change pitch 
   // change the pitch, play for 10 ms:
   tone(8, frequency, 10);
 }
 

P5 reference

Screen Shot 2019-10-01 at 11.21.20 PM.png
Screen Shot 2019-10-02 at 9.58.49 AM.png
 

Arduino Reference

Screen Shot 2019-10-02 at 9.41.43 AM.png
Screen+Shot+2019-10-02+at+9.48.48+AM.jpg
IMG_0073.jpg

Idea sketch

INPUT/ OUTPUT

INPUT/ OUTPUT ARDUINO

Screen Shot 2019-09-25 at 12.34.40 AM.png

I learned about INPUT and OUTPUT with Arduino.

So, I created this microcontroller circuit that has 1 DIGITAL INPUT and 2 OUTPUT

To start with, I connected power and ground on the breadboard to power and ground from the

microcontroller. Then I connected red and blue columns on the left of the breadboard

to the red and blue columns on the right side of the breadboard with red and black wires.

I wondered WHY? there should be a resistor after D2 wire.

What I learned?

The resistor connecting the pushbutton is a pulldown resistor.

It provides the digital input pin with a connection to ground. Without it, the input will behave unreliably.

Screen Shot 2019-09-25 at 12.51.37 AM.png

Then I created additional 2 circuits connected to D3 and D4 which is going to be my output.

I connected resistors for both of them. Stronger resistor will make light bulbs dimmer.

Then I connected another side of lightbulb to negative(-).

I was curious why should it be connected to - and I found out each Arduino pin works as a +.

And I coded to light it up sequentially. By doing this, I could understand basic concept of how electric devices that interacts with people work.

At this point, I could not find out and other creative way to code and make creative circuit but I can’t wait to learn.

Now, I get the basic idea of INPUT and OUTPUT of Microcontroller.


<ARDUINO CODE>

void setup() {
  pinMode(2, INPUT);    
  pinMode(3, OUTPUT);   
  pinMode(4, OUTPUT);  

}

void loop() {
   
   if (digitalRead(2) == HIGH) {
     
     digitalWrite(3, HIGH);    
     digitalWrite(4, LOW);    
   }
   else {
   
     digitalWrite(3, LOW);     
     digitalWrite(4, HIGH);    
   }
 }

OBSERVATION

IMG_4091.jpeg

Interactive technology I chose is an NYC metro card vending machine that I've been using for 7 years. People use it to refill their card; to get a new card, or to get a single ride card. People use it in many different ways. Some people choose their preferred language first; some people choose what they want first(get a new card, refill your card, single ride) and some people just insert the metro card right away so that the machine can skip previous steps and direct them to 'refill your card' screen right away.

Even though the machine is very straight forward,(does not have any other functions other than a metro card) elders or people who are new to New York City seems to have a hard time using it which causes a long line.

I used the machine for so long and have not thought about once what I liked about it. Probably, touch screen. The first user will never expect that such an old-looking machine is a touchscreen. It makes everything so much easier.

It takes the most time to Wait in Line to use the machine (Line created by tourists and first-time user). I guess the user interface of a metro vending machine needs some improvements. I think it would be easier and faster to use a chip, instead of the barcode(card). It takes only a few seconds for a machine to read the barcode but it feels long when there is a line. It can get to minutes or hours when seconds are added up.

NYC metro vending was an innovative technology once but not anymore.

For better user experience, it has to adopt new technology.



Train Your Bug

First I came up with really simple circuit that turns on the light.

Then I chose a part to add a switch.

My first idea was to use charcoal(pencil) as a conductor. I was going to make a maze with insulator and make user to figure out the maze in order to turn the light on. However, I found out that charcoal is not a great conductor. It turns the light on but not bright enough.

Then I found this cute looking ladybug toy I had. I connected wire to the front leg and covered it with aluminum foil. Then I connected those legs into single wire and +.

I wanted to keep the maze idea. So I made a track covered with conductor then connected it with - of the circuit. So that whenever machine bug touches the wall, the light will turn on.

While I was playing with this machine but, I found out that it is really hard to control. I thought it would be fun to make this experience as a simple game. ‘Train your machine Bug.’ Point of this designed circuit is to make you proficient at controlling your bug. User should try not to illuminate the lightbulb.

Also, you can adjust the difficulty by relocate the bar that makes a track. It’s a heavy metal covered with aluminum foil, so you can place it anywhere unless one side of it touches the wall.

NOW! Please enjoy ‘Train your machine bug’

The Art of Interactive Design

Chapter 1: What Exactly IS Interactivity?

-       The term interactivity is overused and understood

-       interaction: a cyclic process in which two actors alternately listen, think, and speak.

-       listen, think, and speak = input, process, and output,

-       ex/ branch, refrigerator à NOT an interactivity that has some blood in its veins.

-       “high” and “low” interactivity?

-       To interact well, both actors in a conversation must perform all three steps (listening, thinking, and speaking) well

-       The most common design error in interactive products arises from a failure to appreciate this principle. 

-        A book can’t listen or think. It can only speak;

-       Interaction and reaction are different.

-       Participation and interaction are different.

-       “If the movie were interactive, you might see our heroine pause and say, “Gee, I think I heard somebody in the audience urging me not to enter the dark house. I think I’ll take that advice.” But this never happens” 

-       “let’s be honest” – I think it is an interaction but it isn’t

-       The user interface designer optimizes the design towards the computer’s strengths in speaking and listening, and away from its weaknesses in these same areas. The user interface designer never presumes to address the thinking content of software

-       interactivity designer by regarding the thinking content of software as its function, and the user interface as its form

people tend define ‘interaction’ comprehensively. But interaction comes from something more fundamental. On the other hand, it is more than just fundamental.

I believe, ‘why’ is most important keyword in ‘interaction’

 

 During my Thesis class at Parsons, professor kept asking me ‘why?’ to what I wanted to do.

Now I understand what he meant.

 Ex/

I’ll make a graphic novel with AR technology so that I can animate the static book.

Why do you want to use AR technology?

Why would people use AR to read a book instead of watching some motion graphic?

‘Cool thing’, ‘Interesting effect’ is not really what interaction is about.  

I think, to give an attribute of ‘interactivity,’ it has to have a purpose and reason for interaction.

 

 

1.     Are rugs interactive? Explain in your own words why or why not.

  • No, because rug does not satisfy ‘thinking’ procedure.

 

2.     Come up with your own damn definition of interactivity.

  • It’s an alternate constant action and reaction relationship between two things with a purpose.

Chapter 2: Why Bother With Interactivity?

 

-       Interactivity is important for designers because it is a new and revolutionary communication medium

-       For artists, interactivity represents an exciting and unexplored field of effort.

-       most mammalian infants learn basic skills through interactive play 

-       interactivity:  it engages the human mind more powerfully than any other form of expression: people identify more closely with it because they are emotionally right in the middle of it.

-        “I hear and I forget; I see and I remember; I do and I understand.”

-       Software designers who try to compete with movies, music, or printed graphics are guaranteed to lose. The one and only place where we can beat those other industries is in our interactivity

In a modern society, all sectors are organically intertwined with one another, sharing their inspirations, knowledge and technology.

I, as a designer, cherish myself as a contributor to accelerating a diverse range of human development through interactivity.

I realized that for more in-depth understanding of the world of media art, learning how to program and code is crucial as the Dean of Parsons Communication Design, Kang said, “The age of differentiating design and technology has ended”.

If computer is capable of doing what people can do. And if they can do better jobs (including programming). What makes human a human?

Fantasy Device

INPUT: Breathe

OUTPUT: Emotion Sticker & mint

Our group designed imaginary device that provides a sticker that shows emotion based on the data collected from users’ breathe.

Screen in the front will detect user’s numeric value of hormone and predict his/her emotion. (will also provide mint in order to make people involved)

This device can be used at the bar, party, conference etc.

 "The things we make are less important than the relationships they support"

Tom Igoe

Physical computing

Building interactive physical systems

That can sense and respond to the analog world

- Dan & Toms Book


Interaction

A cyclic process in which two actors alternately listen, think, and speak

- Chris Crawford


Good interaction

  • Affordance

  • Intuitivity

  • Feedback

  • Involving Full body

Physical Computing

Class