Game by ball 4

Today, we will learn about unit vector and class.

Game by ball 4
- 1. Unit vector

1. Unit vector

A unit vector is a vector with the length 1.

unitvector

1.1 Calculate a unit vector by yourself (1)

The below code draws a line from a center to a mouse position.

Alt text

void setup() 
{
  size(800, 800);
  strokeWeight(5);
  stroke(255);
}

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

Make the line length a certain length such as the below.

Alt text

Use a unit vector from the center to mouse.
Before that, you can calculate the unit vector using a distance between them such as the below.

Before the setup(): #means it is a global variable

float len = 200; //length of vector

In the draw():

float dist = sqrt(sq(mouseX - cx) + sq(mouseY - cy));
float vecx = (mouseX - cx)/dist;
float vecy = (mouseY - cy)/dist;  
line(cx, cy, cx + vecx*len, cy + vecy*len);
//you can adjust velocity length by multiplying like the above.

[sqrt() in the official web]
[sq() in the official web]

Ex A. Please implement the below by calculating the unit vector.

Alt text

1.2 Calculate a unit vector by yourself (2)

The below code make a ball be at a mouse position.

Alt text

float bx = 1;
float by = 1;
float bs = 100;
//boolean bFollow;

void setup() {
  size(800, 800);
  bFollow = false;
}
void draw() {
  background(0);
  ellipse(bx, by, bs, bs);

//  if (bFollow) {
    bx = mouseX;
    by = mouseY;
//  }
}

void mouseClicked() 
{
//  if (bFollow==false)bFollow = true;
//  else               bFollow = false;

  ////bFollow = !bFollow;//this line causes the same result with the above two lines.
}

Note:
Here, bFollow works as a switch.
//でコメントアウトしてある部分を使うと、マウスクリックでボールを止めたり動かしたりすることができる。

Note: ビット演算
In mouseClicked(), there is a commented line by //// which works as same as the above two lines.
この部分はビット演算という操作について知識が必要である。
内容はビット演算のリンクを見てもらいたい。
このうちNOTはProcessingやC言語では!で表される。
!は0を1に、1を0にするので、trueだったらfalse、falseだったらtrueに反転させる。
※trueやfalseには1,0が内部的には割り当てられていることが多い。

Let’s think how to follow mouse in a certain velocity by a ball.

A hint is a unit vector from a ball to mouse.
Use a unit vector to move a ball.
Before that, you can calculate a unit vector by positions of a ball and mouse, distance between them.

Ex B. Calculate unit vector of the velocity. Then please implement that a ball follows a mouse in a certain velocity.

ボールからマウスへのベクトルを計算し、それを使ってボールの速度を計算しましょう。
ボールを速度で移動するやり方はgame by ball 1でやりました。

Ex C. Draw an arrow from a ball to mouse with a certain length such as the below.

Alt text

★注意「ボールが消えてしまう人へ」：
mouseX,Yの初期値は0なので、bx,byの初期値を0にすると、この後の課題でマウスとボールの距離を求める際、距離が0になる。
0で割り算した結果はおかしな値が入っているため、これをボールの位置などに代入すると、ボールが消えてしまう。
こうならないようにbx,byの初期値を0ではなく1にしたり、また、bFollowを使うと初期値がほぼ0にならないので有効。

1.3 Calculate a unit vector using PVector.

[PVector in the official web]

Note:
PVector is a kind of class.
class can have variables and methods.
It is very convenient.

Note 2:
To define data by class, we have to use new.
Without new, you will get an error when running the program.
It is different from int, float, etc.
See the detail on the above link.

Ex D. Replace float bx, by, etc of the above program by PVector.

PVectorの変数をどこで定義し、どこでnew（生成）するか考えましょう。

Ex E. Caluculate the unit vector using methods like add(), mult(), div(), etc of PVector.

それぞれの関数の使い方はPVectorの説明から、更にリンクで飛んだ先にあります。
例えばadd()はPVector同士の足し算ができます。

※引数の数によって挙動が変わりますが、とりあえず引数が一つだけの使い方を試してみましょう。

他の変数もPVectorで定義すれば、PVector同士での計算もできます。

Ex F. Caluculate the unit vector using methods like normalize() of PVector.

今まで距離を計算し、ベクトルを割ることで自力で正規化(normalize)していました。
normalize()を使うと、それを一行でできます。

Ex G. ボールの数を配列で増やそう

次週の動的配列の前に、
ぜひ静的配列でPVectorを扱ってみてほしい。
ボールの位置だけ増やして大きさは同じでまずはやってみよう。
ただし、ボールの初期位置は少しずらしてあげるのがポイント。

※ただしこの実装だとボールはそのうちほとんど一か所に固まってしまい、少し残念な感じ。
もっといい感じにするには速度の調整係数をそれぞれ別にするるなどの方法があるが、これは速度や調整係数をそれぞれ配列で用意しないといけないので、面倒である。
のちに出てくるクラスを使うと、このようなことがしやすくなる。

Alt text

おまけ. フロッキングアルゴリズムのBoids理論

余裕がある人はぜひ知識だけでも、できれば実装もしてみてください！

フロッキングアルゴリズムとは、群れ（flock）の動きをシミュレートするアルゴリズムです。
魚や動物の群れの動きをよりリアルに表現することができます。
その中でも非常に有名で簡単なBoids（ボイズ）と呼ばれるもののアルゴリズムを見てみましょう。
「鳥もどき（bird-oid）」からboidsと名付けられた、人工生命シミュレーションプログラムで、鳥や魚の動きに使われるほか、チームラボのエフェクトなどにも使われていたと思います。

基本的なルールは三つ。
1. 分離 separation：近づきすぎたら離れる
2. 整列 alignment：仲間と同じ方向、同じ速度に合わせて動く
3. 結束 cohesion：群れの中心に向かって動く

3Dにも適用できます。

参考URL：
Processingによる実装記事：クラス使ってますけどね…

Wikipedia ボイド（人工生命）
Coding challenge “124: Flocking Simulation”：こちらのページからBoidsのProcessing実装に関する講義動画の閲覧やコードの取得が可能です！
群衆シミュレーション：こちらもフロッキングアルゴリズムと似ていますが、ボーンのあるような3Dキャラクターに適用するイメージ？
マルチエージェントシステム：ゲームキャラクタの動きの自動決定などに使われます。スクエニのAIエンジニアさんのスライドをこちらにリンクしておきます。ちょっと難解かも。。こっちが入門記事でわかりやすいかもです！