Processingという言語を使って、プログラミングの基礎を学んでいくシリーズ。
第4回目はframeCountを使ったアニメーションの方法について解説します！

完成のイメージの様子は以下になります！

目次
  1. 1. ウィンドウの作成
  2. 2. 長方形の描画
  3. 3. プログレスバーのアニメーションを表現する
  4. 4. おわり

1. ウィンドウの作成

まずは準備として、横600×縦300のウィンドウを作成します。

void setup() {
  size(600, 300);
  frameRate(20);
}

2. 長方形の描画

次に長方形の描画をします。これはプログレスバーのアニメーションの、背後にあたる長方形になります。

void draw() {
  background(255);
  fill(255);
  rect(100, 100, 400, 100);
}

3. プログレスバーのアニメーションを表現する

最後にプログレスバーのアニメーションです。先ほどの長方形に重ねる形で、プログレスバーを作成します。

この時、長方形の横の長さとしてframeCountを使用します。これで時間経過につれて長方形の横が長くなっていきます。なおプログレスバーが背後の長方形の横幅を超えて、さらに画面外に飛び出してしまってもいいものとします。(if文などで制御はしない。はみ出てOK！)

また今回は、20秒後に400px分進めたいので、void setup()内でframeRateを用いて描画の頻度について指定してあげます。

400÷20=20で、frameRateの値は20となります。

void setup() {
  size(600, 300);
  frameRate(20);
}

void draw() {
  background(255);
  fill(255);
  rect(100, 100, 400, 100);
  fill(255, 0, 0);
  rect(100, 100, frameCount, 100);
}

4. おわり

これでframeCountを使って、プログレスバーのアニメーションを作成することができました！frameCountはアニメーションを表現する際に、よく使うので頭の片隅に入れておきましょう〜

最後におまけとなりますが、20秒後に400pxきちんと進んだかを確かめるために、millis()を使ってデバッグをすることができます。以下にその例を示します。

millis()はプログラムを起動してから、何ミリ秒が経過したかを示すものです。1000ミリ秒で1秒となるため、millis()を1000で割っています。

void setup() {
   size(600, 300);
   frameRate(20);
}

void draw() {
   // 起動してからの秒数を数える
   int s = millis() / 1000;

   background(255);
   fill(255);
   rect(100, 100, 400, 100);
   fill(255, 0, 0);
   rect(100, 100, frameCount, 100);
   println(s+"second");
}