プレゼンテーション法 » 第３回：Processing入門（２）：アニメーションを作る

<< 第２回：Processing入門 | top | 第4回：Processing入門(3)：配列、ループ、3D導入 >>

第３回：Processing入門（２）：アニメーションを作る

アニメーションを作る

前回のProcessing入門では、Processingを用いて簡単な図形を表示する方法について学びました。今日はさらに発展させて、これらの図形をアニメーションさせる方法について学びます。

直線を動かす(1)

int x = 0;

void setup( ){
  size(200,200);
  stroke(128);
  framerate(30);
}

void draw( ){
  background(51);
  line(x, 0, x, height);
  x=x+1;
}

アニメーションをProcessingで作成するには、setup()関数と、loop()関数を連携させます。

setup()：プログラムが開始されたとき一度だけ実行される機能です。loop()関数が実行され、スクリーンにイメージが描かれる前に、例えば、スクリーンの大きさや、背景色、ロードするイメージなど、初期の環境の属性を決定するために使われます。setup()内に宣言された変数はloop()の中ではアクセスできません。
draw()：プログラムが終了するか、noLoop()関数が呼ばれるまでは、プログラムを実行し続ける。redraw()関数が呼ばれると、(止まっていた)描画を1回行う。また、loop()関数が呼ばれると、繰り返し実行を再開する。
framerate()：アニメーションの再生スピードを設定する。

直線を生成する際に用いられている、"height"という変数は、画面のy方向の大きさ(pixel)が予め代入された予約語です。画面の幅を得たい場合には、"width"を指定します。

直線を動かす(2)

先程の例では、移動する直線が画面の端を越えて、永久に右方向への移動を実行を繰り返していました。このプログラムを線が画面からはみ出したら、また原点に戻って実行をするように改良してみましょう。

int x = 0;

void setup( ){
  size(200,200);
  stroke(128);
  framerate(30);
}

void draw( ){
  background(51);
  line(x, 0, x, height);
  x=x+1;
  if(x > width){
    x = 0;
  }
}

if文で条件分岐させて、もし、x座標の位置が画面の幅"width"よりも大きくなったら(つまり線が画面の右からはみ出したら)、x座標を0に初期化(つまり左端へ移動)しています。

直線を動かす(3)

さらにプログラムを拡張して、縦横二つの線が同時に上下左右に動くようにしてみます。

int x = 0, y = 0;

void setup( ){
  size(200,200);
  stroke(128);
  framerate(30);
}

void draw( ){
  background(51);
  line(x, 0, x, height);
  line(0, y, width, y);
  x=x+2;
  y=y+3;
  if(x > width){
    x = 0;
  }
  if(y > height){
    y = 0;
  }
}

アニメーションのスタート、ストップ

アニメーションの停止・再開は、noLoop()関数、loop()関数を用いて、コントロールすることができる。

noLoop()：draw()で設定された、再生中のアニメーションを停止する
loop()：noLoop()で停止中のアニメーションをを再開する

int x = 0, y = 0;

void setup( ){
  size(200,200);
  stroke(128);
  framerate(30);
  noLoop();
}
void draw( ){
  background(51);
  line(x, 0, x, height);
  line(0, y, width, y);
  x=x+2;
  y=y+3;
  if(x > width){
    x = 0;
  }
  if(y > height){
    y = 0;
  }
}
void mousePressed(){
  loop();
}
void mouseReleased() {
  noLoop();
}

インタラクション(1)：キーボードによるインタラクション

キーボードの入力に応じて、線の位置が変化するようにしてみます。

int x, y;

void setup( ){
    size(200,200);
    stroke(128);
    framerate(30);
    x = width/2;
    y = height/2;
}
void draw( ){
    background(51);
    line(x, 0, x, height);
    line(0, y, width, y);
    if(keyPressed) { 
      if(keyCode == RIGHT){
        x += 1;
      }else if(keyCode == LEFT){
        x -= 1;
      }else if(keyCode == DOWN){
        y += 1;
      }else if(keyCode == UP){
        y -= 1;
      }
    }
}

キーボード上の矢印キー(→、↑、←、↓)を押すと、線の交差位置が上下左右に動きます。

"if(keyPressed)"関数は、キーが押されているときに実行されます。この例では、キーが押されると、その押されたキーの種類を判定して、線の座標を変化させています。

インタラクション(2)：マウスによるインタラクション

次に、マウスによる簡単なインタラクションを試してみます。マウスポインタに線の交差が重なるように、2つの直線が移動します。

void setup( ){
  size(200,200);
  stroke(128);
  framerate(30);
}

void draw( ){
  background(51);
  line(mouseX, 0, mouseX, height);
  line(0, mouseY, width, mouseY);
}

マウスの位置を検出するには、"mouseX"と"mouseY"という2つの予約語を使います。それぞれマウスポインタのX軸座標とY軸の座標が格納されています。

<< 第２回：Processing入門 | top | 第4回：Processing入門(3)：配列、ループ、3D導入 >>