ws_3.htm

<!DOCTYPE HTML>
<html>
<head>

<script type="text/javascript">

var canvas;
var ctx;


var time = 0;
var elapsed_time = 0.01;

// pelotita
var vel = {x:-30,y:90};
var pos = {x:300,y:100};
var radio = 20;

// obstaculo linea
var linea = { x0:50,  y0:250 , x1:300 , y1:500};

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;	
}


// devuelve el vector normal 
function normal(u)
{
	return {x: -u.y , y:u.x};
}

// 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 matriz_det(M)
{
	return M.a11*M.a22 - M.a12*M.a21;
}


function matriz_X(M,B)
{
	return M.a22*B.x-M.a12*B.y;
}


function matriz_Y(M,B)
{
	return M.a11*B.y-M.a21*B.x;
}



function ray_segment(p0,dir_0,p1,dir_1)
{
	var rta = -1;
	var M = {	a11: dir_0.x , a12:-dir_1.x ,
				a21: dir_0.y , a22:-dir_1.y
			}

	var det = matriz_det(M);
	if(Math.abs(det)>0.0001)
	{
		var B = {x:p1.x-p0.x , y:p1.y-p0.y};
		var t = matriz_X(M,B) / det;
		var k = matriz_Y(M,B) / det;
		if(k>=0 && k<=1 && t>=0 && t<=1)
			rta = t;
	}
	return rta;
}



//---------------------------------------------------------------------------------------------

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;

		// 1- integro la velocidad
		var pos_ant = pos;
		var D = mul(vel,elapsed_time);
		pos = add(pos , D);

		// 2- verifico los limites
		if(pos.x<radio)
		{
			// rebote izquierdo
			pos.x = 2*radio - pos.x;
			vel.x *= -1;
		}
		else
		if(pos.x>DX-radio)
		{
			// rebote derecho
			pos.x = (DX-radio)*2 - pos.x;
			vel.x *= -1;
		}

		if(pos.y<radio)
		{
			// rebote abajo
			pos.y = 2*radio-pos.y;
			vel.y *= -1;
		}
		else
		if(pos.y>DY-radio)
		{
			// rebote arriba
			pos.y = (DY-radio)*2-pos.y;
			vel.y *= -1;
		}

		//3- Verifico si choca contra la linea
		var p1 = {x:linea.x0 , y:linea.y0};
		var dir_1 = {x:linea.x1-p1.x , y:linea.y1-p1.y};
		// dezplazo la recta para tener en cuenta el radio de la bolita
		var dir_N = normal(dir_1);
		normalize(dir_N);
		// puedo desplazar en sentido positivo o negativo, pero solo interesa el sentido
		// que se acerca a la pelotita, para ello uso el hecho que angulo entre la normal y la direccion
		// de la pelotita tiene que ser >180 grados si estan en la conf. correcta
		var desf;
		if(dot(dir_N,D)<0)
			desf = mul(dir_N,radio);
		else
			desf = mul(dir_N,-radio);
		p1 = add(p1 , desf);

		var t = ray_segment(pos_ant,D,p1,dir_1);
		if(t>0 && t<1)
		{
			D = mul(D,t);
			// Calculo el punto de interseccion
			var Ip= add(pos_ant , D);
			// calculo la normal en el pto de interseccion
			var N = normal(dir_1);
			normalize(N);
			// Calculo la direccion de rebote
			D = reflect(D,N);
			// Actualizo la nueva posicion, utilizando el tiempo en restante, para aplicarlo
			// a la direccion de rebote
			var rtime = elapsed_time*(1-t);		// tiempo restante
			pos = add(Ip , mul(D,rtime));
			// actualizo la velocidad
			normalize(D);
			vel = mul(D,length(vel));
		}

	
		//3- dibujo la linea
		ctx.beginPath();
		ctx.moveTo(OX + linea.x0, OY + linea.y0); 
		ctx.lineTo(OX + linea.x1, OY + linea.y1); 
		ctx.closePath();
		ctx.stroke();		

		
		// 4- 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>
 