ボールが重力Gにおいて自由落下する様子を表現してみます。その際、ボールが床に反射するごとに速度を減速させ（減衰）、最終的にボールが床に止まる挙動も再現してみます。
|
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 59 60 61 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>decay</title> <style> *{ margin: 0px; padding: 0px; } #canvas { background-color: #000; } </style> <head> <body> <canvas id="canvas" width="600" height="500"> ブラウザが対応しておりません。 </canvas> <script> window.addEventListener('load', draw, false); function draw(){ var x = 300, y = 0; //ボールの初期位置 var vy =0; //y軸方向の初期速度 var R = 10; //ボールの半径 var GRAVITY = 2; //重力 var FRICTION = 0.75; //跳ね返り係数 var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); function loop() { ctx.clearRect(0 ,0, canvas.width, canvas.height); //キャンバス上の図形をクリアにする vy += GRAVITY; //重力による速度の変化 y += vy; //ｙ座標を動かす if(y >canvas.height-R){ //地面に到達したら vy *= -1* FRICTION; //速度を反転し減速 y = canvas.height-R; //座標を画面内に戻す if (Math.abs(vy) < GRAVITY) { //速度がある程度小さくなったら強制的に0にする vy = 0; } } ctx.beginPath(); ctx.fillStyle = 'green'; ctx.arc(x, y, R, 0, Math.PI*2.0, true); ctx.fill(); requestAnimationFrame(loop); } loop(); } </script> </body> </html> |
39~45行目
壁の反射については、『Built with Processing[Ver. 1.x対応版] -デザイン/アートのためのプログラミング入門』 p.148〜151の「跳ね返る」を参照させて頂いた。
関連ページ
参照文献
