Colisiones/ej6SimpleFlipper.htm

<!DOCTYPE HTML>
<html>
<head>


<script type="text/javascript">

var canvas;
var ctx;

//
// Ejemplo de colisiones flipper simple, pinza key a
//

var time = 0;
var elapsed_time = 0.01;

var vel_ini = {x:0,y:150};
var pos_ini = {x:180,y:250};
var vel = vel_ini;
var pos = pos_ini;
var radio = 10;

var OX = 100;
var OY = 25	;
var DX = 400;
var DY = 500;

var pos_pinza = {x:150,y:430};
var largo_pinza = 50;
var timer_pinza = 0;
var timer_pinza_total = 0.5;
var timer_pinza_delay = 0;
var flag_delay_pinza = false;


var circulos = new Array();
var cant_circulos = 0;
var lineas = new Array();
var cant_lineas = 0;


function init()
{
	var dw = 10;
	circulos[0] = { x:100,  y:120 , r:40 , clr:'rgba(0,0,255,255)'};
	circulos[1] = { x:DX-100,  y:120 , r:40 , clr:'rgba(0,0,255,255)'};
	circulos[2] = { x:110, y:200 , r:10 , clr:'rgba(255,100,0,255)'};
	circulos[3] = { x:130, y:250 , r:10 , clr:'rgba(255,100,0,255)'};
	circulos[4] = { x:DX-110, y:200 , r:10 , clr:'rgba(255,100,0,255)'};
	circulos[5] = { x:DX-130, y:250 , r:10 , clr:'rgba(255,100,0,255)'};
	circulos[6] = { x:200, y:300 , r:5 , clr:'rgba(0,0,0,255)'};
	circulos[7] = { x:200, y:350 , r:5 , clr:'rgba(0,0,0,255)'};

	cant_circulos = 0

	lineas[0] = { x0:0,		y0:300,		x1:100 ,	y1:450};
	lineas[1] = { x0:100,	y0:340,		x1:150 ,	y1:430};
	lineas[2] = { x0:50,	y0:60,		x1:100 ,	y1:20};
	lineas[3] = { x0:130,	y0:30,		x1:150 ,	y1:50};
	cant_lineas = 4;
	var cant_ant = cant_lineas;

	for(i=0;i<cant_ant;++i)
		lineas[cant_lineas++] = {	x0:DX-lineas[i].x0,	y0:lineas[i].y0,	
									x1:DX-lineas[i].x1-dw, y1:lineas[i].y1};


	cant_ant = cant_lineas;
	for(i=0;i<cant_ant;++i)
	{
		var p0 = {	x:lineas[i].x0,	y:lineas[i].y0};
		var p1 = {	x:lineas[i].x1,	y:lineas[i].y1};
		var dir_N = normal(substract(p1,p0));
		normalize(dir_N);
		p0 = add(p0 , mul(dir_N,dw));
		p1 = add(p1 , mul(dir_N,dw));
		lineas[cant_lineas++] = {	x0:p0.x,	y0:p0.y,	x1:p1.x,	y1:p1.y};

		p0 = add(p0 , mul(dir_N,-dw/2));
		p1 = add(p1 , mul(dir_N,-dw/2));


		circulos[cant_circulos++] = { x:p0.x,  y:p0.y, r:dw/2 , clr:'rgba(0,0,0,255)'};
		circulos[cant_circulos++] = { x:p1.x,  y:p1.y, r:dw/2 , clr:'rgba(0,0,0,255)'};
	}

	lineas[cant_lineas++] = { x0:pos_pinza.x,	y0:pos_pinza.y,		
							x1:pos_pinza.x,	y1:pos_pinza.y + largo_pinza};


	return 0;
}

function add(u , v)
{
	return {x: u.x + v.x , y:u.y + v.y};	
}


function substract(u , v)
{
	return {x: u.x - v.x , y:u.y - v.y};	
}

function mul(u , k)
{
	return {x: u.x*k , y:u.y*k};	
}

function dot(u , v)
{
	return u.x*v.x+u.y*v.y;	
}

function length(u)
{
	return Math.sqrt(u.x*u.x + u.y*u.y);	
}

function normalize(u)
{
	var len = length(u);
	u.x /= len;	
	u.y /= len;	
}


function normal(u)
{
	return {x: -u.y , y:u.x};
}

function reflect(i,n)
{
	
	// v = i - 2 * dot(i, n) * n
	return add(i , mul(n,-2*dot(i, n)));
}


// r = p0 +kD
function ray_circle(p0,Dir,centro,radio)
{
    // necesito que Dir este normalizado, si no esta puedo hacer esta transformacion
    // r = p0 + (t*ld) * (Dir * (1/ld))
    // r = p0 + k D
    // donde k = t*ld
    // D = Dir * (1/ld)


    var ld = length(Dir);
    var D = mul(Dir, 1 / ld);

    // Ahora si r = p0 + k D

	var rta = -1;
	// verifico si interseta con la esfera
	var aux = add(p0 , mul(centro,-1));
	var c = dot(aux,aux) - radio*radio;
	var B = 2*dot(D,aux);
	var disc = B*B - 4*c;
	if(disc>=0)
	{
		var t0 = (-B-Math.sqrt(disc))/2;
		var t1 = (-B+Math.sqrt(disc))/2;

		if(t0>t1)
		{
			var aux_t = t1;
			t1 = t0;
			t0 = aux_t;
		}

        // entra en la esfera por t0 y sale por t1. 
        // se supone que el punto p0 NO esta dentro de la esfera, asi que t0, t1 son ambos positivos o ambos negativos
        // devuelve en base al D original, es decir hay que escalar segun ld
        rta = t0 / ld;
	}
	return rta;
}


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_obj() 
{
	// dibuja los objetos 
	for(i=0; i<cant_circulos; ++i)
	{

		ctx.fillStyle = circulos[i].clr;
		ctx.beginPath();
		ctx.arc(OX + circulos[i].x, OY + circulos[i].y, circulos[i].r, 0, Math.PI*2,true); 
		ctx.closePath();
		ctx.fill();		
	}

	//ctx.lineWidth = 5;
	for(i=0; i<cant_lineas; ++i)
	{

		ctx.beginPath();
		ctx.moveTo(OX + lineas[i].x0, OY + lineas[i].y0); 
		ctx.lineTo(OX + lineas[i].x1, OY + lineas[i].y1); 
		ctx.closePath();
		ctx.stroke();		
	}
	ctx.lineWidth = 1;

}


function draw() 
{
	if (canvas.getContext)
	{
		ctx.fillStyle = 'rgba(255,255,255,255)';
		ctx.fillRect(0,0,800,600);
		ctx.fillStyle = 'rgba(192,255,192,255)';
		ctx.fillRect(OX ,OY ,DX,DY);
		time+=elapsed_time;

		// dibujo el fondo
		draw_obj();


		// integro la velocidad
		var pos_ant = pos;
		var D = mul(vel,elapsed_time);
		pos = add(pos , D);


		if(timer_pinza_delay)
		{
			timer_pinza_delay-= elapsed_time;
			if(timer_pinza_delay<0)
				timer_pinza_delay = 0;
		}
		else
		if(timer_pinza>0)
		{
			timer_pinza -= elapsed_time;
			if(timer_pinza<0)
				timer_pinza = 0;

			
			var ang_pinza = Math.PI * (1 - timer_pinza /timer_pinza_total);
			if(ang_pinza > Math.PI/2)
			{
				if(!flag_delay_pinza)
				{
					// solo la primera vez que llega a 90 grados genera el delay
					timer_pinza_delay = 1;
					flag_delay_pinza = true;
					ang_pinza = Math.PI / 2;
				}
				else
					// esta volviendo
					ang_pinza = Math.PI - ang_pinza;
			}

			
			var d_pinza = {x:Math.sin(ang_pinza)*largo_pinza , y:Math.cos(ang_pinza)*largo_pinza};
			lineas[cant_lineas-1].x1  = pos_pinza.x + d_pinza.x;
			lineas[cant_lineas-1].y1  = pos_pinza.y + d_pinza.y;

			// caso particular, verifico si la pinza colisiona con la bolita
			if(pos.y>=pos_pinza.y && pos.x>=pos_pinza.x && pos.x<=pos_pinza.x+d_pinza.x && 
				length(substract(pos,pos_pinza))<=largo_pinza)
			{
				pos = pos_ant;
				vel = mul(vel, -1);
			}

		}


		// 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)
		{
			//alert( "Perdiste");
			vel = vel_ini;
			pos = pos_ini;
		}

		// quiero ir de la pos_ant a la pos nueva
		// Verifico las intersecciones contra todos los objetos
		for(i=0;i<cant_circulos;++i)
		{
			// verifico la interseccion con el circulo i
			var c = {x:circulos[i].x , y:circulos[i].y};		// centro de la esfera
			var t = ray_circle(pos_ant,D,c,circulos[i].r+radio);
			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 = substract(Ip,c);
				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));
				// no soporta mas colisiones en el mismo frame
				i = cant_circulos;
			}
		}


		for(i=0;i<cant_lineas;++i)
		{

			var p1 = {x:lineas[i].x0 , y:lineas[i].y0};
			var dir_1 = {x:lineas[i].x1-p1.x , y:lineas[i].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));
				// no soporta mas colisiones en el mismo frame
				i = cant_lineas;
			}
		}

		// dibujo la bolita
		ctx.fillStyle = 'rgba(255,0,0,255)';
		ctx.beginPath();
		ctx.arc(OX + pos.x, OY + pos.y, radio , 0, Math.PI*2,true); 
		ctx.closePath();
		ctx.fill();		


	}
}

function doKeyDown(e) 
{
	if(e.keyCode==65)
	{
		timer_pinza = timer_pinza_total;
		flag_delay_pinza = false;
		timer_pinza_delay = 0;
	}
}


function animate()
{   
	var a = init();
	canvas = document.getElementById('mycanvas');
	document.addEventListener( "keydown", doKeyDown, true);
	ctx = canvas.getContext('2d');
	setInterval(draw, 10);
} 


</script>
</head>
<body onload="animate();">
<p>Ejemplo de colisiones fliper simple: pinza con tecla "a"</p>
	<canvas id="mycanvas" width="800" height="600"></canvas>
</body>
</html>
 