今回もこれまでに続きcanvasでドット動かしてます。

particle5

滑りベクトルを使って、壁面を滑っていくようにしてみました。

マウスに向かってグリグリといく感じがちょいお気に入り。

参考にしたのは以下のサイトです。

その５　反射ベクトルと壁ずりベクトル
Flashゲーム講座＆ASサンプル集【ベクトルを使ってみよう】
めり込み補正とかどうするかはまだ考え中。

その前にたぶんオブジェクト同士の衝突かなぁ。

こないだから引き続きcanvas + javascriptやってます。

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

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

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

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

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

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

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

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

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

チビチビとcanvas + javascriptやってみています。

particle1
particle2
particle3

http://jsdo.it/sabo2/knGX

particle1

「ActionScript3.0アニメーション」のchp8 イージングとバネを参考に作成。
加速度と摩擦を使う。

scratchbrainのエントリを参考にjsへ移植したのだけど、該当エントリ消えちゃってますね。

particle2

「Vectors for Flash」

particle3

摩擦ベクトル（正確には違うけど。）のようなものを導入。