ws_1.htm

<!DOCTYPE HTML>
<html>
<head>

<script type="text/javascript">

var canvas;
var ctx;


var time = 0;
var elapsed_time = 0.01;

var vel = {x:10,y:0};
var pos = {x:100,y:100};
var radio = 30;

var OX = 200;
var OY = 100;

var DX = 400;
var DY = 500;

// imagen 
var img = new Image(); 



// Algebra de vectores
// -------------------------------------------------------------
// Suma de Vectores 
// w = u + v
function add(u , v)
{
	return {x: u.x + v.x , y:u.y + v.y};	
}


// Resta de Vectores 
// w = u - v
function substract(u , v)
{
	return {x: u.x - v.x , y:u.y - v.y};	
}

// Multiplicacion de Vectores 
// w = u * k
function mul(u , k)
{
	return {x: u.x*k , y:u.y*k};	
}


// producto interno
function dot(u , v)
{
	return u.x*v.x+u.y*v.y;	
}

// norma o modulo
function length(u)
{
	return Math.sqrt(u.x*u.x + u.y*u.y);	
}


// normalizar
function normalize(u)
{
	var len = length(u);
	u.x /= len;	
	u.y /= len;	
}

// computar el vector de reflexion
function reflect(i,n)
{
	
	// v = i - 2 * dot(i, n) * n
	return add(i , mul(n,-2*dot(i, n)));
}

//---------------------------------------------------------------------------------------------

function draw() 
{
	if (canvas.getContext)
	{
		ctx.fillStyle = 'rgba(255,255,255,255)';
		ctx.fillRect(0,0,1000,700);
		ctx.fillStyle = 'rgba(192,255,192,255)';
		ctx.fillRect(OX ,OY ,DX,DY);
		time+=elapsed_time;

		// integro la velocidad
		var D = mul(vel,elapsed_time);
		pos = add(pos , D);

		// dibujo la bolita
		ctx.drawImage(img,OX + pos.x - radio, OY + pos.y - radio, 2*radio,2*radio);

	}
}

function animate()
{   
	canvas = document.getElementById('mycanvas');
	ctx = canvas.getContext('2d');
	img.src = 'ball.png';
	setInterval(draw, 1);
} 




</script>
</head>
<body onload="animate();">
	<canvas id="mycanvas" width="1000" height="700"></canvas>
</body>
</html>
 