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

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

 メニュー

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

Processing:PVectorと速度と加速度

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

速度(velocity)

速度とは、単位時間当たりどれだけ移動したかを表す量です。向きを考慮します。物理での単位は、メートル毎秒(m/s)です。

PVectorを用いた速度の例

以下は、速度を用いたプログラムの参考例です。描画の度に同じ分(量)だけ移動するので、ボールは等速で移動します。

//Vector Motion: Velocity

class Mover{
  PVector location;
  PVector velocity;

  Mover(){
    location = new PVector(random(width), random(height));
    velocity = new PVector(random(-2, 2), random(-2, 2));
  }

  void update(){
    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();
}

単位時間当たりの移動距離が速度です。locationにvelocity(=単位時間当たりの移動距離)を加えるとボールが移動します。該当コードは以下です。

void update(){
  location.add(velocity);
}

加速度(acceleration)

加速度とは、速さがどれだけ変化したのかを表す量です。物理での単位は、メートル毎秒毎秒(m/s2)です。

PVectorを用いた加速度の例

以下は、加速度を用いたプログラムの参考例です。

//Vector Motion: 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();
}

ボールは、画面中央から左下に向かって移動します。

速度に加速度を加えるとボールのスピードが変わります。加速度を加えていくと徐々にボールの移動するスピードが早くなります。該当のコードは以下です。

void update(){
  velocity.add(acceleration);
  velocity.limit(topspeed); //加速度の制限
  location.add(velocity);
}

メモ

  • メモ
    • limit():ベクトルの大きさをパラメータで与えられた値に制限する

limit()について

limit()がとる値について見ていきます。

//limit()の動作確認
PVector a;

void setup(){
  a = new PVector(3, 4);
}

void draw(){
  a.add(1, 1);
  a.limit(10);
  println("X成分:" + a.x + ", Y成分:" + a.y + ", ベクトルの大きさ:" + a.mag());
  println("ベクトルの大きさ:" + Math.sqrt(a.x*a.x + a.y*a.y));
}

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

X成分:4.0, Y成分:5.0, ベクトルの大きさ:6.4031243
ベクトルの大きさ:6.4031242374328485
X成分:5.0, Y成分:6.0, ベクトルの大きさ:7.81025
ベクトルの大きさ:7.810249675906654
X成分:6.0, Y成分:7.0, ベクトルの大きさ:9.219544
ベクトルの大きさ:9.219544457292887
X成分:6.585046, Y成分:7.5257673, ベクトルの大きさ:10.0
ベクトルの大きさ:10.0
X成分:6.646862, Y成分:7.471227, ベクトルの大きさ:10.000001
ベクトルの大きさ:10.000000762939424
...

a.limit(10)としているので、ベクトルの大きさが10を超えないようになっていることが確認できます。

まとめ

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

参考サイト

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