canvasでサークル同士の衝突や壁面衝突。

今年の頭にちょくちょく書いていた canvasでのパーティクルシリーズだが、
最近またちょびちょびいじっているので、久方ぶりにブログに書いておく。

新しく作ったのは以下の2つだ。
particle6
particle7

particle6については壁とボール、particle7については
それに加えてボールとボールの衝突をさせている。

また、参照にさせていただいたサイトは今までと同じ以下のサイトになる。
衝突判定編
平面幾何におけるベクトル演算
Flashゲーム講座&ASサンプル集【衝突の計算について】 

これまでの物で気になっていためり込み補正、わりと楽観的に考えていたのだけれども
単なる線分でも太さとかを考慮すると、結局四角形となり4辺プラス頂点からの90度分を
調整しなければならす、予想以上のやっかいさだった。

今回もこれまでに引き続き壁づりベクトルを使用したが、
こちらにあったボールの壁面反射の方がふさわしそうだ。
その2 壁に投げたボールの反射
後ほどこちらに変更も考えてみている。

そして、これまではprototype型を使用していたのだが、
今回から「JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス
に説明のあった関数型へ変更を行なっている。
myの使い方等幾つかはまった点や同じローカルでもprivateとprotectedに相当するものが
作れたりする辺りなど、また別エントリで説明を考えているところだ。

加速度についても、やはりこれまでのものとは違いもう少し公式にのっとた形に変更した。
Flash Math & Physics Design:ActionScript 3.0による数学・物理学表現[入門編]
の221ページ目「物理法則による動き」及び、上記にも出てくるマルペケさんの
その4 フレーム間移動は等速直線運動で
を参考とさせていただいている。

やはりと言おうかサークルの動きが早すぎるときや、
壁と複数のボールがひしめき合うとバグが発生する。
この辺りについては、また調査を行い新たなロジックで作成をしてみたい。
それとiPhone,iPad対応を一度ちゃんと行いたい。
今後はフルスクラッチ状態から、easel.js等のライブラリ連携や、
html5のDOMとかCSSと組み合わせたパターンも作ってみたい。

といいつつもそうしてたら延々とcanvasのみになっちゃうので、
次はwebGL主体でopenGL esあたりを探る予定だ。ついでにiPhone等で openGL esを一通り使いたい。
それに平行して、比較しながらになりそうだがFlash3D(できればStage3D周辺)も調査学習を進めたい。

やること多いけど楽しみだよ。
 

参考書籍

Comments

  1. [...] three.js:study02 three.jsの前に以前のエントリでも書いたとおりOpenGL ESの勉強も兼ねてwebGLを少し調べていた。 [...]