元Webデザイナー兼コーダーの備忘録

ウェブデザインやプログラミング、ブログのカスタマイズなどについてアウトプットしています。

 メニュー

» HTML入門のまとめはこちらです。

Processing:PVectorと加速度

The Nature of Code(PDF版)からPVectorについて取り上げます。PVectorを用いた加速度の書き方を学びます。Processingでプログラムを書いて、動作を確認します。動作を確認できるところがProcessingの楽しいところです。

加速度(acceleration)

以下の3つの加速度について見ていきますが、この記事では「一定な加速」と「ランダムな加速」について書きます。

  • 一定な加速
  • ランダムな加速
  • マウスに向かう加速

一定な加速

参考例は、PVectorと速度と加速度#PVectorを用いた加速度の例で紹介したプログラムです。そちらに加筆したものを再掲します。

//Vector Motion: Acceleration
//A constant acceleration

class Mover{
  PVector location;
  PVector velocity;
  PVector acceleration;
  float topspeed;

  //初期化・コンストラクタ
  Mover(){
    location = new PVector(width/2, height/2);
    velocity = new PVector(0, 0);
    acceleration = new PVector(-0.001, 0.01);
    topspeed = 10;
  }

  //ボールの位置の更新
  void update(){
    velocity.add(acceleration);
    velocity.limit(topspeed);
    location.add(velocity);
  }

  //ボールの描画
  void display(){
    stroke(0);
    fill(175);
    ellipse(location.x, location.y, 16, 16);
  }

  //ボールがウィンドウから外れたときの処理
  void checkEdges(){
    if(location.x > width){
      location.x = 0;
    }else if(location.x < 0){
      location.x = width;
    }
    if(location.y > height){
      location.y = 0;
    }else if(location.y < 0){
      location.y = height;
    }
  }
}

Mover mover;

void setup(){
  size(200, 200);
  smooth();
  mover = new Mover();
}

void draw(){
  background(255);
  mover.update();
  mover.checkEdges();
  mover.display();
}

プログラムの解説

ボールの初期位置はウィンドウの中央で、速度は0で初期化しています。ボールの動きは、加速度で制御しています。以下のように加速度を初期化しています。

acceleration = new PVector(-0.001, 0.01);

x成分がマイナス、y成分がプラスなので、ボールは左下に動き出します。

一定な加速を実現している箇所は、以下です。

void update(){
  velocity.add(acceleration); //一定な値を足す
  velocity.limit(topspeed);
  location.add(velocity);
}

ランダムな加速

以下は、ランダムな加速の参考例です。

//velocity and random acceleration

class Mover{
  PVector location;
  PVector velocity;
  PVector acceleration;
  float topspeed;

  Mover(){
    location = new PVector(random(width/2), random(height/2));
    velocity = new PVector(0, 0);
    acceleration = new PVector(-0.001,0.01);
    topspeed = 10;
  }

  void update(){
    acceleration = PVector.random2D();  //ランダムな方向の加速度ベクトルの生成
    acceleration.mult(0.5);
    //acceleration.mult(random(2));
    velocity.add(acceleration);
    velocity.limit(topspeed);
    location.add(velocity);
  }

  void display(){
    stroke(0);
    fill(175);
    ellipse(location.x, location.y, 16, 16);
  }

  void checkEdges(){
    if(location.x > width){
      location.x = 0;
    }else if(location.x < 0){
      location.x = width;
    }
    if(location.y > height){
      location.y = 0;
    }else if(location.y < 0){
      location.y = height;
    }
  }
}

Mover mover;

void setup(){
  size(200, 200);
  smooth();
  mover = new Mover();
}

void draw(){
  background(255);
  mover.update();
  mover.checkEdges();
  mover.display();
}

プログラムの解説・メモ

update()メソッドが呼ばれるたびにPVector.random2D()が実行され、ランダムな方向の加速度ベクトルが生成されます。

void update(){
  acceleration = PVector.random2D();  //ランダムな方向の加速度ベクトルの生成
  acceleration.mult(0.5);
  //acceleration.mult(random(2));
  velocity.add(acceleration);
  velocity.limit(topspeed);
  location.add(velocity);
}

acceleration.mult(0.5)により、加速度を一定な値に拡大・縮小します。また、acceleration.mult(random(2))とすると、加速度をランダムな値に拡大・縮小します。

  • メモ
    • random2D():ランダムな方向を指す単位ベクトル(PVector)の生成

PVector.random2D()について

PVector.random2D()が、どのような値をとるのか確認します。 リファレンスによるとrandom2D()は、ランダムな方向を指す単位ベクトルを生成するとあるので、ベクトルの各成分と大きさの値を確認します。

//PVector.random2D()の確認

PVector a;

void setup(){}

void draw(){
  a = PVector.random2D();
  println("X成分:" + a.x + ", Y成分:" + a.y + ", ベクトルの大きさ:" + a.mag());
}

以下のように表示されます。

X成分:0.6566855, Y成分:0.7541646, ベクトルの大きさ:1.0
X成分:0.018682899, Y成分:0.9998255, ベクトルの大きさ:1.0
X成分:0.9673977, Y成分:-0.25326216, ベクトルの大きさ:1.0
...

ランダムな方向を指す単位ベクトルが生成されたのが確認できます。

ランダムな加速について

PVector.random2D()で生成したベクトルをランダムな大きさにスケーリングするコードの動作を確認します。ベクトルの各成分と大きさの値を確認します。

PVector a;

void setup(){}

void draw(){
  a = PVector.random2D();
  a.mult(random(2));
  println("X成分:" + a.x + ", Y成分:" + a.y + ", ベクトルの大きさ:" + a.mag());
}

以下のように表示されます。

X成分:1.2355235, Y成分:0.5456939, ベクトルの大きさ:1.3506665
X成分:-0.49935597, Y成分:-0.86013436, ベクトルの大きさ:0.9945791
X成分:-0.8679856, Y成分:-0.989225, ベクトルの大きさ:1.3160415
...

ベクトルの大きさがランダムにスケーリングされたのが確認できます。

まとめ

The Nature of Code(PDF版)からPVectorについて取り上げました。PVectorを用いた加速度の書き方を学びました。引き続き、The Nature of Code(PDF版)の内容を勉強します。

参考サイト

» HTML入門のまとめはこちらです。