Inicio: (parte 1/2)
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Triangulitos optimos</title>
<style type="text/css">
/* <![CDATA[ */
div.triangulo {
position:absolute;
width: 0px;
height: 0px;
border-top: solid 20px transparent;
border-right: solid 20px transparent;
border-left: solid 20px transparent;
border-bottom: solid 20px transparent;
}
div.pto {
position:absolute;
width: 5px; height: 5px; font-size:1px; top:0; left:0;
}
/* ]]> */
</style>
<script>
var trans="transparent";
</script>
<!--[if lt IE 7]>
<style type="text/css">
/* <![CDATA[ */
/* Hack for transparent borders in IE6 */
div.triangulo {
filter: chroma(color=cyan);
overflow: hidden;
font-size: 0;
border-color: cyan;
}
/* ]]> */
</style>
<script type="text/javascript">
/* <![CDATA[ */
var trans = "cyan";
/* ]]> */
</script>
<![endif]-->
</head>
<body>
<script>
// eliminar los elementos duplicados de un array (se necesitara para la interseccion de arrays)
Array.prototype.removeDuplicates=function(compareFunction){
if (!compareFunction) compareFunction=null;
var a1=this.concat().sort(compareFunction);
if (compareFunction){
for (var i=0;i<a1.length;i++){
var src=a1[i];
for (var j=i+1;j<a1.length&&compareFunction(a1[j],src)==0;j++){}
if (j-1>i) a1.splice(i+1,j-i-1);
}
}else{
for (var i=0;i<a1.length;i++){
var src=a1[i];
for (var j=i+1;j<a1.length&&a1[j]==src;j++){}
if (j-1>i) a1.splice(i+1,j-i-1);
}
}
return a1;
}
//interseccion entre dos arrays - devuelve un array con los elementos comunes de los dos arrays
Array.prototype.intersect=function(a2,compareFunction){
if (!compareFunction) compareFunction=null;
var a1=this.removeDuplicates(compareFunction);
if (!a2) return a1;
var a2=a2.removeDuplicates(compareFunction);
var len2=a2.length;
if (len2<a1.length){
var c=a2; a2=a1; a1=c; c=null;
len2=a2.length;
}
if (compareFunction){
for (var i=0;i<a1.length;i++){
var src=a1[i],found=false,src;
for (var j=0;j<len2&&compareFunction(src2=a2[j],src)!=1;j++) if (compareFunction(src,src2)==0) { found=true; break; }
if (!found) a1.splice(i--,1);
}
}else{
for (var i=0;i<a1.length;i++){
var src=a1[i],found=false,src;
for (var j=0;(j<len2)&&(src>=(src2=a2[j]));j++) if (src2==src) { found=true; break; }
if (!found) a1.splice(i--,1);
}
}
return a1;
}
function compararV(a,b) {
if(a.x==b.x && a.y==b.y) return 0;
else if(a.x<b.x) return 1;
else return -1;
}
/* indice de los triangulos rectangulos
90 ab dcha -> 1
90 ab izq -> 2
90 arr dcha -> 3
90 arr izq -> 4
*/
//b es el tipo de triangulo; x,y su posicion; w,h sus dimensiones y col su color
function rect_triangle(b,x,y,w,h,col) {
var div=document.createElement("DIV");
div.className="triangulo";
div.style.left=x+"px"; div.style.top=y+"px";
//Todos nulos, luego tocaremos segun sea el conveniente (segun b) el borde que queramos;
div.style.borderTop="solid 0px "+trans;
div.style.borderRight="solid 0px "+trans;
div.style.borderLeft="solid 0px "+trans;
div.style.borderBottom="solid 0px "+trans;
switch(b) {
case 1:
div.style.borderRight="solid "+w+"px "+col;
div.style.borderTop="solid "+h+"px "+trans;
break;
case 2:
div.style.borderLeft="solid "+w+"px "+col;
div.style.borderTop="solid "+h+"px "+trans;
break;
case 3:
div.style.borderRight="solid "+w+"px "+col;
div.style.borderBottom="solid "+h+"px "+trans;
break;
default:
div.style.borderLeft="solid "+w+"px "+col;
div.style.borderBottom="solid "+h+"px "+trans;
break;
}
document.body.appendChild(div);
}
//dibuja un pequeño punto NO centrado en la posicion x,y
function pto(x,y,col) {
if(col==null) col="red";
var div=document.createElement("DIV");
div.className="pto";
div.style.left=x+"px"; div.style.top=y+"px";
div.style.backgroundColor=col;
div.style.zIndex="10";
document.body.appendChild(div);
}
/**********************************************************************/
//vertice - para crear objetos que tengan como propiedades x,y
function v(x,y) {
var a=new Array(); a["x"]=x; a["y"]=y; return a;
}
//Interseccion de rectas - las formadas por v1-v2 y v3-v4. Devuelve un v.
function i_r_r(v1,v2,v3,v4){
var lineAx1=v1.x, lineAy1=v1.y, lineAx2=v2.x, lineAy2=v2.y, lineBx1=v3.x, lineBy1=v3.y, lineBx2=v4.x, lineBy2=v4.y;
var aM, bM, aB, bB, isX=0, isY=0;
if((lineAx2-lineAx1)==0){
isX=lineAx1;
bM=(lineBy2-lineBy1)/(lineBx2-lineBx1);
bB=lineBy2-bM*lineBx2;
isY=bM*isX+bB;
}
else if((lineBx2-lineBx1)==0){
isX=lineBx1;
aM=(lineAy2-lineAy1)/(lineAx2-lineAx1);
aB=lineAy2-aM*lineAx2;
isY=aM*isX+aB;
}
else{
aM=(lineAy2-lineAy1)/(lineAx2-lineAx1);
bM=(lineBy2-lineBy1)/(lineBx2-lineBx1);
aB=lineAy2-aM*lineAx2;
bB=lineBy2-bM*lineBx2;
isX=Math.max(((bB-aB)/(aM-bM)),0);
isY=aM*isX+aB;
}
return v(isX,isY);
}