Interactive Programming(2017) – week2

カメラによるインタラクション

 

どのような事が出来るか?

Daniel Rozin

+1D

NeoCubism

eye project

Monalisa

headlight pixels

The Manual Input Sessions

カメラから画像情報を取得し、その情報に基づく2次元コンピュータグラフィックスを生成する。

ProcessingのExample->Libraries->video->Capture内のMirror, Mirror2を例として説明する。

Example

Sketch Synth

 

/**
    * Mirror 2
    * by Daniel Shiffman.
    *
    * Each pixel from the video source is drawn as a rectangle with size based on brightness.
    */

//まず、カメラから画像を実時間で取得するために、ライブラリを読み込む
import processing.video.*;

// Size of each cell in the grid

//ピクセルの代わりになる、基本図形の大きさを決める。ここでは、15ピクセル

int cellSize = 15;
// Number of columns and rows in our system

//行と列にいくつの基本図形を並べるかその数を保存するための変数。

int cols, rows;
// Variable for capture device

//カメラの為の変数 <- 実際には、ライブラリから生成したオブジェクトを入れておくための変数
Capture video;
void setup() {
     size(640, 480, P2D);
     // Set up columns and rows

     //列にいくつの基本図形を並べられるか計算し、その結果を保存
     cols = width / cellSize;

     //行にいくつの基本図形を並べられるか計算し、その結果を保存
     rows = height / cellSize;

     //色とrectのモードを指定
     colorMode(RGB, 255, 255, 255, 100);
     rectMode(CENTER);

     // Uses the default video input, see the reference if this causes an error

     // ライブラリを使うためにオブジェクトを生成し変数に代入

     video = new Capture(this, width, height);

     //キャプチャをスタート
     video.start();

     background(0);
}
void draw() {

     //カメラが使用できる状態か確認し
     if (video.available()) {

          //問題なければカメラから画像データを読み込み
          video.read();

          //ピクセルデータをプログラム内で処理できるように画像データからピクセルデータを取得
          video.loadPixels();

          background(0, 0, 255);

          // Begin loop for columns

          //ここからは、配列で与えられたピクセル(の色)データを一つずつ処理する

          //まずは、列の繰り返し
          for (int i = 0; i < cols;i++) {
               // Begin loop for rows

               //次に行の繰り返し
               for (int j = 0; j < rows;j++) {

                    // Where are we, pixel-wise?

                    //ここでピクセルの位置と基本図形の位置が一致するように計算する。
                    int x = i * cellSize;
                    int y = j * cellSize;

                    //配列のどのインデックスのデータが欲しい色情報かを計算する。画像は、2次元。ピクセルデータの配列は1次元。変換が必要!
                    int loc = (video.width - x - 1) + y*video.width; // Reversing x to mirror the image

                    // Each rect is colored white with a size determined by brightness

                    //計算した位置の色を取得し、変数に代入

                    color c = video.pixels[loc];

                    //取得した色情報から明度を取り出し、基本図形の大きさに割り当てる。
                    float sz = (brightness(c) / 255.0) * cellSize;
                    fill(255);
                    noStroke();

                    //基本図形rectを描画!
                    rect(x + cellSize/2, y + cellSize/2, sz, sz);
               }
          }
     }
}

本日のソースコード
import processing.video.*;

// Variable for capture device
Capture video;

void setup() {

     size(640, 480, P2D);
     // Uses the default video input, see the reference if this causes an error
     video = new Capture(this, width, height);
     video.start();
     rectMode(CENTER);
}

void draw() {
    background(200);
     video.read();
     video.loadPixels();
     //image(video, 0, 0);
         for (int x = 0; x < 640; x = x + 20) {
          for (int y = 0; y < 480; y = y + 20) {

               color c = video.pixels[x+y*640];

              // fill(c);
               noFill();
               stroke(c);
               float size = brightness(c)/ 255 * 10;
               rect(x, y, size, size);

          }
     }
}

Tracking brightness

以下のサンプル

Processing -> Examples -> Libraries -> Capture -> Brightness Tracking

これに、赤外線フィルタを組み合わせると目に見えない光を追跡する事が出来る。

可視光と赤外線との関係について

 

/**
* Brightness Tracking
* by Golan Levin.
*
* Tracks the brightest pixel in a live video signal.
*/

//ビデオを使用するためにライブラリをインポートする
import processing.video.*;

Capture video;

void setup() {
     size(640, 480);
     // Uses the default video input, see the reference if this causes an error
     //ウィンドウサイズでビデオのキャプチャする
     video = new Capture(this, width, height);
     //キャプチャ開始
     video.start();
     noStroke();
     smooth();
}

void draw() {
    
//カメラが使用できるか確認する
     if (video.available()) {

          //カメラからの情報を取得
          video.read();
          //取得した画像を画面上に表示
          image(video, 0, 0, width, height); // Draw the webcam video onto the screen
          //一番輝度が高いピクセルのx座標を保存するための変数
          int brightestX = 0; // X-coordinate of the brightest video pixel
          //一番輝度が高いピクセルのy座標を保存するための変数
          int brightestY = 0; // Y-coordinate of the brightest video pixel
          //輝度へ変換した値を保存
          float brightestValue = 0; // Brightness of the brightest video pixel
          // Search for the brightest pixel: For each row of pixels in the video image and
          // for each pixel in the yth row, compute each pixel's index in the video
          //画像を配列として取得
          video.loadPixels();
          int index = 0;
          //取得した画像のピクセルを処理する

          for (int y = 0; y < video.height; y++) {
               for (int x = 0; x < video.width; x++) {

                    // Get the color stored in the pixel
                    //配列に保存されているピクセルのcolorを取得し変数に保存
                    int pixelValue = video.pixels[index];

                    //colorを輝度へ変換する
                    // Determine the brightness of the pixel
                    float pixelBrightness = brightness(pixelValue);

                    // If that value is brighter than any previous, then store the
                    // brightness of that pixel, as well as its (x,y) location
                    //現在brightestValueに保存されている値と、pixelBrightnessの値を比較
                    //pixelBrightnessの方が大きい値の場合、輝度が高いのでそのピクセルのx, y座標を保存
                    if (pixelBrightness > brightestValue) {
                         brightestValue = pixelBrightness;
                         brightestY = y;
                         brightestX = x;
                    }
               index++;
          }
         }

          //処理を全て終えた時点でbrightestX, brightestYの位置のピクセルが最大輝度のピクセル
          //画面上のその位置にellipseを描画する
          // Draw a large, yellow circle at the brightest pixel
          fill(255, 204, 0, 128);
          ellipse(brightestX, brightestY, 200, 200);
     }
}

参考図書
Design by numbers
Creative Code
Maeda Media

Learning Processing: A Beginner’s Guide to Programming Images, Animation, and Interaction

ビジュアライジング・データ ―Processingによる情報視覚化手法
メディア論―人間の拡張の諸相

参考リンク
Processing
マサチューセッツ工科大学(MIT)
デジスタ
文化庁メディア芸術プラザ
John Maeda
Ben Fry
Casey Reas
Golan Levin
Scott Snibbe
Amit Pitaru
岩井 俊雄
Marshall McLuhan

クワクボ リョウタ

*メディアアート参考作品


光が音になるSOUND-LENDS
electroplankton(nintendo ds)
視聴覚交換機
Monalisa
otopen[1 . 2]
Streetscape
The Manual Input Sessions
eye project

tone matrix

Sonic Wire Sculptor
headlight pixels
TENORI-ON
Reactable – Bjork – Collaborative Tangible Interface/reactable
iPhoneアプリ
Bloom
Trope
SynthPond
Air
audio palette
Voice keyboard
Ocarina
iPhone Music App