1b-09 アニメーション

画像シーケンスからアニメーションを作成する方法を学ぶ

画像シーケンスでアニメーションをつくる

• 下記プログラムを実行する前に、画像データをsketchのdataフォルダ内に読み込んでおく
• ここをクリックして素材をダウンロード

for文をつかわずに、画像を読み込む

int numFrames = 12; //アニメーションのフレーム数
int frame = 0; // 表示するフレーム番号
PImage[] images = new PImage[numFrames]; //アニメーション画像の配列

void setup() {
  size(320, 240);
  frameRate(6);
  // 画像の読み込み
  images[0] = loadImage("animation-000.jpg");
  images[1] = loadImage("animation-005.jpg");
  images[2] = loadImage("animation-010.jpg");
  images[3] = loadImage("animation-015.jpg");
  images[4] = loadImage("animation-020.jpg");
  images[5] = loadImage("animation-025.jpg");
  images[6] = loadImage("animation-030.jpg");
  images[7] = loadImage("animation-035.jpg");
  images[8] = loadImage("animation-040.jpg");
  images[9] = loadImage("animation-045.jpg");
  images[10] = loadImage("animation-050.jpg");
  images[11] = loadImage("animation-055.jpg");
}

void draw() {
  frame++; 
  // ループ処理
  if (frame == numFrames) {
    frame = 0;
  }
  image(images[frame], 0, 0); //画像を表示
}

for文を使ってたくさんの画像を読み込む

int numFrames = 60; //アニメーションのフレーム数
PImage[] images = new PImage[numFrames]; //アニメーション画像の配列

void setup() {
  size(320, 240);
  frameRate(30);
  // 画像の読み込み
  for (int i = 0; i < images.length; i++) {
    images[i] = loadImage("animation-" + nf(i, 3) + ".jpg");
  }
}

void draw() {
  int frame = frameCount % numFrames; //現在のフレームをアニメーションのフレーム数で割った余りを代入
  image(images[frame], 0, 0); //画像を表示
}

練習：動きを加える

1. 表示の際、画像をほんの少しランダムに配置する
2. 表示の際、画像を1pxずつ下げて表示する
3. 表示の際、不透明度を設定し、残像のように見せる

マウスの動きで、アニメーションをコントロールする

int numFrames = 60; //アニメーションのフレーム数
PImage[] images = new PImage[numFrames]; //アニメーション画像の配列

void setup() {
  size(320, 240);
  frameRate(30);
  // 画像の読み込み
  for (int i = 0; i < images.length; i++) {
    images[i] = loadImage("animation-" + nf(i, 3) + ".jpg");
  }
}

void draw() {
}

void mouseMoved() {
  int frame = int(map(mouseX, 0, width, 0, numFrames)); //マウスポインタのx座標を0以上60未満の値へマッピング
  image(images[frame], 0, 0);
}

練習：おみくじ（画像版）をつくってみる

• おみくじの画像（大吉、中吉、小吉、吉）をイラストレータまたはPhotoshopで作成する。画像形式はPNG形式を推奨。
• 以下の演出を入れる
  • プログラムを実行すると、おみくじのアニメーションがスタートする。大吉、中吉、小吉、吉の順
  • 画面をマウスでクリックすると、アニメーションがストップする。
  • キーボードを押すと、おみくじのアニメーションがスタートする。