[Go to “teaching” in Morimoto Lab]
Game by ball 7
①ボールに力を加える・投げる
②見えないボールでアトラクターを作る
1. ボールに力を加える
classの練習、Attractorのための助走としてボールに力を加えるプログラムを作る。
力を加える＝速さにあるベクトルを加える。
まず、ボールが重力ではねているプログラムを作ろう。
このとき、classを使おう。できたら、
マウスを押したら適当なベクトルが速度に足されるコードを作ろう。
以下はヒントです。
[Sample Code A]
Ball ball;
void setup(){
size(500,500);
ball = new Ball();
}
void draw(){
background(255);
ball.update();
if(mousePressed) {
ball.addForce();
}
}
class Ball{
PVector pos;
float size = 100;
float radi = size/2.0;
PVector vel;
float gravity;
float air_drag = 0.99f;
Ball()
{
pos = new PVector(width/2, height/2);
vel = new PVector(10, -10);
gravity = 0.98f;
}
void update()
{
//update velosity：ここは第1,2回にしたので省略
//update position：ここは第1,2回にしたので省略
//bound：壁とのバウンドは今回なくてもよいです
display();
}
void display(){
stroke(0);
noFill();
ellipse(pos.x, pos.y, size, size);
}
void addForce(){
PVector vec = new PVector(10,-10);
vel.add(vec);
}
}
Ex A：上記のクラスを完成させて、マウスを押したらボールに力が加わるようにする
ボールを押したときがわかりにくければ、押したときに文字が出る、背景色を変える、などしてもよい。
この段階では当たり判定は必ずしも必要でない。
以下は空気抵抗とボールの位置の更新部分を穴あき問題にしています。
//update velosity
//vel.y = ;//重力。なくてもよい。
vel.x *=air_drag;//空気抵抗
vel.y *=air_drag;
//update position
/*位置の更新をしてください（以前の回でもしています）*/
注意：
Ballクラスの中では、メンバ変数であるposやvelはそのまま使ってください（pos.xなど）。
Ballクラスの中で、ball.pos.xなどとしないようにしましょう。
記述が冗長ですし、配列でBallが増えるとよくわからないことになってしまいますし、使い方としておかしいです。
Ex B： 次に、マウスとボールが近づいたときに、力が加わるようにする
講義の第一回では、マウス接触したときにボールの速度を反転させた。
今回は、マウスから風が吹き出すイメージ？で、マウスとボールの距離に応じた力を加えよう。
また、ここでは、速度は単純に反転させるのではなく、マウスとボールの位置関係を考慮した方向に与えるようにしましょう。マウスとボールの間のベクトルを使えばよいです。
＜実装の一例＞
addForce内で
ボールがマウスからどれくらいの距離に入ったら、力を与えるか、決める
マウスとボールの距離を計算
2で決めた距離内にマウスがあるかどうか判定
もし距離内にマウスがあったら、マウスからボールへの単位ベクトルを計算し、適当な倍数にして調整して、ボールの速度にベクトルを足す
ヒント：近いほど強くなるような力の計算方法
例えば、以下のように計算した値を力の大きさとするとよさそうですが、工夫してみてもよいと思います
①（1/距離）
②（影響範囲-距離）※1
③（ガウス関数などの釣鐘型の関数に距離を変数として計算）※2※1 値が0以下になるときはifで場合分けの処理をすること。
※2 指数関数はexp(), べき乗はpow()で計算できる。
↑点を並べてマウスを押して周囲に力を与えた場合
※課題はまずボール一つでやってみてください。
※課題では重力や壁とのバウンドはあってもなくてもよいです。
（おまけ。余裕のある人へ）ボールをマウスドラッグでつかんで、マウスを離したときに投げるようにする
※この課題は横道にそれるのでとばしてもいいですが、ポケモンGOみたいにボールを投げるコンテンツ興味のある人はやってみてください。
ボールをつかむには？
マウスとボールのあたり判定が必要
ボールをドラッグするには？
マウスを押している（ドラッグしている）かどうかの判定が必要。mousedragged()
つかんだら、ボールは常にマウスの位置に描画する
ボールを離したとき、pmouseX, pmouseYなどを使って速度を計算する
pmouseX/Yは現在の一つ前のフレームでのマウス位置です
mouseReleased()はマウスボタンを離したときに呼ばれる関数です。
計算した速度ベクトルを適当に何倍かして調整し、ボールの速度に足す
2. Attractorを作ろう
Attractorは数値的値の集合が動的に発展をするもの、らしい。
数学的Attractor：
Attractorについてのサイトをいくつか紹介。
今回実装するのはAttractorのような雰囲気のビジュアルのものである。
ここでの実装では、アトラクターは見えないボールとボールの間を線でつなぎ、
そのボールをマウスにひきつけたり、逆に離したりすることで、
不思議な模様が描きます。
以下はGenerative Designという本の例。
http://www.bnn.co.jp/support/generativedesign/code/M_4_3_01_TOOL.html
以下のようにコードをダウンロードして、
デスクトップ上でこのプログラムを実行してみよう。
このページの右のボタン”code”から、”download zip”などでdownloadする
解凍したフォルダからCode-Package-Processing-3.x/02_M/M_4_3_01_TOOL/を開く
pdeファイルをProcessingで開く。
Generative Designのライブラリをimportする必要があります。
メニュー＞スケッチ＞ライブラリをインポート＞ライブラリを追加 より”GenerativeDesign”をインストールする実行できるはず
クリックして、挙動を見てみましょう。
左上のボタンを押すと、UIが現れ、影響範囲や点の動かし方を変更できます。
しかしコードを見てみると、つらく感じる人もいるだろう。
プロのプログラムを読むのはつらい作業だ。
むしろ、これまで培ったGame by ballの知識で一から実装してみよう。
そっちの方が簡単だと思う。
※高みを目指す人には人のプログラムは色々見てもらいたい。
とても勉強になる。
Ex C: Attractorを実装しなさい（横方向一列のみ）
①まず横一列を作る
最初のBallクラスを使って横一列にボールを並べる
重力や壁とのバウンドはいらない
ボールをマウスから遠ざけるように力を加える
距離に反比例するように力の大きさを加える
ボールとボールの間に線を描く（横方向だけ）
ボールはy方向にしか動かないようにする
Ex D: Attractorを実装しなさい（全体）
②縦に増やす
横一列できたら、それをクラス化（BallLineクラス）する ※後述
y方向にBallLineをたくさん並べる
ボールを消す
色や点の間隔や動き方を調整する
線にきれいな色（グラデーションなど）を指定する
(HSB色空間や透明色などを使う)
