ボールを壁に反射させる[入射角/反射角][canvas]

2017年4月9日

ボールが壁に反射する挙動を表現してみます。

 

まずはじめに、X軸方向/Y軸方向に速度があらかじめ分解されているパターンで考えます。

 

デモ画面1

 

 

36〜42行目
左右横の壁にボールが到達した場合には、ボールのX軸方向の速度のみを反転させています。また上下の壁に到達した場合には、ボールのY軸方向の速度のみを反転させます。

 

 

次に「反射の法則」を考慮してみます。反射の法則は下記の図のように、入射角と反射角は等しくなります

 

 

 

デモ画面2

 

 

47〜55行目

左右横の壁にボールが到達した場合は、角度を「180-angle」に、上下の壁にボールが到達した場合は、角度を「360-angle」に変換しています(参照文献『HTML5 Canvas』オライリージャパン p.166-169)。結局はデモ画面1の説明と同じことをしています。

 

 

関連ページ

角度を指定してオブジェクトを動かす[cos/sin][ベクトル]

 

複数のパーティクルを表現する[prototype]

 

ボールを床に落下させる[重力][減衰]

 

 

 

参照文献


 

 

スポンサーリンク

 

Copyright © 2017 ウェブの葉 All Rights Reserved.  プライバシーポリシー