補講2 動画の作成と再生

Processingでは、実行画面やPImage型の画像変数に含まれるものを静止画として保存できる。これとは別に、Processingには「ムービーメーカー」というツールが含まれていて、これを使うと複数の静止画から動画を作ることができる。
また、デフォルトの状態ではProcessingの実行画面で動画を再生することはできないが、ライブラリを追加すればMPEG4やMOV形式の動画を再生することもできる。


動画の作成


課題 1

    静止画を出力するプログラム
    int r;
    
    void setup() {
      size(400, 300);
      r=20;
    }
    
    void draw() {
      background(0);
      ellipse(mouseX, mouseY, r*2, r*2);
      if (mousePressed) {
        if (mouseButton==LEFT) {
          r++;
        }
        if (mouseButton==RIGHT) {
          r--;
        }
      }
      saveFrame("data/###.png"); // 実行画面を画像として保存(名前はフレーム数)
      // 300フレーム分出力したら終了
      if (frameCount>=300){
        exit();
      }
    }
    

  1. Processingのエディタに上のサンプルプログラムのコードをコピー&ペーストする。
  2. 「imgs2_1」という名前で保存する (今回は全部で4つのプログラムを作る)。
  3. 実行して円を適当に操作する。

  4. 「ツール」→「ムービーメーカー」を選択する。


  5. フレームレートを30に、圧縮の設定をAnimationにして、「オリジナルと同じサイズ」にチェックを入れて「選択」ボタンをクリックする。「imgs2_1」フォルダの中の「data」フォルダ(300枚の画像があるフォルダ)を選んだら「動画を作成」ボタンを押し、デスクトップに「1動画1.mov」という名前で保存する。

  6. これで300枚の画像を使った動画ができたはずだが、演習室の環境ではこの形式の動画を再生できない。そこで、以下のようにしてProcessingで動画を再生する。
    自宅環境でこの形式の動画を再生できる場合は、これ以降の「viewerで動画を確認」に当たる部分では、Processingのプログラムを使わずに動画を再生して確認してよい。

  7. 「ファイル」→「新規」で新しいProcessingのエディタを開き、「viewer」という名前で保存する。

  8. 以下のコードを「viewer」にコピー&ペーストする (エラーを示す赤線がたくさん出る)。
  9. import processing.video.*;
    Movie movie;
    
    void setup() {
      size(400, 300);
      movie = new Movie(this, "1動画1.mov");
      movie.play();
    }
    
    void draw() {
      image(movie, 0, 0);
    }
    
    void movieEvent(Movie m) {
      m.read();
    }
    

  10. 「スケッチ」→「ライブラリをインポート」→「ライブラリを追加」を選択する。

  11. 検索欄に「video」と入力し、表示されたもののうち「Video | GStreamer-based video library for Prosessing」を選び、「Install」ボタンをクリックする (これでインストールが始まる。完了までしばらく時間がかかる)。

  12. インストールが完了したら、インストール用のウィンドウを閉じる。エディタを確認するとエラーがなくなっているはず。

  13. デスクトップの「1動画1.mov」を「viewer」にドラッグ&ドロップしてから「viewer」のプログラムを実行する。すると、さっき作った動画が再生されるはず。

  14. ふたたび「imgs2_1」を実行し、さっきと違う動作になるようにしてもう一度300枚の静止画を作る。
  15. ムービーメーカーでデスクトップに「1動画2.mov」を出力する (静止画の入っているフォルダの設定は変えずに、出力時のファイル名だけ変更)。
  16. デスクトップの「1動画2.mov」を「viewer」にドラッグ&ドロップし、プログラムのファイル名のところを「1動画2.mov」に書き換えて再生してみる。

  17. この時点でできる提出ファイル

    ※ 余裕があるなら、円の動作部分のプログラムを変更して動画を作成してもかまわない(マウスと関係なく円が上下左右の壁で反射、重力を受けたボールのように床で反射、回転する多角形など)

2つの動画の合成

課題 2

  1. 「ファイル」→「新規」で新しいProcessingのエディタを開き、「imgs2_2」という名前で保存する。
  2. 「imgs2_2」に以下のコードをコピー&ペーストする。
  3. import processing.video.*;
    Movie movie1, movie2;
    
    void setup() {
      size(400, 300);
      movie1 = new Movie(this, "1動画1.mov");
      movie2 = new Movie(this, "1動画2.mov");
      movie1.play();
      movie2.play();
    }
    
    void draw() {
      tint(#ffff00, 128);  // 以降の表示を半透明の黄色にする
      image(movie1, 0, 0); // 「1動画1.mov」のフレームを表示 
      tint(#00ffff, 128);  // 以降の表示を半透明のシアンにする
      image(movie2, 0, 0); // 「1動画2.mov」のフレームを表示
      saveFrame("fdata/###.png");
      if (frameCount>=300){
        exit();
      }
    }
    
    void movieEvent(Movie m) {
      m.read();
    }
    

  4. デスクトップの「1動画1.mov」「1動画2.mov」を「imgs2_2」にドラッグ&ドロップする。

  5. 「imgs2_2」を実行する。

  6. ムービーメーカーで「imgs2_2フォルダの中のfdataフォルダ」にあるファイルから「2動画.mov」を作る (保存先はデスクトップ)。
  7. 「2動画.mov」を「viewer」にドラッグ&ドロップし、「viewer」のファイル名のところを「2動画.mov」に書き換えてこの動画を再生してみる。


  8. ここで作る提出物

動画と静止画の合成

課題 3

  1. 「ファイル」→「新規」で新しいProcessingのエディタを開き、「imgs2_3」という名前で保存する。
  2. 「imgs2_3」に以下のコードをコピー&ペーストする。
  3. import processing.video.*;
    Movie movie;
    PImage img;
    
    void setup() {
      size(400, 300);
      img = loadImage("3背景.jpg");
      img.resize(width, height);
      movie = new Movie(this, "2動画.mov");
      movie.play();
    }
    
    void draw() {
      PImage tempImage = img.get();
      image(movie, 0, 0);
      loadPixels();
      for (int j=0; j<height; j++){
        for (int i=0; i<width; i++){
          color cb = img.pixels[i+j*width]; // 静止画の色
          color cm = pixels[i+j*width];     // 動画の色
          tempImage.pixels[i+j*width] = color(red(cb)+red(cm), green(cb)+green(cm), blue(cb)+blue(cm));
        }
      }
      image(tempImage, 0, 0);
      saveFrame("fdata/###.png");
      if (frameCount>=300){
        exit();
      }
    }
    
    void movieEvent(Movie m) {
      m.read();
    }
    

  4. デスクトップの「2動画.mov」を「imgs2_3」にドラッグ&ドロップする。
  5. 適当に画像検索してJPEG形式の画像をダウンロードし、「3背景.jpg」という名前に変更する。
  6. 「3背景.jpg」を「imgs2_3」にドラッグ&ドロップする。

  7. 「imgs2_3」を実行する。

  8. ムービーメーカーで「imgs2_3フォルダの中のfdataフォルダ」にあるファイルから「3動画1.mov」を作る (保存先はデスクトップ)。
  9. 「3動画1.mov」を「viewer」にドラッグ&ドロップし、「viewer」のファイル名のところを「3動画1.mov」に書き換えてこの動画を再生してみる。


  10. 「imgs2_3」のプログラムを以下のように書き換えて実行する。
  11.       tempImage.pixels[i+j*width] = color(red(cb)+red(cm), green(cb)+green(cm), blue(cb)+blue(cm));
    
          if (red(cm) == 0 && green(cm) == 0 && blue(cm) == 0) {
            tempImage.pixels[i+j*width] = color(0);
          }
    


  12. ムービーメーカーで「imgs2_3フォルダの中のfdataフォルダ」にあるファイルから「3動画2.mov」を作る (保存先はデスクトップ)。
  13. 「3動画2.mov」を「viewer」にドラッグ&ドロップし、「viewer」のファイル名のところを「3動画2.mov」に書き換えてこの動画を再生してみる。
  14. ここで作る提出物

提出

戻る inserted by FC2 system