【ゲーム数学】第一回 p5.jsで学ぶゲーム数学「二次元ベクトル」

JavaScript
マイケル
マイケル
みなさんこんにちは!
マイケルです!
エレキベア
エレキベア
クマ〜〜〜
マイケル
マイケル
今日から新しいシリーズとして
ゲーム数学シリーズ を始めるよ!
エレキベア
エレキベア
す、数学クマか・・・!
勉強は嫌クマ・・・!!
マイケル
マイケル
最近はゲームエンジンの普及で数学や物理の知識があまり無くてもゲームを作れる時代になってきたけど、最低限の基礎知識として学んでおくに越した事はないと思うんだ!
マイケル
マイケル
それに俺もこれまで真剣に勉強してこなかったけど、
数式をプログラミングして、動きを確認しながら進めたらめちゃくちゃ楽しいと思えたんだ!
マイケル
マイケル
共にがんばっていこうぜ電気熊よ・・・。
エレキベア
エレキベア
(電気熊・・・・。)
そ、そこまでいうなら付き合うクマ・・・。
マイケル
マイケル
それじゃ第一回は「二次元ベクトル」だ!
基礎からがんばっていこう!!
エレキベア
エレキベア
クマ〜〜〜〜〜
スポンサーリンク

参考書籍と開発言語

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

ゲームを動かす数学・物理 R

グラフィックスプログラミング入門

マイケル
マイケル
どちらも高校数学の基礎から解説しているため、しばらく数学から離れている方でも読みやすいと思います!
エレキベア
エレキベア
一読してみるクマ
マイケル
マイケル
そしてサンプルプログラムの実装としては p5.js を使用しました!
こちらは Processing という グラフィックスに特化した開発環境をJavaScriptに移植したものです!
p5.jsとは
  • Processing(グラフィックス処理に特化した開発環境)をJavaScriptに移植したもの
Screenshot 2021 01 16 23 15 46

p5.js ダウンロードページ

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

二次元ベクトル

マイケル
マイケル
それじゃ早速勉強に入るぞ〜〜!
エレキベア
エレキベア
気合入れて取り掛かるクマ

座標とベクトル

マイケル
マイケル
まずは座標ベクトルについて!
マイケル
マイケル
一言で説明すると、

 座標 → (x, y)で表す位置
 ベクトル → (x, y)で表す方向

で、それぞれ
ある一点を(0, 0)と置いたときに表すことのできる値
のことだよ!
エレキベア
エレキベア
どっちも同じ書き方をするクマね
マイケル
マイケル
同じ書き方だけど、意味は異なるんだ!
座標は位置、ベクトルは方向 と覚えるといいよ!
Screenshot 2021 01 16 23 48 36
↑座標とベクトル
マイケル
マイケル
上の図でいうと、xyどちらも5の位置にあるから座標は(5, 5)
xy方向どちらにも5向かっているからベクトルは(5, 5) という意味になるよ!
エレキベア
エレキベア
なんとなくわかったクマ
マイケル
マイケル
そしてプログラミングする上で注意しないといけないのは、
コンピュータの世界では座標軸が一般的な数学と異なること!
Screenshot 2021 01 16 23 44 23
↑一般的な座標(左)、コンピュータでの座標(右)
マイケル
マイケル
上の図のように、コンピュータではディスプレイの構造上、
左上を(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)

になるよ!
Screenshot 2021 01 17 0 19 30
↑ベクトルの加算(左)、ベクトルの減算(右)
エレキベア
エレキベア
それぞれのベクトルの方向分変化するクマね
マイケル
マイケル
これもプログラムでシミュレートしてみたから、
値を変えてどのように変わるか試してみてね!

See the Pen
0116_02
by masarito617 (@masarito617)
on CodePen.

↑ベクトルの加算・減算

マイケル
マイケル
プログラムで表すと計算式は以下のようになります!
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)

のように計算できるよ!
Screenshot 2021 01 17 0 24 24
↑ベクトルの乗算・除算
マイケル
マイケル
スカラーを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に揃えることだよ!
大きさを揃えることで方向成分だけを扱えるようにするんだ!
Screenshot 2021 01 17 0 28 36
↑ベクトルの正規化
マイケル
マイケル
正規化は大きさを1に揃えればいいから、

 ベクトル / ベクトルの大きさ

で求めることができるよ!
三角関数よりベクトルの大きさは 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で学ぶゲーム数学「二次元ベクトル」 〜完〜

コメント