Demonstrating acceleration
Here is a simple recipe demonstrating the physics principle of acceleration. The output looks like this:
How to do it…
The recipe is as follows:
The HTML code:
<html> <head> <title>Demonstration of Acceleration</title> <script src="Acceleration.js"></script> </head> <body onload="init();"> <canvas id="MyCanvasArea" width="600" height="200" style="border:2px solid blue;" > your browser does not support canvas </canvas> <h1>Demonstration of Acceleration</h1> </body> </html>
The JavaScript code:
var x = 0;
var y;
var xEnd=600;
var goRight=true;
var can;
var ctx;
var acceleration=0.006;
var time=1;
function animate() {
reqAnimFrame = window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame ||
window.oRequestAnimationFrame
;
clear(); //clear the canvas
...
