canvasでhtml5Logoとかも衝突

2011年1月22日 by sib

今回は衝突と、あと旬なんでhtml5Logoを動かしたり。

Particle4
寒いし、雪のニュースをよく聞くしってことで白っぽくしてみた。

HTML5 LOGO
発表されたばかりなんで、とりあえずロゴを突っ込んでちょっと回転させてみたり。

方法的には、だいたい以下の通りです。

現在位置と次の位置の線分と衝突する線分との交差判定
↓
交差している場合、交差点を求める
↓
反射ベクトルを求め、交差点から反射

今回は、円の大きさとか速度ベクトルの残り分を
反射ベクトルの大きさに反映といったことはやっていないです。

ActionScriptだとhitTestで済む衝突判定ですが、
canvasには無いので、この辺を参考に、
平面幾何におけるベクトル演算 » 直線と線分
「線分の交差判定で」現在位置と次の位置の線分と衝突する線分を求め
「線分の交点計算」で交点を求める。

次に、この辺りを参考にしつつ
その５　反射ベクトルと壁ずりベクトル
衝突ラインの単位法線ベクトルと速度ベクトルから反射ベクトルを求めている。

だいたいこんな感じ。
次は滑りかな、その後オブジェクト同士の衝突あたりな気分です。

Comments