読者です 読者をやめる 読者になる 読者になる

atelier:mitsuba

i love UI/UX, Blend, XAML, Behavior, P5, oF, Web, Tangible Bits and Physical computing. なにかあればお気軽にご連絡ください。atelier@c-mitsuba.com

手の中のセカイ、私たちの世界。

学生のみなさん、夏休み、いかがお過ごしでしょうか?
みつばはこのコンテストに応募しようとおもいます。

OGIS-RI Software Challenge Award 2010「青いボタンで...」コンテスト
http://www.ogis-ri.co.jp/otc/contest/osca2010/top.html

内容は簡単で、青いボタンを自分で定義して、それをつかって好きなものを作ってくださいっとのこと。

で、まぁエントリーもして、ネタを考えていたらいいものがひらめいたので、作品を作ってみました。
壁ものなので、研究に対象でもありますしw

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

作品名は「手の中のセカイ、私たちの世界。」です。
コンセプトは「人のつながりの再認識」です。

みなさん。かの有名なガガーリンのあの言葉は知っていますよね。
地球は青かった。」
そうです。
今回蜜葉が提案する青いボタンは、地球です。

実際にどんなものを作ったかというと、こんなものです。

これが地球のメタファです。

ぇ、青くないしいいの?と思われるかもしれませんが大丈夫。
この地球に触れ、このセカイとリンクすることで、こんな風に青く光ります。

ところで忙しい忙しいと言われる現代社会ですが、最近、まったりと空を見上げたことがありますか?
この地球に触れると、天井にソラが現れます。

このソラには、世界中の人の思いが漂っています。

地球から手を離すと、ソラもまた青い光と共に消えていきます。

仮想のセカイに仮想のソラ、でもそこには、実世界の人がいます。
時々でいいので、思い出してください。
同じ空の下で、たくさんの人がいて、いまを一緒に生きているということを。

そういう思いを込めて創ったインスタレーションアートです。


ーーーーーーーーーーーーーーーーーーーーーーーーーー

で、実装ー

ハードウェアを作るのに、結構(待ち)時間がかかりましたw

まず、水のりを水で解いたもので和紙を濡らして、膨らませた風船に貼付けていきます。

ある程度の分厚さになったら1日ほったらかして乾かします。
乾いたら風船を割って取り出します。
これで和紙の球体が出来上がります。

次にできた球体に穴をあけて軸を通します。
ここで軸を斜めにしているのがポイント。
球体のふちと、軸に電線のつながったアルミホイルが巻いています。

球体を触り続けているとき=ここが触れ続けているのをイベントとして取っています。
この電線はGainerのdegitalInput[0]につながっています。
単なるスイッチですね。

Gainerにはもう1つ、analogOutput[0]に青色LEDがつながっています。
スイッチのONの状態が続くと、どんどん明るくなって、OFFになると消えていくように作っています。

これでハードウェアは完成ですね。

で、ソフトウェア側ですが、タグにもあるようにprocessingで作成しました。
ソースコードは非常に短いです。
まずは、後ろで空の早送り動画を後ろに流していて(静止がでは、ぼーっと眺めるのに飽きてしまう)
スイッチがONになったら、上のレイヤーをフェードアウトさせるのと同時に、TwitterのPublicなTLをXMLで取ってきます。
それをランダムな位置に、ぼわーんといった感じに表示しています。
1回のXMLで取得できるPostは20個までなので、フェードインのたびにTLを取得しています。
こうすることで体験者ごとにPostが変わるわけです。

あとはLEDの調光周りの制御とかですね。
コード自体は1日かからずにさくっと組めました。
fpsは10フレームぐらいで、ちょっと遅いのですが、、、、まぁいいでしょうw

以下ソースコードーーーー

  import processing.video.*;
  import processing.gainer.*;
  
  Gainer gainer;
  Movie myMovie;
  PImage bg;
  PGraphics twitCanvas;
  XMLElement Xml;
  
  int alphaKey = 255;
  int TweetCount;
  String[] Text;
  float[] X, Y, Z;

  int twitKey=0;
  int initKey = 0;
  int analogValue = 0;
  
  void setup() {    
    size(screen.width,screen.height,P3D);
    bg = loadImage("bg.png");
    frameRate(30);
    background(0);
    noCursor();
    noStroke();
    
    myMovie = new Movie(this, "videoplayback.dv");
    myMovie.loop(); 
    
    twitCanvas = createGraphics(screen.width, screen.height,P3D);
    initTwitter();  
      
    gainer = new Gainer(this); 
    gainer.beginDigitalInput();
  }
  
  void draw() {
    noStroke();
    background(0);
    image(myMovie, 0,0,screen.width,screen.height);
    
    if(alphaKey < 256 && gainer.digitalInput[0] == false){
      alphaKey+=3;  
    }else{
      gainerButtonDown();
    }
    
    tint(255, alphaKey);
    fill(255,255,255);
    image(bg, 0, 0,screen.width,screen.height);
    noTint();
    
    createTwitPost();
    
    twitKey++;
    if(twitKey%3000 == 0){
      initTwitter();
    }
    
    lightingLED();
  }
   
 void initTwitter(){                 
    String PUBLIC_TIMELINE = "http://api.twitter.com/1/statuses/public_timeline.xml";
    Xml = new XMLElement(this, PUBLIC_TIMELINE);
    TweetCount = Xml.getChildCount();
    
    Text = new String[TweetCount];
    X = new float[TweetCount];
    Y = new float[TweetCount];
    Z = new float[TweetCount];
    
  
    for (int i = 0; i < TweetCount ; i++) {
      XMLElement status = Xml.getChild(i);
      Text[i] = status.getChild("text").getContent();
      X[i] = random(width);
      Y[i] = random(height);
      Z[i] =  -i * 120 + 300;
    }
    println(TweetCount);
  }
  
  void movieEvent(Movie myMovie) {
    myMovie.read();
  } 
   
  void createTwitPost(){
     for (int i = 0; i < TweetCount ; i++) {
       if(alphaKey < 255){
          pushMatrix();
            Z[i] += 2;
            if(Z[i] > 50) {
              X[i] = random(width);
              Y[i] = random(height);
              Z[i] = -10;
            }
        
            translate(X[i], Y[i], Z[i]);
            float opacity;
           
            if(Z[i] < 0) {
              opacity = min(100, map(Z[i], -1500, 0, 0, 150)) / 100;
            } else {
              opacity = map(Z[i], 0, 50, 100, 0) / 100;
            }
           
            fill(255, 255*opacity);
            
            textSize(20);
            text(Text[i], -95, -105,400,200);
          popMatrix();
       }
    }
  }
  
  void gainerButtonDown()
  {
     if(alphaKey > 0){
       alphaKey-=3;
       initKey++;
     } 
     if(initKey%60 == 0){
       initTwitter();
       initKey = 0;
     }
  }
  
  void lightingLED(){  
    if(gainer.digitalInput[0]){
      if(analogValue < 255){
        analogValue++;
      }
    }else{
      if(analogValue > 0){
        analogValue--;
      }
    }
    gainer.analogOutput(0,analogValue);
  }

ーーーーーーーーーーーーーーーーーーーーー

で、まぁ一応完成なんだけども、プロジェクタの光とかで青が目立たないので、LEDの数を増やしたり、
PublicTLじゃなくて、ハッシュタグつけて、そこにケータイからポストしてもらえば、表示されるようにしようかなぁ。とか、拡張も考え中。

ま、そこそこに満足できたかなぁっと。

蜜葉の夏の工作でしたっ!w