All posts by xl642

Transmedia storytelling and all

Some talk:

For my main interest area, which is animation, I’ve always seen computational media as an interactive platform that may expand the compatibility of the work. After taking this class and seeing lots of projects being made, I definitely see the dynamic range of “computational media” as a term, but also make me determined in utilizing such a great tool into my projects. We could basically do anything: programs that not only benifit to computers, but also literature, game, performing theatre, narrative and experimental film…

While thinking about this topic, I’m revisiting my expanding cinema class last semester in which, though not as half interesting as ICM, discussed a ton about trans-media storytelling in its economical and social influence on films. The variability and automation of new media, as Manovich talked about in his book “the Language of New Media”: “The user plays an active role in determining the order in which the already generated elements are accessed.”The ability to do so doesn’t only save us energy and time in performing various branches of a plotline of the film that would interact with the user’s preference, but also create a unique experience for difference users (audiences).

I noticed that everything sounds really vague…What I’m trying to get at is that interactive interface is not a new topic anymore. I’ve always been amazed by interactive projects and how accessable it is comparing to film. How much something that you could actually touch attracts you. Animation is two dimentional, and the storytelling is limited to the screen. Using the motors, photocells and leds, I guess eventually I will be able to communicate with the audience, and make that experience part of the story I want to tell.

Why things doesn’t turn out how it’s supposed to be?

PImage bg;
Hand hand;   
Timer timer;        
Blood[] blood;       // arry for thing
int totalBlood = 0; // total blood

void setup() {
  size(600, 372);
 bg = loadImage("http://moviesofhollywood.com/wp-content/uploads/2013/11/leonardo-dicaprio-the-wolf-of-wall-street-photo-600x372.jpg");
  smooth();
  hand = new Hand(32); // radius 
  blood = new Blood[1000];   
  timer = new Timer(70);   
  timer.start();
}

void draw() {

  hand.setLocation(mouseX, mouseY); 
  hand.display(); 

  if (timer.isFinished()) {
    blood[totalBlood] = new Blood();
    totalBlood ++ ;
    if (totalBlood > blood.length) {
      totalBlood = 0;
    }
    timer.start();
  }

  // the drippy effect?

  for (int i = 0; i < totalBlood; i++ ) {
    blood[i].move();
    blood[i].display();
    if (hand.intersect(blood[i])) {
      blood[i].caught();
    }
  }
}

////////////////////hand class/////////////////////////

class Hand {
  float r;  
  float x, y; 

  Hand(float tempR) {
    r = tempR;
    color(255);
    x = 0;
    y = 0;
  }

  void setLocation(float tempX, float tempY) {
    x = tempX;
    y = tempY;
  }

  void display() {
    stroke(255);
    fill(255);
    ellipse(x, y, r*2, r*2);
  }

  boolean intersect(Blood d) {
    float distance = dist(x, y, d.x, d.y); 

    if (distance < r + d.r) { 
      return true;
    } 
    else {
      return false;
    }
  }
}

////////////////////////////////////////dripping//////////////////////////////////////

class Blood {
  float x, y;  
  float speed; 
  float r;    

  Blood() {
    r = 10;                 
    x = random(width);     
    y = -50;              
    speed = random(2, 5);  
    color(255, 0, 0);
  }

  // make the blood drop
  void move() {
    y += speed;
  }

  boolean reachedBottom() {
    if (y > height + r*4) { 
      return true;
    } 
    else {
      return false;
    }
  }

  void display() {
    fill(255,0,0);
    noStroke();
    for (int i = 2; i < r; i++ ) {
      ellipse(x, y, i*2, i*2);
    }
  }

  void caught() {
    speed = 0; 
    y = - 1000;
  }
}

////////////////////Timer kind of//////////////////////////////////

class Timer {

  int savedTime; 
  int totalTime; 

  Timer(int tempTotalTime) {
    totalTime = tempTotalTime;
  }

  // Starting the timer
  void start() {
    // When the timer starts it stores the current time in milliseconds.
    savedTime = millis();
  }

  boolean isFinished() { 
    // Check how much time has passed
    int passedTime = millis()- savedTime;
    if (passedTime > totalTime) {
      return true;
    } 
    else {
      return false;
    }
  }
}

My original idea didn’t work so I just sort of went with my mistake and made this…

It is supposed to rain Oscars and leo’s head is supposed to be your mouse, trying to catch his dignity and glory. But the image won’t load, and the oscar (now blood) left a trail behind it. So now the project became weirdly violent and emo….

A paint program?

void setup() {
  size(1000, 1000);
  background(0);
}

void draw() {

  variableEllipse(mouseX, mouseY, pmouseX, pmouseY);
}

void variableEllipse(int x, int y, int px, int py) {
  float speed = abs(x-px) + abs(y-py);
  fill((255-speed*0.2), 255, speed*20);
  noStroke();
  ellipse(x, y, speed/10, speed/10);

  for (int i = 3; i < height; i += 3) {

    stroke(0, 0, mouseX/4); 
    if (i < 300) { 
      stroke(mouseY/4, 0, 0);
    }
    line(width, i, 10, i);
  }
}

II really don’t know what this is…..

屏幕快照 2014-03-10 2.38.21 PM

Sorry Leo

Last week’s been crazy and I’ve missed the Oscars because I was on the plane. So I made this to let out my anger and despair.

屏幕快照 2014-03-03 7.24.36 AM

here’s the video for it :3.

bounce oscar

The result turned out a bit too simplistic. I was trying to make the letters stay on the screen for a bit, and when you move the cursor over the letters would start to wiggle, and when you click your mouse, it triggers the movement. But somehow I couldn’t manage for it to work. Anyways, here it is.

It’s alright, next year, Leo.

String message = "Oscar";
PImage bg;
PImage bg1;
PImage bg2;

float x;
float y;     

float hr;  //horizontal radius
float vr;// vertical radius

float xspeed = 4; 
float yspeed = 5;  

int xdirection = 1; 
int ydirection = 1;  

void setup() 
{
  size(600, 372);
  bg = loadImage("http://moviesofhollywood.com/wp-content/uploads/2013/11/leonardo-dicaprio-the-wolf-of-wall-street-photo-600x372.jpg");
  textFont(createFont("Georgia", 36));

  textAlign(CENTER, CENTER);

  background(bg);

  hr = textWidth(message) / 2;
  vr = (textAscent() + textDescent()) / 2;
  noStroke();
  x = width / 2;
  y = height / 2;
}

void draw() 
{

  background(bg);

    x = x + ( xspeed * xdirection );
    y = y + ( yspeed * ydirection );

  //flash

    if (x > width-hr || x < hr) {
      xdirection *= -1; 
    }
    if (y > height-vr || y < vr) {
      ydirection *= -1;

    }

    //wanted to try make it wiggle

      if (dist(mouseX, mouseY, x, y) < hr) {

        //if (abs(mouseX - x) < hr &&
        // abs(mouseY - y) < vr) {
        x += random(-50, 50);
        y += random(-50, 50);
      }
        // the actual text
    fill(253, 219, 0);
    text("Oscar", x, y);
  }

 void mousePressed() {
  noStroke();
  fill(255, 0, 255);
  rectMode(CENTER);
  rect(mouseX,mouseY,16,16);
}

//after the oscar is outside of the screen, change background

 

Drawrrr

屏幕快照 2014-02-22 2.57.33 AM

So yeah, I did a face!

size(280,300);
background(255,216,179);

color a = color(117, 91, 67); //left eye 
fill(a);  
noStroke();  
quad(70, 45, 130, 42, 100, 100, 40, 90);

fill(a);   //right eye 
noStroke();  
quad(210, 45, 150, 42, 180, 100, 240, 90);

 color c = color(152, 113, 77); //nose 
fill(c);  
noStroke();  
triangle(140, 175, 165, 130, 115, 130);

 color d = color(140, 68, 0); //lip 
fill(d);  
noStroke();  
quad(110, 168, 170, 168, 180, 187, 100, 187);

fill(c);  //lip shadow 
noStroke();  
quad(125, 200, 155, 200, 150, 220, 130, 220);

 color e = color(47, 23, 0); //hair
fill(e);  
noStroke();  
rect(0, 0, 40, 300);

fill(e);  
noStroke();  
rect(240, 0, 40, 300);

fill(e);  
noStroke();  
triangle(180, 0, 240, 0, 240, 100);

fill(e);  
noStroke();  
triangle(40, 0, 60, 0, 60, 100);

//neck shadow
fill(a);  
noStroke();  
quad(40, 165, 40, 300, 110, 300, 110, 255);

fill(a);  
noStroke(); 
quad(240, 165, 240, 300, 170, 300, 170, 255);

fill(a);  
noStroke(); 
rect(110, 255, 60, 45);

 

“I’m going to bed” switch

So the concept is when somebody sits or lays on the bed the light would turn on. I tried using too pieces of metal glued seperately on the bed frame and the matress, but that ended up really hard to control (but a workable concept).

bed switch

Instead, I taped the button on the one edge of my bed where it’s would be pressured when weight is put on the bed. I soldered wires together with the switch, and fixed it on the bed frame. The mattress is too soft for acturally pushing down the button, so I taped a starbucks lid onto it, to give it a hard surface where the button would touch.

bed switch