Processingことはじめ - Androidのメモとか

アニメーションが作れるぞ！

ポキオ Processing ことはじめ

アニメーションの世界へ

いやー、良い世の中になってきたもので、いろいろな制作活動に対してハードルが下がってきていることを実感します。アニメーション作成に対してもそれが当てはまります。

processing.org

今回は、（今更ですが）Processingでアニメーション作成をしてみました。

まずはインストール

ここから無料でダウンロードできます。

processing.org

macOS/Winの他に、LinuxやRaspberry Pi向けにも対応しているのが良いですね。ちなみに私の環境ですが、

MacBook Air (Retina, 13-inch, 2018)

Ver. 11.6.6 Big Sur

Processing 4.2 (macOS • Intel 64-bit)

です。

早速起動

スプラッシュ画面が表示され…、

ポキオ Processing ことはじめ

その後にコーディングするエディタ画面が表示されます。

ポキオ Processing ことはじめ

色味こそ違いますが、Arduino IDEにそっくりですね。

processing.org

そして、コーディングのやり方もArduino IDEに似ていて、 setup() 関数内で初期化を行い、その後繰り返し実行される draw() 関数内で描画を行う形です。

とりあえずアニメーションを作ってみました

Processingでコーディングをして、それをPNGでパラパラと1コマずつ出力し、ProcessingでMP4ファイルに変換をかけてみました。まず出来たのもはこちら。

推しのビアバーの動画を勝手に #processing で作ってみた。（営業妨害） pic.twitter.com/8j3VXLi2xw
— ポキオ (@pokiiio) 2023年2月26日

ビールの絵文字が画面中央から溢れ出てくるという動画です。（最後に推しのビアバーのロゴも表示）

やっつけで書いたコードはこちら。(色々と間違ってたらごめんなさい)

PImage image, logo;

int arrayNum = 100;
int[] array = new int[arrayNum];

int fps = 30;
int beerLengthSec = 5;
int logoLengthSec = 3;

void setup() {
  size(720, 720);
  frameRate(fps);
  smooth(8);

  image = loadImage("beer.png");
  logo = loadImage("kakurenbo.jpg");
}

void draw() {
  background(191);

  if (frameCount < beerLengthSec * fps) {
    array[0] = (int) random(1, 360);
  } else if (frameCount < beerLengthSec * fps + arrayNum + logoLengthSec * fps) {
    array[0] = 0;
    showLogo((int) (frameCount - beerLengthSec * fps));
  } else {
    showLogo((int) (frameCount - beerLengthSec * fps));
    noLoop();
    return;
  }

  for (int i = 0; i < arrayNum; i++) {
    showImage(array[i], i);
  }

  for (int i = arrayNum - 1; i > 0; i--) {
    array[i] = array[i-1];
  }

  saveFrame("frames/######.png");
}

void showImage(int angle, int time) {
  if (angle == 0) {
    return;
  }

  float distance = pow(time, 1.4);
  float size = pow(time, 1.25);

  image(image, width/2 + distance * cos(radians(angle)) - size/2, height/2 + distance * sin(radians(angle)) - size/2, size, size);
}

void showLogo(int time) {
  float size = pow(time, 1.4);

  if (size > width) {
    size = width;
  }

  image(logo, width/2 - size/2, height/2 - size/2, size, size);
}