ws_x.htm

<!DOCTYPE HTML>
<html>
<head>

<script type="text/javascript">

var canvas;
var ctx;

//
// Ejemplo de colisiones
//

var time = 0;
var elapsed_time = 0.01;

var vel = {x:100,y:350};
var pos = {x:0,y:0};
var radio = 10;

var OX = 200;
var OY = 100;

var DX = 400;
var DY = 500;

var circulos = new Array();

// imagen de la pelota
var img_ball = new Image(); 


/*
circulos[0] = { x:150,  y:50 , r:50 , clr:'rgba(255,0,255,255)'};
circulos[1] = { x:50,  y:100 , r:30 , clr:'rgba(0,255,255,255)'};
circulos[2] = { x:100, y:150 , r:30 , clr:'rgba(255,0,0,255)'};
circulos[3] = { x:300, y:300 , r:44 , clr:'rgba(0,255,0,255)'};
circulos[4] = { x:100, y:340 , r:30 , clr:'rgba(255,0,0,255)'};
circulos[5] = { x:250, y:100 , r:44 , clr:'rgba(0,255,0,255)'};
*/
var cant_circulos = 20;


function init()
{
	var fil = 0;
	var col = 0;
	var r = 10;
	for(i=0;i<cant_circulos;++i)
	{
		circulos[i] = { x:col*100+50,  y: fil*100+50 , r:r , clr:'rgba(32,0,120,255)'};
		if(col++>2)
		{
			col = 0;
			fil++;
			if(r==10)
				r = 30;
			else
				r = 10;
		}
	}


}


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 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);


	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 draw_obj() 
{
	// dibuja los objetos 
	var c=document.getElementById("mycanvas");
	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.drawImage(img_ball,OX + circulos[i].x, OY + circulos[i].y, circulos[i].r,circulos[i].r);
	}
}



function draw() 
{
	init();

	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;

		// dibujo el fondo
		draw_obj();

		// integro la velocidad
		var pos_ant = pos;
		var D = mul(vel,elapsed_time);
		pos = add(pos , D);

		// 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;
		}


		// 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;
			}
		}

		// 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 animate()
{   
	canvas = document.getElementById('mycanvas');
	ctx = canvas.getContext('2d');
	img_ball.src = 'ball.png';
	setInterval(draw, 1);
} 




</script>
</head>
<body onload="animate();">
	<canvas id="mycanvas" width="1000" height="700"></canvas>
</body>
</html>
 