2019プログラミング講座１５：ビデオのコントロール

Processingでは外部データとして、画像や音声に加えて映像を扱うことが可能です。今回は映像を扱う手法を学びます。Processingで映像を扱うためには、videoライブラリを使用します。
では、最初に映像データを用意しましょう。今回はmp4形式の映像データを用意します。Processingの「スケッチメニュー」から、「ファイルを追加」へと進み、用意した映像データを選択し「開く」ボタンを押してスケッチフォルダー内のdataフォルダーに格納します。準備ができたら、以下のコードを記述しましょう。

映像のループ再生

import processing.video.*; //videoライブラリの読み込み

Movie mov; //Movie変数を宣言しmovと名付ける

void setup() {
  size(800, 600); //映像の縦横比に合わせたウィンドウサイズが望ましい
  background(0);
  mov = new Movie(this, "XXXX.mov"); //変数movに映像データを格納する XXXXは映像データの名称に合わせる
  mov.loop(); //映像をループさせる
}

void movieEvent(Movie m) { 
  m.read(); //映像を読み取る
}

void draw() {    
  image(mov, 0, 0, width, height); //映像を画面に表示する
}

映像の再生速度のコントロール
次に読み込んだ映像の再生速度をコントロールするコードを記述します。

import processing.video.*; //videoライブラリの読み込み

Movie mov; //Movie変数を宣言しmovと名付ける

void setup() {
  size(800, 600);
  background(0);
  mov = new Movie(this, "octopus.mov"); //変数movに映像データを格納する XXXXは映像データの名称に合わせる
  mov.loop(); //映像をループさせる
}

void movieEvent(Movie m) { 
  m.read(); //映像を読み取る
}

void draw() {    
  image(mov, 0, 0, width, height); //映像を画面に表示する
  
  //map関数を使ってmouseのx座標の値0〜widthを0.1〜２までの値に変換する
  float newSpeed = map(mouseX, 0, width, 0.1, 2); 
  mov.speed(newSpeed); //変換された0.1〜２までの値を映像の再生速度に置き換える
}

映像のフレームをコントロール
映像のフレームの進行をマウスのX座標に関連づけるコードを記述してみましょう。

import processing.video.*;

Movie mov;

void setup() {
  size(800, 600);
  background(0);

  mov = new Movie(this, "octopus.mov");

  // 初期値として映像をポーズ（停止）させておきます。 
  mov.play();
  mov.jump(0);
  mov.pause();
}

void draw() {

  if (mov.available()) {
    mov.read();
    float f = map(mouseX, 0, width, 0, 1); //マウスのx座標を0〜１の値に置き換え変数fに代入
    float t = mov.duration() * f; //変数tにムービーの長さ（秒単位の位置）に0~1までの数値をかけて代入
    mov.play();
    mov.jump(t); //ムービーの再生箇所をtの位置にジャンプ
    mov.pause();
  }  

  image(mov, 0, 0, width, height);
}

２つの映像データを表示する
２つの映像データを実行ウィンドウに配置して再生します。

import processing.video.*;

Movie mov1,mov2; //変数を２つ用意する

void setup() {
  size(800, 400);
  background(0);

  mov1 = new Movie(this, "XXXX.mov");
  mov2 = new Movie(this, "YYYY.mov");

  mov1.play();
  mov1.pause();
  
  mov2.play();
  mov2.pause();
}

void draw() {

  if (mov1.available()) {
    mov1.read();    
    mov1.play();
    mov1.loop();
  }  
  
  if (mov2.available()) {
    mov2.read();    
    mov2.play();
    mov2.loop();
  }  

  image(mov1, 0, 100, 400, 200);
  image(mov2, 400, 100, 400, 200);
}

２つの映像データの再生をマウスでコントロール
２つの映像データを実行ウィンドウに配置してマウスのx座標で再生と停止を制御します。

import processing.video.*;

Movie mov1,mov2;

void setup() {
  size(800, 400);
  background(0);

  mov1 = new Movie(this, "octopus.mov");
  mov2 = new Movie(this, "tuna.mov");

  mov1.play();
  mov1.pause();
  
  mov2.play();
  mov2.pause();
}

void draw() {

  if (mov1.available()) {
    mov1.read();
    
    mov1.play();
    mov1.loop();
  }  
  
  if (mov2.available()) {
    mov2.read();
    
    mov2.play();
    mov2.loop();
  }  
  //マウスのx座標をウィンドウの中心から右か左かを判定して映像を再生
  if(mouseX<width/2){
    image(mov1, 0, 100, 400, 200);
  }else{
    image(mov2, 400, 100, 400, 200);
  }
  
}

総合課題３：
上記の映像のコントロール方法を応用して作品を制作すること。
自分で撮影した映像素材を使うこと。