「速度」は向きを持ち、その大きさを「速さ」と呼びます。そして、向きと大きさを持つ量が「ベクトル」です。今回はその向きと大きさを指定してオブジェクトを動かしてみます。
上記デモでは、向きすなわち角度(angle)を30度、大きさ(speed)を5.0に指定してオブジェクトを動かしています。
関連ページ
デモ画面コード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vector</title> <style> *{ margin: 0px; padding: 0px; } #canvas { background-color: #000; } </style> <head> <body> <canvas id="canvas" width="500" height="500"> ブラウザが対応しておりません。 </canvas> <script> window.addEventListener('load', draw, false); function draw(){ var x = 0, y = 0; var speed = 5.0; //速さ var angle = 30; //角度 var radians = 0; //ラジアン var vx = 0; var vy = 0; var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); function loop() { ctx.clearRect(0 ,0, canvas.width, canvas.height); //キャンバス上の図形をクリアにする radians = angle * Math.PI / 180; //度をラジアンに変換 vx = Math.cos(radians)*speed; vy = Math.sin(radians)*speed; x +=vx; y +=vy; ctx.beginPath(); ctx.fillStyle = 'green'; ctx.arc(x, y, 10, 0, Math.PI*2.0, true); ctx.fill(); requestAnimationFrame(loop); } loop(); } </script> </body> </html> |
37行目
度をラジアンに変換しています。1[度]はπ/180[rad]なのでangle[度]のラジアンは下記のように求めることができます。
1 |
angle * π/180 |
38・39行目
速度をX軸Y軸の各成分に分解しています。
下記の関連ページでは、角度ではなくあらかじめX、Y軸方向の各成分に速さを指定しています。
関連ページ
requestAnimationFrameでアニメーションをおこなう