円運動を表現する[sin][cos][canvas]

2017年3月26日

オブジェクトを円運動させます。円運動は三角関数(サイン/コサイン)を利用して表現することができます。

 

デモ

 

 

31〜46行目 loop()
loop関数を繰り返すたびに角度(degree)を1度増やしていきます。この角度の大きさが円運動する際の速さになっています。

 

35・36行目
円運動するオブジェクトの座標は、コサイン(cos()メソッド)とサイン(sin()メソッド)を利用して求めることができます。

 

その際に度をラジアンに変換する必要あります(33行目)。1度はπ/180ラジアンです。canvas.width / 2とcanvas.height / 2はcanvasの中心点の座標です。

 

 

関連ページ

requestAnimationFrameでアニメーションをおこなう

 

等加速度運動を表現する[等速度運動]

 

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

 

 

スポンサーリンク

 

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