<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>Segmentos
</title>
<style type="text/css">
DIV.contenedorejes { background-color : black; width: 400; height : 400;clear : left; position : relative; left : 0px; top : 0px;} DIV.ejeX{ width : 2px; height : 3px; clear : left; position : absolute; font-size : 0px; background-color : white; } DIV.ejeXcompleto{ clear : left; position : absolute; font-size : 0px; background-color : white; } DIV.ejeY{ width : 3px; height : 2px; clear : left; position : absolute; font-size : 0px; background-color : white; } DIV.ejeYcompleto{ clear : left; position : absolute; font-size : 0px; background-color : white; } DIV.punto{ width : 3px; height : 3px; clear : left; position : absolute; font-size : 0px; background-color : red; } DIV.texto{ clear : left; position : absolute; font-size : 11px; color :blue; }
</style>
<script type="text/javascript">
// ancho y alto del contenedor
var ancho = 400;
var alto = 400;
var x0 = 0;
var y0 = 0;
var unid_long;
var diferencial = 0.05;
if(navigator.appVersion.indexOf("MSIE") != -1) var IE = true;
function ejes_cartesianos(origenX,origenY,pixelunid){
document.getElementById('contenedorejes').innerHTML = "";
// origenes de coordenadas
x0 = origenX;
y0 = origenY;
// longitud unidades
unid_long = pixelunid;
// numero de unidades eje x+
var num_unids_x_p = (ancho-x0)/unid_long;
// numero de unidades eje x-
var num_unids_x_n = x0/unid_long;
// numero unidades eje y+
var num_unids_y_p = y0/unid_long;
// numero unidades eje y-
var num_unids_y_n = (alto-y0)/unid_long;
// EJES
// EJE X completo
x = 0;
y = y0;
punto= document.createElement("div");
if(IE) punto.setAttribute("className","ejeXcompleto");
else punto.setAttribute("class","ejeXcompleto");
punto.style.left = x + "px";
punto.style.top = y + "px";
punto.style.width = ancho + "px";
punto.style.height = 1 + "px";
document.getElementById('contenedorejes').appendChild(punto);
// eje x divisiones
// eje x +
for(i=0;i<=num_unids_x_p;i++){
x = x0 + i*unid_long;
y = y0;
punto= document.createElement("div");
if(IE) punto.setAttribute("className","ejeX");
else punto.setAttribute("class","ejeX");
punto.style.left = x + "px";
punto.style.top = y + "px";
document.getElementById('contenedorejes').appendChild(punto);
}
// eje x-
for(i=0;i<=num_unids_x_n;i++){
x = x0 - i*unid_long;
y = y0;
punto= document.createElement("div");
if(IE) punto.setAttribute("className","ejeX");
else punto.setAttribute("class","ejeX");
punto.style.left = x + "px";
punto.style.top = y + "px";
document.getElementById('contenedorejes').appendChild(punto);
}
// EJE Y
// EJE Y completo
x = x0;
y = 0;
punto= document.createElement("div");
if(IE) punto.setAttribute("className","ejeXcompleto");
else punto.setAttribute("class","ejeXcompleto");
punto.style.left = x + "px";
punto.style.top = y + "px";
punto.style.width = 1 + "px";
punto.style.height = alto + "px";
document.getElementById('contenedorejes').appendChild(punto);
// eje y divisiones
// eje y+
for(i=0;i<=num_unids_y_p;i++){
x = x0;
y = y0 - i*unid_long;
punto= document.createElement("div");
if(IE) punto.setAttribute("className","ejeY");
else punto.setAttribute("class","ejeY");
punto.style.left = x + "px";
punto.style.top = y + "px";
document.getElementById('contenedorejes').appendChild(punto);
}
// eje y-
for(i=0;i<=num_unids_y_n;i++){
x = x0;
y = y0 + i*unid_long;
punto= document.createElement("div");
if(IE) punto.setAttribute("className","ejeY");
else punto.setAttribute("class","ejeY");
punto.style.left = x + "px";
punto.style.top = y + "px";
document.getElementById('contenedorejes').appendChild(punto);
}
}
function dibujaPunto(m,n){
var xP = parseFloat(m);
var yP = parseFloat(-n);
x = x0 + xP*unid_long;
y = y0 + yP*unid_long;
punto= document.createElement("div");
if(IE) punto.setAttribute("className","punto");
else punto.setAttribute("class","punto");
punto.style.left = x + "px";
punto.style.top = y + "px";
document.getElementById('contenedorejes').appendChild(punto);
}
function dibujaSegmento(pt1,pt2){
// ancho del segmento
var a = pt2[0] - pt1[0];
// alto del segmento
var b = pt2[1] - pt1[1];
// si el segmento no es vertical
if (a != 0){
var pendiente = b/a;
// si pendiente positiva
if (a>0){
for( i =0; i <= a; i += diferencial){
absc = pt1[0] + i;
ordn = pt1[1] + pendiente*i;
dibujaPunto(absc,ordn);
}
}
// si pendiente negativa
else{
for( i =0; i >= a; i -= diferencial){
absc = pt1[0] + i;
ordn = pt1[1] + pendiente*i;
dibujaPunto(absc,ordn);
}
}
}
// el segmento es vertical
else{
if (b>0){
for( i =0; i <= b; i += diferencial){
absc = pt1[0];
ordn = pt1[1]+i;
dibujaPunto(absc,ordn);
}
}
else{
for( i =0; i >= b; i -= diferencial){
absc = pt1[0];
ordn = pt1[1]+i;
dibujaPunto(absc,ordn);
}
}
}
}
var pt1 = new Array(1,0);
var pt2 = new Array(-2,0);
var pt3 = new Array(0,6);
var pt4 = new Array(-2,3);
var pt5 = new Array(3,-6);
var pt6 = new Array(-5,-6);
</script>
</head>
<body onload="ejes_cartesianos(200,200,15);">
<table align="center">
<tr>
<td>
<table>
<tr>
<td>
<a href="javascript:dibujaSegmento(pt1,pt2);">Ejemplo 1</a>
<br>
<font size="-2">
Punto (1,0)
<br>Punto (-2,0)
</font>
</td>
</tr>
<tr>
<td>
<a href="javascript:dibujaSegmento(pt3,pt4);">Ejemplo 2</a>
<br>
<font size="-2">
Punto (0,6)
<br>Punto (-2,3)
</font>
</td>
</tr>
<tr>
<td>
<a href="javascript:dibujaSegmento(pt1,pt5);">Ejemplo 3</a>
<br>
<font size="-2">
Punto (1,0)
<br>Punto (3,-6)
</font>
</td>
</tr>
<tr>
<td>
<a href="javascript:dibujaSegmento(pt2,pt6);">Ejemplo 4</a>
<br>
<font size="-2">
Punto (-5,-6)
<br>Punto (-2,0)
</font>
</td>
</tr>
<tr>
<td>
<a href="javascript:dibujaSegmento(pt4,pt2);">Ejemplo 5</a>
<br>
<font size="-2">
Punto (-2,3)
<br>Punto (-2,0)
</font>
</td>
</tr>
<tr>
<td>
<a href="javascript:dibujaSegmento(pt5,pt6);">Ejemplo 6</a>
<br>
<font size="-2">
Punto (3,-6)
<br>Punto (-5,-6)
</font>
</td>
</tr>
<tr>
<td>
<a href="javascript:dibujaSegmento(pt1,pt3);">Ejemplo 7</a>
<br>
<font size="-2">
Punto (1,0)
<br>Punto (0,6)
</font>
</td>
</tr>
<tr>
<td>
<a href="javascript:ejes_cartesianos(200,200,15)">Borrar</a>
</td>
</tr>
</table>
</td>
<td>
<div id="contenedorejes" class="contenedorejes">
</div>
</td>
</tr>
</table>
</body>
</html>
