今回はProcessingでアニメーションをする方法について解説していきます。自分の手元で動くものが作れると、さらにプログラミングが楽しくなると思います！

目次
  1. 前提: プログラムには準備と描画がある
  2. 1. frameCountを使ってアニメーションを表現する
  3. 2. マウスの動きに合わせて描画する

前提: プログラムには準備と描画がある

今までの記事では準備と描画について、特に意識することなくプログラムを書いていましたが、実は準備と描画という2つの段階があります。

準備には、

void setup()
{
size(400, 300);
background(255, 255, 255);
}

といった感じで、void setup() {} を使います。

描画には、

void draw()
{
fill(255, 0, 0);
circle(width/2, height/2, 150);
}

のように、void draw() {} を使います。

1. frameCountを使ってアニメーションを表現する

Processingには、frameCountというメソッドがあります。

プログラムを実行した瞬間から「1, 2, 3…」と高速でカウントが始まります。この数字＝実行してからのフレーム数、draw()内で書いたものの描画された回数となります。

参考: frameCountの公式ドキュメント

実際にframeCountの値がどのように変化していくのかを、動画にしたものを共有します。

frameCountの値が高速で増えているのがわかるかと思います。
コードは以下になります。

void setup() {
  size(500, 400);
  frameRate(30);
}

void draw() {
  background(255);
  fill(0);
  textSize(32);
  text("frameCount: " + frameCount, width/2-100, height/2);
}

これを使うと、例えば十字架が左から右に移動していくアニメーションなんかも作成することができます。

コードは以下になります！

void setup() {
  size(500, 400);
  frameRate(30);
}

void draw() {
  background(255, 0, 0);
  fill(255);
  noStroke();
  rectMode(CENTER);
  rect(frameCount-300/2, height/2, 300, 100);
  rect(frameCount-300/2, height/2, 100, 300);
}

2. マウスの動きに合わせて描画する

Processingでは、mouseX, mouseYを使ってマウスの位置を取得することができます。

十字架をマウスに追従させて表示させることもできます！

コードは以下になります。

void setup() {
  size(500, 400);
  frameRate(30);
}

void draw() {
  background(255, 0, 0);
  fill(255);
  noStroke();
  rectMode(CENTER);
  rect(mouseX, mouseY, 300, 100);
  rect(mouseX, mouseY, 100, 300);
}