速さが常に一定で直線に進む運動を等速度運動と呼びます（速度は向きを持ち、その大きさが速さです。速さが一定でも直線でない運動は等速運動と呼びます。）。一方、速さが一定の割合で変化する運動を等加速度運動と呼びます。
スポンサーリンク
加速度は単位時間あたりの速度の変化率のことです。
|
1 2 3 4 |
//速度は常に一定 function loop() { x += vx; } |
上記コードにおいて、loop()関数が一定の間隔で呼ばれた場合、位置xに対して一定の間隔で速度値vxが足されていきます。この場合、速度が常に一定なので加速度はゼロとなります。
次に加速度を与えてみます。
|
1 2 3 4 5 |
//速度が一定の割合で変化する function loop(){ vy +=acc; //速度+加速度 y +=vy; } |
loop()関数が呼び出されるごとに、加速度accが速度vyに加算され、位置yにその速度値vyが足されていきます。
以上を踏まえて、ボールを斜め上に投げて自由落下しているような動きを表現してみます（斜方投射）。
デモ画面のボールの進み方は、X軸方向に対して速さは常に一定で、Y軸方向に対しては速さが一定の割合で変化しながら進んでいます。つまりX軸方向に対しては等速度運動、Y軸方向に対しては等加速度運動をしています。
|
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 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>加速度運動</title> <style> *{ margin: 0px; padding: 0px; } #canvas { background-color: #000; } </style> <head> <body> <canvas id="canvas" width="600" height="600"> ブラウザが対応しておりません。 </canvas> <script> window.addEventListener('load', draw, false); function draw(){ var x = 0, y = 100; //位置 var vx = 10.0, vy = -10.0; //初速度 var acc = 0.7; //加速度 var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); function loop() { //ctx.clearRect(0 ,0, canvas.width, canvas.height); //キャンバス上の図形をクリアにする x +=vx; //等速度運動 vy +=acc; //一定の間隔で加速度分が増えていく 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> |
関連ページ
