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...