-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path3_Acceleration.html
70 lines (55 loc) · 1.19 KB
/
3_Acceleration.html
1
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Skookum Labs</title></head><body><canvas id="surface" width="600" height="400"></canvas><pre><code id="source">var ball = { x: 300, y: 200, r: 15, vx: 0, vy: 0};|// ...|ball.x += ball.vx;ball.y += ball.vy;|ball.vx *= .99;ball.vy *= .99;ball.vy += .25;</code></pre><script>// Version 2 - Accelerationvar ball = { x: 300, y: 200, r: 15, vx: 0, vy: 0};var canvas = document.getElementById("surface");var ctx = canvas.getContext('2d');setInterval(function() { // Clear display ctx.save(); ctx.fillStyle = "rgba(0, 0, 0, .3)"; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.restore(); // Update ball (with Physics! =) // 1 - apply velocity to position (vx -> x) ball.x += ball.vx; ball.y += ball.vy; // 2 - apply drag/friction to velocity ball.vx *= .99; ball.vy *= .99; // 3 - apply gravity to velocity ball.vy += .25; // Draw ball ctx.save(); ctx.translate(ball.x, ball.y); ctx.fillStyle = "#fff"; ctx.beginPath(); ctx.arc(0, 0, ball.r, 0, Math.PI * 2, true); ctx.closePath(); ctx.fill(); ctx.restore();}, 1000 / 77);</script></body></html>