数値自体は「度」を使った方がわかりやすいため、角度を扱う場合は毎回「度」からラジアンに変換する必要があります。三角法ベクトル移動の処理を書く場合に三角法が必要になります。その前にまず、ベクトルの定義は以下のようになります。大きさと向きを有する量2地点間の距離でのオブジェクトの移動は難しい考え方をすることなく書くことができるのですが、開始地点だけがあって終了地点がない場合のオブジェクトの移動はちょっとだけ難しくなります。その場合は、ベクトルを使って処理します。ベクトルに沿った動きを計算する際には、コサインとサインを使うことができます。するって考えれば良いようです。1フレームあたりに移動する距離(x軸)は以下のようにわりだすことができます。speedradiansはベクトルの向きで、speedはベクトルの大きさになります。y軸の移動距離は、Math.cos()をMath.sin()に変更することでわりだせます。いう反射角の法則を使って、ベクトルの向き(角度)を変更してやる必要があります。ことで新たなベクトルの角度をわりだすことができます。壁との衝突判定自体は簡単なので省きます。運動量保存の法則を実現するようにオブジェクト同士の衝突後のベクトルの変化の処理の書き方。衝突判定まずはそもそもオブジェクト同士が衝突するかどうかを求めないといけないです。2つのオブジェクトではなく、2つのオブジェクトの次のフレームの地点ってのが大事です。ぶつかっているかではなく次のフレームでぶつかるかどうかを判定しないとくっついた状態もしくは食い込んだ状態になってしまうからです。直線距離を求めることができたら、その距離と2つのオブジェクトの半径の和を比較して、直線距離の方が短いもしくは等しい場合は衝突することがわかるので、2つのオブジェクトのベクトルを変更してあげる必要があります。ベクトルの変更ここで出てきた公式が一応「公式だからこうなる」ってことでわかったけれど実際の流れが見えていないです...。ベクトルの変更に必要な値は、2つのオブジェクトの質量と衝突時の速度と角度です。これらの値を使って衝突の角度を求めて2つのオブジェクトのベクトルを回転させて速度を更新します。中身がいまいちわかってないですが、2地点の座標を引数として渡すことで衝突の角度を出せます。タンジェントの逆関数であるということはわかった。オブジェクトの現在の角度から衝突の角度を引いて、それのコサイン(x軸の場合)かサイン(y軸の場合)に速度をかけたものが新たな角度になります。運動量保存の法則に基づいて新たな速度をわりだすのですが、ここの公式がちょっと難しいです。mass2)1と2の数字はそれぞれのオブジェクトを示しています。massは質量、velocityはベクトルです。最終的な速度が求まったところで衝突の角度が維持されるように回転し直すっていうところでまた計算が出てきたのですがここらへんちんぷんかんぷんになりました。一応書き方としては知ったので、こうすれば衝突後の値の変更はできるってのはわかったのですが理解からは程遠い...。数学をしっかり勉強しなきゃいけないっぽい...。一定の円に沿って均一的に移動するオブジェクトの位置は以下の方程式を使って求めることができます。サイン(角度)これを使いつつ、フレームごとに角度を微妙に変えていけば同じところを回転し続けるオブジェクトが作れる。サンプルつくってみました最後に、勉強したことを応用して簡単なサンプルを書いてみました。書いてみたと言っても、1年半くらい前に作ったものをソースコード見直してもう一度書いてみただけのですが...。2Dでの数学と物理学とアニメーションcanvas領域をクリックするとランダムなサイズと色と角度をもったボールが生成されます。下のボタンを押すとボールに重力と摩擦と弾性が生じます。それだけの簡単なサンプルなのですが、ここまでやったら大体の2Dの基礎はおっけーな気がしました。おわりに今回は2D上でオブジェクトを動かしました。オライリーのサンプルはなかなか出来がよくって順番通りこなしていけば基礎が身につくのでおすすめです。2Dで学んだことは3Dでも活かせそうな気配がびんびんだったのでここで身につけた基礎をひっさげてこれ以降はまたthree.jsの勉強に戻っていきたいと思います。今回サンプルをやってみてのソースコードはGitHubにあがっております。WebGL技術系の話だったりゲームの話だったりポエムだったりを綴っていきます。読者になるRECENTLYブログをHugoに移しました。メモツールを作りたい。@株式会社オプト5万人に1人になる。(1)SEARCHはてなブログをはじめよう!nabeliwoさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。