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

学びを形に:プログラミングとウェブデザインの勉強メモ

 メニュー

» Processingの記事一覧はこちらです。

Processing|PVectorと加速度(マウスに向かう複数のボールの加速:配列)

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

マウスに向かう複数のボールの加速:配列

以下は、マウスに向かう複数のボールの加速についての参考例です。ボールが複数になるので、配列を用います。

ちなみに、ボールが1つの場合のマウスに向かう加速は、以下の記事をご覧ください。

//Array of movers accelerating towards the mouse

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

  //コンストラクタ
  Mover(){
    location = new PVector(random(width), random(height));
    velocity = new PVector(0, 0);
    topspeed = 4;
  }

  //ボールの位置の更新
  void update(){
    PVector mouse = new PVector(mouseX, mouseY);
    acceleration = PVector.sub(mouse, location);
    acceleration.normalize();
    acceleration.mult(0.2);

    velocity.add(acceleration);
    velocity.limit(topspeed);
    location.add(velocity);
  }

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

Mover[] movers = new Mover[20];

void setup(){
  size(200, 200);
  smooth();
  background(255);
  for(int i = 0; i < movers.length; i++){
    movers[i] = new Mover();
  }
}

void draw(){
  background(255);

  for(int i = 0; i < movers.length; i++){
    movers[i].update();
    movers[i].display();
  }
}

静止画だと分かりにくいので、プログラムを実行して確認することをおすすめします。

プログラムの解説

Moverクラス型の配列を用意します。今回は、要素数を20にしています。この数はボールの数に対応します。要素数を100にするとボールの数が100個になります。

Mover[] movers = new Mover[20];

setup()の中で、moversオブジェクトを要素数分だけ生成します。

void setup(){
  ...
  for(int i = 0; i < movers.length; i++){
    movers[i] = new Mover();
  }
}

draw()の中で、全てのmoversオブジェクトにupdate()とdisplay()を実行します。

void draw(){
  ...
  for(int i = 0; i < movers.length; i++){
    movers[i].update();
    movers[i].display();
  }
}

Moverクラスと配列のおかげで、マウスに向かう複数のボールの加速に対応することができました。

まとめ

The Nature of Code(PDF版)からPVectorについて取り上げました。PVectorを用いて、マウスに向かう複数のボールの加速について学びました。引き続き、The Nature of Code(PDF版)の内容を勉強します。

参考サイト

» HTML|入門ガイドはこちらです。