
マイケル
みなさんこんにちは!
マイケルです!
マイケルです!

エレキベア
クマ〜〜〜

マイケル
今日から新しいシリーズとして
ゲーム数学シリーズ を始めるよ!
ゲーム数学シリーズ を始めるよ!

エレキベア
す、数学クマか・・・!
勉強は嫌クマ・・・!!
勉強は嫌クマ・・・!!

マイケル
最近はゲームエンジンの普及で数学や物理の知識があまり無くてもゲームを作れる時代になってきたけど、最低限の基礎知識として学んでおくに越した事はないと思うんだ!

マイケル
それに俺もこれまで真剣に勉強してこなかったけど、
数式をプログラミングして、動きを確認しながら進めたらめちゃくちゃ楽しいと思えたんだ!
数式をプログラミングして、動きを確認しながら進めたらめちゃくちゃ楽しいと思えたんだ!

マイケル
共にがんばっていこうぜ電気熊よ・・・。

エレキベア
(電気熊・・・・。)
そ、そこまでいうなら付き合うクマ・・・。
そ、そこまでいうなら付き合うクマ・・・。

マイケル
それじゃ第一回は「二次元ベクトル」だ!
基礎からがんばっていこう!!
基礎からがんばっていこう!!

エレキベア
クマ〜〜〜〜〜
参考書籍と開発言語

マイケル
勉強にするにあたっては、下記参考書を参考にしました!

マイケル
どちらも高校数学の基礎から解説しているため、しばらく数学から離れている方でも読みやすいと思います!

エレキベア
一読してみるクマ

マイケル
そしてサンプルプログラムの実装としては p5.js を使用しました!
こちらは Processing という グラフィックスに特化した開発環境をJavaScriptに移植したものです!
こちらは Processing という グラフィックスに特化した開発環境をJavaScriptに移植したものです!
p5.jsとは
- Processing(グラフィックス処理に特化した開発環境)をJavaScriptに移植したもの


エレキベア
これを使ってJavaScriptで実装するクマね

マイケル
描画系の処理が簡単に実装できるし、ブラウザ上で最低限のコーディングもできるから初心者の方にもおすすめです!
サンプルプログラムはコードと一緒に載せておくのでご自由にお使いください!
サンプルプログラムはコードと一緒に載せておくのでご自由にお使いください!

エレキベア
クマ〜〜〜〜〜
二次元ベクトル

マイケル
それじゃ早速勉強に入るぞ〜〜!

エレキベア
気合入れて取り掛かるクマ
座標とベクトル

マイケル
まずは座標とベクトルについて!

マイケル
一言で説明すると、
座標 → (x, y)で表す位置
ベクトル → (x, y)で表す方向
で、それぞれ
ある一点を(0, 0)と置いたときに表すことのできる値
のことだよ!
座標 → (x, y)で表す位置
ベクトル → (x, y)で表す方向
で、それぞれ
ある一点を(0, 0)と置いたときに表すことのできる値
のことだよ!

エレキベア
どっちも同じ書き方をするクマね

マイケル
同じ書き方だけど、意味は異なるんだ!
座標は位置、ベクトルは方向 と覚えるといいよ!
座標は位置、ベクトルは方向 と覚えるといいよ!

↑座標とベクトル

マイケル
上の図でいうと、xyどちらも5の位置にあるから座標は(5, 5)、
xy方向どちらにも5向かっているからベクトルは(5, 5) という意味になるよ!
xy方向どちらにも5向かっているからベクトルは(5, 5) という意味になるよ!

エレキベア
なんとなくわかったクマ

マイケル
そしてプログラミングする上で注意しないといけないのは、
コンピュータの世界では座標軸が一般的な数学と異なること!
コンピュータの世界では座標軸が一般的な数学と異なること!

↑一般的な座標(左)、コンピュータでの座標(右)

マイケル
上の図のように、コンピュータではディスプレイの構造上、
左上を(0, 0)と置いて、yは下方向を正とすることが多いんだ!
左上を(0, 0)と置いて、yは下方向を正とすることが多いんだ!

エレキベア
処理しやすいように合わせているクマね

マイケル
下に座標位置を表示するサンプルプログラムを載せたから、
値の変化を触って確認してみてね!
値の変化を触って確認してみてね!
See the Pen
0116_01 by masarito617 (@masarito617)
on CodePen.
↑座標位置表示プログラム (※マウスクリックで座標を移動できます)

マイケル
実装は以下のように、座標とベクトルのクラスを作成して値を設定しています!
変数は同じだけど意味は異なるため、クラスを分けているよ!
変数は同じだけど意味は異なるため、クラスを分けているよ!
// 座標クラス
class Point {
constructor (_x, _y) {
this.x = _x;
this.y = _y;
}
}
// ベクトルクラス
class Vec {
constructor (_x, _y) {
this.x = _x;
this.y = _y;
}
}

マイケル
そしてベクトルの大きさは 終点座標 – 始点座標 で求めることができます。
下記のように引数として座標を渡すよう実装しています!
下記のように引数として座標を渡すよう実装しています!
// p1->p2方向のベクトルを求める
function point2Vec(p1, p2) {
// p2 - p1
return new Vec(p2.x-p1.x, p2.y-p1.y);
}

エレキベア
だんだん掴んできたクマ〜〜〜〜
ベクトルの四則演算

マイケル
概要が分かったところで、ベクトルの計算に入っていきましょう!
加算・減算

マイケル
ベクトル同士の加算・減算は、それぞれのx、y要素同士をそのまま計算するのみ!
2つのベクトルをそれぞれv1、v2とすると、
v1 + v2 = (v1.x + v2.x, v1.y + v2.y)
v1 – v2 = (v1.x – v2.x, v1.y – v2.y)
になるよ!
2つのベクトルをそれぞれv1、v2とすると、
v1 + v2 = (v1.x + v2.x, v1.y + v2.y)
v1 – v2 = (v1.x – v2.x, v1.y – v2.y)
になるよ!

↑ベクトルの加算(左)、ベクトルの減算(右)

エレキベア
それぞれのベクトルの方向分変化するクマね

マイケル
これもプログラムでシミュレートしてみたから、
値を変えてどのように変わるか試してみてね!
値を変えてどのように変わるか試してみてね!
See the Pen
0116_02 by masarito617 (@masarito617)
on CodePen.
↑ベクトルの加算・減算

マイケル
プログラムで表すと計算式は以下のようになります!
2つのベクトルを引数として渡して返却するようにしています。
2つのベクトルを引数として渡して返却するようにしています。
// ベクトル+ベクトル
function addVec(v1, v2) {
return new Point(v1.x + v2.x, v1.y + v2.y);
}
// ベクトル-ベクトル
function subVec(v1, v2) {
return new Point(v1.x - v2.x, v1.y - v2.y);
}
// ベクトル + ベクトル
v3 = addVec(v1, v2);
// ベクトル - ベクトル
v4 = subVec(v1, v2);

エレキベア
足し算引き算は完了クマ〜〜
乗算・徐算

マイケル
次に乗算・除算ですが、
ベクトルには スカラー を使って計算するのが一般的です。
ベクトルには スカラー を使って計算するのが一般的です。

エレキベア
スカラーって何クマ??

マイケル
スカラーは力の大きさの定義で、一つの数字で定義するんだ!
これもベクトルの各要素に対して乗算・除算を行ってあげるだけで、
v1 * s = (v1.x * s, v1.y * s)
v1 / s = (v1.x / s, v1.y / s)
のように計算できるよ!
これもベクトルの各要素に対して乗算・除算を行ってあげるだけで、
v1 * s = (v1.x * s, v1.y * s)
v1 / s = (v1.x / s, v1.y / s)
のように計算できるよ!

↑ベクトルの乗算・除算

マイケル
スカラーを2とすると上の図のようになるよ!
向きは変わらずに大きさだけ変わるのが特徴だね!
向きは変わらずに大きさだけ変わるのが特徴だね!

エレキベア
向きは変えずに速さだけ変える とかで使えそうクマね

マイケル
これもプログラムを作ったので触ってみてください!
See the Pen
0116_03 by masarito617 (@masarito617)
on CodePen.

マイケル
コードは簡単で下記のようにベクトルとスカラーを引数として渡して計算しています。
// ベクトル*スカラー
function mulVec(v, s) {
return new Vec(v1.x * s, v1.y * s);
}
v2 = mulVec(v1, scolar);

エレキベア
これで計算は完璧クマ〜〜〜〜
ベクトルの正規化

マイケル
そして最後にベクトルの正規化!
これもゲーム開発ではよく使うんだ!
これもゲーム開発ではよく使うんだ!

エレキベア
正規化って何クマ??

マイケル
正規化はベクトルの大きさを1に揃えることだよ!
大きさを揃えることで方向成分だけを扱えるようにするんだ!
大きさを揃えることで方向成分だけを扱えるようにするんだ!

↑ベクトルの正規化

マイケル
正規化は大きさを1に揃えればいいから、
ベクトル / ベクトルの大きさ
で求めることができるよ!
三角関数よりベクトルの大きさは sqrt(x**2 + y**2)だから、
v1 / sqrt(v1.x**2 + v1.y**2)
という式になるね!
ベクトル / ベクトルの大きさ
で求めることができるよ!
三角関数よりベクトルの大きさは sqrt(x**2 + y**2)だから、
v1 / sqrt(v1.x**2 + v1.y**2)
という式になるね!
See the Pen
0116_04 by masarito617 (@masarito617)
on CodePen.
↑ベクトルの正規化 (※マウスクリックで座標を移動できます)

マイケル
プログラムは以下のように実装しています!
// ベクトルの正規化
function normalize(v) {
let l = sqrt(v.x**2 + v.y**2);
return new Vec(v.x/l, v.y/l);
}
// 正規化ベクトル
let nomVec = normalize(vec);

マイケル
正規化処理で方向のみ求めてスカラーをかけることで、
方向・大きさを指定することができるので、覚えておきましょう!
方向・大きさを指定することができるので、覚えておきましょう!

エレキベア
テストに出るクマね
おわりに

マイケル
というわけで今回はベクトルについてでした!
どうだったかな?
どうだったかな?

エレキベア
数学といえど一つ一つやったら
簡単だったクマ〜〜〜〜
簡単だったクマ〜〜〜〜

マイケル
基礎の基礎だからね!
これからどんどん踏み込んでいくぞ〜〜〜!!
これからどんどん踏み込んでいくぞ〜〜〜!!

エレキベア
や、やったるクマ〜〜〜〜〜

マイケル
それでは今日はこの辺で!
アデュ〜〜〜!!
アデュ〜〜〜!!

エレキベア
クマ〜〜〜〜
【ゲーム数学】第一回 p5.jsで学ぶゲーム数学「二次元ベクトル」 〜完〜
コメント