第15回 動画の作成

Processingには「ムービーメーカー」というツールが含まれていて、静止画を組み合わせて mov 形式の動画を作成できる。
今回はこの元になる静止画をプログラムで作成し、それを元にして動画を作る。

今回のプログラムの最終的な機能

プログラムを実行すると実行画面に「ランダムに移動する円」「端点、コントロールポイントが直線的に移動するベジエ曲線」「元画像の色相を色立体上で360°回転させるような変更」が続けて表示され、自動的に終了する。
dataフォルダの中に「image1」「image2」「image3」フォルダが自動的に作成され、その中にそれぞれのフレームの画像が 000.png~199.png として保存される。

移動する円

概要

ここで行っていることは画像処理とは直接関係ないので詳しくは解説しないが、円に「位置」「速度 (速さと向きの情報を持った量)」の情報を持たせ、毎フレームランダムに速度の向きだけを少しずつ変更することで円がフラフラしながら進むような動きを作成している。

課題 1

ベースのプログラム (実行しても黒背景に0~599の数字が表示されて終了するだけ。「元.pngがない」というエラーは表示されるが、実行はできる)
// 動画1用の変数
float r=20;
PVector pos; // 円の位置
float speed; // 円の移動速さ
PVector v;   // 円の移動速度
// 動画2用の変数
PVector[] pBezier = new PVector[4]; // ベジエ曲線のアンカー点、コントロール点の座標
PVector[] vBezier = new PVector[4]; // その移動速度
// 動画3用の変数
PImage img; // 背景

void setup() {
  size(400, 300);
  // 動画1用の初期化
  pos = new PVector(width/2, height/2);
  float angle = random(0, PI*2);
  speed = 5;
  v = new PVector(speed*cos(angle), speed*sin(angle));
  // 動画2用の初期化
  for (int i=0; i<4; i++) {
    pBezier[i] = new PVector(random(width*0.3, width*0.7), random(height*0.3, height*0.7));
    vBezier[i] = new PVector(random(-1, 1), random(-1, 1));
  }
  // 動画3用の初期化
  img = loadImage("元.png");
}


void draw() {
  if (frameCount<200) {
    createFrames1(frameCount);
  } else if (frameCount<400) {
    createFrames2(frameCount-200);
  } else if (frameCount<600) {
    createFrames3(frameCount-400);
  } else {
    exit();
  }
}

// ランダムに移動する円
void createFrames1(int f) {
  background(0);
  // プログラム開始からのフレーム数を左上に表示
  text(frameCount, 10, 15);
  // 画面に表示されているものを画像として保存
  save("data/image1/" + nf(f, 3) + ".png");
}

// ベジエ曲線
void createFrames2(int f) {
  background(0);
  // プログラム開始からのフレーム数を左上に表示
  text(frameCount, 10, 15);
  // 画面に表示されているものを画像として保存
  save("data/image2/" + nf(f, 3) + ".png");
}

void createFrames3(int f) {
  background(0);
  // プログラム開始からのフレーム数を左上に表示
  text(frameCount, 10, 15);
  // 画面に表示されているものを画像として保存
  save("data/image3/" + nf(f, 3) + ".png");
}
  1. Processingのエディタに上のサンプルプログラムのコードをコピー&ペーストする。
  2. 「img15」という名前で保存する。
  3. 実行し、0~599が表示されて自動的にプログラムが終了すること、dataフォルダの中にimage1~image3のフォルダが作られ、それぞれの中に真っ黒な画像 000.png~199.png ができることを確認する。



  4. createFrames1関数の「background(0);」の下に以下のコードを追加する。
  5. (posが円の位置、vが速度。この関数が呼ばれるたびに v の分だけ pos を変化させ、v の向きにもランダムな値を加える)


  6. 実行し、左上の数値が0~199の間だけ円がこのように動くこと、image1フォルダの中の画像にそれぞれ円があることを確認する。



  7. Processingのエディタで「ツール」→「ムービーメーカー」を実行し、図のように選択して実行し、ファイル名を「1.mov」として適当なところに保存する。
演習室の環境では mov形式の動画を再生できない。 動画を見るには以下の手順が必要になる。
  1. ファイル→新規でもう一つのProcessingエディタを起動する
  2. そこに以下のコードを貼り付け、「viewer」という名前で保存する。
  3. (あちこちにエラーの赤線が出る)
    import processing.video.*;
    Movie movie;
    
    void setup() {
      size(400, 300);
      movie = new Movie(this, "1.mov");
      movie.play();
    }
    
    void draw() {
      image(movie, 0, 0);
      if (movie.time()==movie.duration()){
        exit();
      }
    }
    
    void movieEvent(Movie m) {
      m.read();
    }
  4. viewerの上のメニューから「スケッチ」→「ライブラリをインポート」→「ライブラリを追加」を選ぶ。
  5. 検索欄に「video」と入力し、ひっかかったもののうち「Video | GStreamer ...」を選んでインストールする。
  6. (インストールには少し時間がかかる。完了すると viewer のプログラムのエラーの赤線は消える)


  7. viewerに 1.mov をドラッグ&ドロップする。
  8. viewerを実行する (1.mov が再生される)。
自宅の環境で普通にmov形式の動画を再生できる場合は上記の手順は不要。
再生環境がない場合はまず上記の方法を試し、1.mov が再生できない場合は、たとえばmov形式に対応した無料の再生ツールをインストールして確認する。
(上記の「viewer」で再生できないケースは、多くの場合Processingのインストール先のパスに日本語が含まれていることが原因だが、修正方法が煩雑なので)

ベジエ曲線

概要

bezier文を使うとベジエ曲線を描くことができる (参考)。
2次元のベジエ曲線を描くときの引数は8つで、それぞれが
第1, 2引数 : 1つ目の端点の x, y 座標
第3, 4引数 : 1つ目の端点のコントロールポイントの x, y 座標
第5, 6引数 : 2つ目の端点のコントロールポイントの x, y 座標
第7, 8引数 : 2つ目の端点の x, y 座標
にあたる。ここでは端点を動かさずに、コントロールポイントだけを動かしてベジエ曲線の形の変わり方を観察する。

課題 2

  1. createFrames2関数の「background(0);」の下に以下のコードを追加する。
  2. (pBezierはベジエ曲線に必要な4つの点の座標を入れた配列。第0, 3要素が端点、第1, 2要素がコントロールポイントの位置)


  3. 実行し、左上の数値が200~399の間にベジエ曲線が変形していくことと、image2フォルダの中の画像がそれぞれのタイミングでの図であることを確認する。



  4. Processingのエディタで「ツール」→「ムービーメーカー」を実行し、元ファイルのフォルダとして「image2」を選んで、ファイル名を「2.mov」として適当なところに保存する。
  5. 「2.mov」を viewer にドラッグ&ドロップして viewer のコードの「1.mov」のところを「2.mov」にして動画を再生する。
  6. (または適当な再生ツールで 2.mov を再生する)

色合いの変更

概要

tint文を使ったあとで画像を表示すると、画像の色合いが変わって表示される (参考)。
tint文の引数の与え方はいろいろあるが、3つにした場合はそれぞれR, G, B成分にあたる。
引数に入れた値に応じてその成分の色が強められたり弱められたりする。

課題 3

  1. ペイント3Dまたはペイントで「サイズ400x300ピクセルで、白背景に3色以上の適当な図形を描いた」元.png を作る。


  2. 「元.png」を img15 にドラッグ&ドロップする。
  3. createFrames3関数の「background(0);」の下に以下のコードを追加する。
  4. (経過フレーム数に応じた色相をもつ色を作り、そのRGB成分を引数として tint文で図の色合いを変えている)
    (noTint文は tint文で変えた色合いを元に戻す命令)


  5. 実行し、左上の数値が400~599の間に元画像に赤→黄→緑→シアン→青→マゼンタ→赤のような色合いの変化が起こることと、image3フォルダの中の画像がそれぞれのタイミングでの図であることを確認する。



  6. Processingのエディタで「ツール」→「ムービーメーカー」を実行し、元ファイルのフォルダとして「image3」を選んで、ファイル名を「3.mov」として適当なところに保存する。
  7. 「3.mov」を viewer にドラッグ&ドロップして viewer のコードの「2.mov」のところを「3.mov」にして動画を再生する。
  8. (または適当な再生ツールで 3.mov を再生する)

  9. 3つの動画が想定通りできたことを確認したら、1.mov~3.movを選択してzip化する。

提出


戻る

inserted by FC2 system