【Processing】translate()を使ってボールをバウンドさせるアニメーションを作る

こんにちは、コンスキです。

今回はtranslate関数を使ってボールがバウンドするアニメーションを作る方法をご紹介します。

これまでのアニメーション
translate関数を使ったスクリプト
仕組み
- translate()の意味

これまでのアニメーション

Processingを使ってボールを動かすアニメーションはもう作ったでしょうか？

まだ作っていない方は、こちらを参考に作ってみてください。

ご自身で作られた方も、もしかするそのアニメーションは次のようなものではないですか？

変数x とyを用意する
ellipse関数の引数に変数x、yを設定する
変数x、yに速度を足すことで円を移動させる

以上のようにアニメーションを作る方法もありますが、translate関数を使ってアニメーションを作ることもできます。

translate関数を使ったスクリプト

translate関数を使ったスクリプトの例を下に示します。

PVector velocity = new PVector(10, 10);
PVector position = new PVector(width/2, height/2);
float radius = 15;
int   intRadius = int(radius);

void setup() {
  size(600, 400);
}
void draw() {
  if (position.x > width - intRadius) {
    velocity = new PVector(-velocity.x, velocity.y);    
  }
  if (position.x < intRadius) {
    velocity = new PVector(-velocity.x, velocity.y);    
  }

  if (position.y > height - intRadius) {
    acceleration = new PVector(acceleration.x, -acceleration.y);
    velocity = new PVector(velocity.x, -velocity.y);  
  }
  if (position.y < intRadius) {
    acceleration = new PVector(acceleration.x, -acceleration.y);
    velocity = new PVector(velocity.x, -velocity.y);  
  }

  background(0);
  translate(position.x, position.y);
  position.add(velocity);
}