徹底解説!! なぜ図形をバウンドさせる事が出来るの？ ベクトルの使い方 【 Processing 番外編 】
こんにちはみおはぴです！
今回は「なぜ図形をバウンドさせる事が出来るのか」について徹底解説をしていきたいと思います。
この記事は実践編No.5と、前回の番外編の復習になっています。
まだ前回のを見てないよという方はこちらからご覧ください。
ベクトルを使って図形をランダムに動かす方法 【 Processing 実践編 No.5 】 - Processingの基礎と応用
ベクトルとは何？ 初心者でも分かりやすく徹底解説 【 Processing 番外編 】 - Processingの基礎と応用
それでは早速やっていきましょう！
Processingでのベクトルの使い方
Processingでは、ベクトルを扱うための「PVector」というクラスが用意されています。
＊クラスについての詳しい説明はまた、今度したいと思います。
float や int のような型が、より高度になった物というイメージで考えてみてください。
そして、ベクトルは次のようにして、2つの値を同時に代入する事が出来ます。
1行目では、PVectorの宣言をしています。
2行目では、PVectorに(20, 40)を代入しています。
Processingでは、1つ目の値をX座標、2つ目の値をY座標と捉えます。
XとYそれぞれの値は、次のようにして個別に取得する事が出来ます。
また、PVectoe同士の演算（足し算、引き算）にも対応しています。
実践編No.5のコードを使って復習をしよう
ここまでが何となく分かったら、実践編No.5のコードを復習していこうと思います。
宣言
まず、2つのPVector「location」と「velocity」が宣言されます。
それぞれ、位置ベクトル(location)と速度ベクトル(velocity)を収納します。
locationには現在の物体の位置の座標、そしてvelocityには1フレームあたりの速度（位置の変化量）を持っています。
setup();
setup(); の中で画面の初期設定をした後に、位置ベクトルと速度ベクトルも初期設定をしていきます。
位置は画面上のランダムな場所、速度はX座標 / Y座標ともに、-4.0 〜 4.0 の範囲でランダムな値を生成しています。
こんなに簡単！店舗向けホームページがすぐ始められる「グーペ」 
draw();
背景の色の設定をして、位置ベクトルから座標を取り出して円を描画していきます。
そして、次の1行がNo.5のコードの中で、運動表現の核になるコードです。
位置ベクトルに、速度ベクトルを足しています。
位置ベクトルは物体の位置、速度ベクトルは1フレームあたりの位置の変化を表しています。
draw(); の中に物体を描いたら、次のフレームでの位置を計算します。
ベクトルを用いると次の計算が成り立ちます。
次のフレームの位置ベクトル = 現在のフレームに位置ベクトル + 速度ベクトル
図にしてみると分かりやすいかもしれません。
現在のベクトルを「a」、速度ベクトルを「 v」とします。
すると、次のフレームの位置ベクトル「b」は、位置ベクトル「α」と速度ベクトル「v」をたし算した結果となっています。
次のブロックでは、パーティクル（図形）が画面の端に来た時にバウンドする動きを表現します。
if文の条件式『 || 』は「AまたはB」という意味になります。
つまり、
このような式を簡単にまとめたものが、先ほどのコードになります。
そして、if文の中では、次のような計算をしています。
左右の端に到達した時には、速度ベクトルのX成分に−１を掛け算しています。
また、上下の端に到達した時には、Y成分に−１を掛け算しています。
これは、壁に当たった時に、速度はそのままで、移動方向が壁に対して反対の向きに変更される事になります。
つまり、壁に当たってバウンドをするシミュレーションをしている事になります。
これで図形をバウンドさせる事が出来ました。
仕組みは何となく理解出来ましたか？
このようにイメージする事で、オリジナルを作る時にやりやすくなるのではないかなと思います。
今日のまとめ
今回は、図形がなぜバウンドするのか徹底解説をしていきました。
この記事が少しでも参考になればいいなと思います。
TwitterのDMとかにもどんどん質問募集しているので、分からない事があれば、ぜひ質問してください！
みおはぴ🐰 @大学生プログラマー (@mio_Processing) | Twitter
という事で今回はこの辺で終わりにしたいと思います。
また次回も見てもらえると嬉しいです！
合わせて読みたい
ベクトルとは何？ 初心者でも分かりやすく徹底解説 【 Processing 番外編 】 - Processingの基礎と応用
ベクトルを使って図形をランダムに動かす方法 【 Processing 実践編 No.5 】 - Processingの基礎と応用
今更聞けない?! エンジニアってどんな職業？ 【 プログラミング 豆知識 】 - Processingの基礎と応用
