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

2017年4月5日

「速度」は向きを持ち、その大きさを「速さ」と呼びます。そして、向きと大きさを持つ量が「ベクトル」です。今回はその向きと大きさを指定してオブジェクトを動かしてみます。

 

デモ画面

 

上記デモでは、向きすなわち角度(angle)を30度、大きさ(speed)を5.0に指定してオブジェクトを動かしています。

 

関連ページ

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

 

 

デモ画面コード

 

37行目
度をラジアンに変換しています。1[度]はπ/180[rad]なのでangle[度]のラジアンは下記のように求めることができます。

 

 

38・39行目
速度をX軸Y軸の各成分に分解しています。

 

 

下記の関連ページでは、角度ではなくあらかじめX、Y軸方向の各成分に速さを指定しています。

 

関連ページ

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

 

 

 

スポンサーリンク

 

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