HTML5 Ball

Ilustration of Euler integration

HTML

<body>
<canvas id="mycanvas" width="200" height="200" onclick="q()"></canvas>

CSS

canvas { border: 1px solid rgb(0,0,0); }

JavaScript

var y,v;
	var W,H;
	var RADIUS = 20;
	var dt = 0.1;
	var g = -9.8;

	// przygotowanie do rysowania
	var canvas = document.getElementById('mycanvas');
	W=240;	H=180;
	canvas.width = W; 	
	canvas.height = H;
	var ctx = canvas.getContext('2d');

	// inicjalizacja
	function init()
	{	
		y=H/2;
		v=0;
	}

	// pętla obliczeniowa i rysująca
	loop=function() 
	{
		
		y = y + v * dt;
		v = v + g * dt;

		if(y<RADIUS) v = -v;
				
		//rysowanie punktu
		ctx.clearRect(0,0,W,H);
		ctx.strokeStyle = "rgb(0,0,0)";
		ctx.beginPath();
		ctx.arc(W/2,H-y,RADIUS,0,2*Math.PI);	// kolko
		ctx.stroke();					// rysuj

		//kontynuuj petle
		requestAnimationFrame(loop);
	};

	// start
	init();
	loop();