デジタルコンテンツ2の受講生では,コンピュータ教室のProcessing-2.2.1を利用してください.Version.3ではpathの問題でvideoのライブラリが利用できません.2.2.1は最初からライブラリが入っているので,そのまま作業できます.

動画像の再構成(ピクセルの応用)

では次に動画ピクセルを再構成する方法を考えてみましょう.まずは動画ファイルを読み込んで,再生する だけのプログラムを書いてみます.下記の動画をサンプルとして保存してください.ダウンロードしたファイルはdataフォルダに置くことを忘れないようにして下さい.また,Processingのメニューに ある「Sketch」→「Import Library..」からvideoのライブラリを追加することで,import processing.video.*;を自動で プログラムの頭に追加できます.

03_sample01.pde
import processing.video.*;
 
Movie mov;
void setup()
{
  size(640, 360);
  noStroke();
  mov = new Movie(this, "sample.mp4");
  mov.noLoop();
  mov.play();
}
void draw()
{
  background(0);
  if( mov.available() == true ){
    mov.read();
    mov.loadPixels();
  }
  image(mov, 0,0, width, height);
}

では次に各画素の色情報を取得してみましょう. 色情報は静止画像と同じように get(int x, int y)メソッドを用いて参照することができます.

03_sample02.pde
import processing.video.*;
 
Movie mov;
void setup()
{
  size(720, 406);
  noStroke();
  mov = new Movie(this, "sample.mp4");
  mov.noLoop();
  mov.play();
}
void draw()
{
  background(0);
  if( mov.available() == true ){
    mov.read();
    mov.loadPixels();
  }
 
  for( int i = 0; i < mov.height; i++ ){
    for( int j = 0; j < mov.width; j++ ){
      stroke(mov.get(j,i));
      point(j,i);
    }
  }
}

どうでしょう?...動きはしますが,めちゃめちゃカクカク(フレームレートが小さい)していると思います. ちなみにProcessingのサイトでは,

You want your sketch to run faster! P2D and P3D make use of OpenGL-compatible graphics hardware. In other words, some of the work required to draw all the pixels in the window can happen on your computer's graphics card which is often more effecient. Keep in mind that OpenGL is not magic pixie dust that makes any sketch faster (though it's close), you will also need to carefully consider the techniques you are using to do the drawing as well. In particular, using the new “shape recording” functionality available in PShape (see PShape tutorial) can greatly increase speed in P3D mode.

と記載されており,ハードウェアレンダリングするようなのですが,とりあえず馬場の環境では1fpsでないくらいでした.なので, 実際に描画する際はimage等の関数を利用したり,ピクセル数を減らして描画していきましょう.動画ファイルの場合, 一般的には一秒間に30コマの静止画がある為,静止画と同じように扱うと,Processingでは処理落ちしてしまいます. なので,そこで,point関数を使わず,直接movクラス内のピクセルを変更することで,動画像ピクセルを操作していきます.

静止画と同様にget関数でcolorクラスを取り出し,ネガポジ反転させたイメージを描画してみます.

03_sample03.pde
import processing.video.*;
 
Movie mov;
void setup()
{
  size(720, 406);
  noStroke();
  mov = new Movie(this, "sample.mp4");
  mov.noLoop();
  mov.play();
}
void draw()
{
 background(0);  
 if( mov.available() == true ){
   mov.read();
   mov.loadPixels();
   for( int i = 0; i < mov.height; i++ ){
     for( int j = 0; j < mov.width; j++ ){
       color c1 = mov.get(j,i);
        color c2 = color(255-red(c1), 255-green(c1), 255-blue(c1));
        mov.set(j,i,c2);
     }
   } 
   }
  image(mov, 0,0, mov.width, mov.height);
}

得られた画像ピクセルをネガ・ポジ反転し,静止画と同様に二値化を行い,それを表示するプログラムを記述して下さい.下に記述しますが,filterメソッドを使うと簡単でした.filterメソッドはPImageのメソッドになっているので,https://processing.org/reference/PImage_filter_.htmlを参照して,いくつかのfilterの種類を試してみましょう.

03_sample04.pde
import processing.video.*;
 
Movie mov;
void setup()
{
  size(720, 406);
  noStroke();
  mov = new Movie(this, "sample.mp4");
  mov.noLoop();
  mov.play();
}
void draw()
{
 background(0);  
 if( mov.available() == true ){
   mov.read();
   mov.loadPixels();
   for( int i = 0; i < mov.height; i++ ){
     for( int j = 0; j < mov.width; j++ ){
       color c1 = mov.get(j,i);
        color c2 = color(255-red(c1), 255-green(c1), 255-blue(c1));
        mov.set(j,i,c2);
     }
   }
 }
  mov.filter(THRESHOLD, 0.2);
  image(mov, 0,0, mov.width, mov.height);
 
}

ここまでやってきた内容を元に,自分だけのオリジナル動画エフェクトを作成してみましょう.例えば下記サンプルは5ピクセルごとに線を引き,各頂点の明るさに応じてy座標を少しずらしています.描いてるのはたった144本の線ですが,私たちはこれをみて人間が演奏することを視認できます.このように線を描く,四角や三角,丸などの基本図形を用いて,動画データを再構成してみましょう.表示結果に失敗はありません.どのようなプログラムがどのような表現に結びつくのかを楽しみならが学んでください.

Cubisme(キュビズム) で利用した beginShape() を用いるのも一つのいいアイデアになるでしょう.また ピクセルの再構成 での最後に試した線画も参考になるかもしれません.

03_sample05.pde
import processing.video.*;
 
Movie mov;
void setup()
{
  size(720, 406);
  noStroke();
  mov = new Movie(this, "sample.mp4");
  mov.noLoop();
  mov.play();
}
void draw()
{
 
  noFill();
  if ( mov.available() == true ) {
    background(0);  
    mov.read();
    mov.loadPixels();
    for ( int i = 0; i < mov.height; i=i+5 ) {
      beginShape();
      for ( int j = 0; j < mov.width; j++ ) {
        color c1 = mov.get(j, i);
        stroke(255);
        strokeWeight(1);
        vertex(j, i-(red(c1)+green(c1)+blue(c1))/35);
      }
      endShape();
    }
  }
}

提出先

作品ギャラリー

  • lecture/design_with_prototyping/03.動画の再構成.txt
  • 最終更新: 2018/11/16 09:55
  • by baba