La web personal de Jall. Representación de cónicas

La ELIPSE Es el lugar geométrico de los puntos del plano cuya suma de distancias a dos puntos fijos es constante. Estos dos puntos fijos se llaman focos de la elipse.

Su ecuación (x-h)²/a² + (y-k)²/b² = 1, siendo 0(h,k) el centro de la elipse, a el semieje mayor y b el semieje menor.

Su ecuación general sería Ax² + By² + Cx + Dy + E = 0 (A != B), semejante a la ecuación de la circunferencia (A = B).

Se representaran 12 elipses con distintos ejes (mayor o menor), distintos centros y distintos ángulos de rotación de su eje mayor.

En breve, se publicarán los artículos referidos a las otras cónicas (circunferencia, hipérbola y parábola).

1.- Representación de 12 ELIPSES.

Indice ¦ 2º >>

Para representar las elipses usando JavaScript utilizaremos los siguientes valores: el contenedor de los ejes es 380x400 (pxs); el origen es el punto (190,200) y cada unidad es de 40 pxs. El diferencial es PI/30.

TOP

2.- Código utilizado.

<< 1º ¦ Indice

Esta es una página que implementa las funciones dibujaElipse(a,b,rot,c1,c2), dibujaPunto(m, n,txt) y ejes_cartesianos(origenX, origenY, pixelunid). El código *.css no es trivial y debería modificarse con sumo cuidado.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>
CONICAS - ELIPSE
</title>
<style type="text/css">
a {
text-decoration: none;
}
DIV.contenedorejes {
background-color: #FFFBEC;
width: 380;
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: blue;
}
DIV.ejeXcompleto {
clear: left;
position: absolute;
font-size: 0px;
background-color: blue;
}
DIV.ejeY {
width: 3px;
height: 2px;
clear: left;
position: absolute;
font-size: 0px;
background-color: blue;
}
DIV.ejeYcompleto {
clear: left;
position: absolute;
font-size: 0px;
background-color: blue;
}
DIV.punto {
width: 2px;
height: 2px;
clear: left;
position: absolute;
font-size: 0px;
background-color: red;
}
DIV.texto {
clear: left;
position: absolute;
font-size: 11px;
color: green;
}

</style>
<script type="text/javascript">
// ancho y alto del contenedor
var ancho = 380;
var alto = 400;
var x0 = 0;
var y0 = 0;
var unid_long;
var diferencial = Math.PI/30;
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,txt){
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);
if(txt!= ""){
// el texto que acompaña a los puntos
var texto = txt;
textoPunto = document.createTextNode(texto);
divTexto = document.createElement("div");
if(IE) divTexto.setAttribute("className","texto");
else divTexto.setAttribute("class","texto");
divTexto.style.left = (x+2) + "px";
divTexto.style.top = (y+1) + "px";
divTexto.appendChild(textoPunto);
document.getElementById('contenedorejes').appendChild(divTexto);
}
}
function dibujaElipse(a,b,rot,c1,c2){
init();
var text="";
for (i=0;i<=(2*Math.PI); i += diferencial){
x = a*Math.cos(i);
y = b*Math.sin(i);
x2 = x*Math.cos(rot) - y*Math.sin(rot);
y2 = x*Math.sin(rot) + y*Math.cos(rot);
x2 += c1;
y2 += c2;
if (x==a) text="a";
if (y==b) text="b";
dibujaPunto(x2,y2,text);
dibujaPunto(c1,c2,"O");
text="";
}
}
function init(){
ejes_cartesianos(190,200,40);
}
</script>
</head>
<body onload="init()" style="left:10px;top:0px;">
<table>
<tr>
<td width="200">

ECLIPSES


<a href="javascript:dibujaElipse(2,1,0,0,0)">
a
=2
b
=1
φ
=0
O
(0,0)</a>
 
<a href="javascript:dibujaElipse(3,1,0,0,0)">
a
=3
b
=1
φ
=0
O
(0,0)</a>
 
<a href="javascript:dibujaElipse(3,2,0,0,0)">
a
=3
b
=2
φ
=0
O
(0,0)</a>
 
<a href="javascript:dibujaElipse(3,1,Math.PI/3,0,0)">
a
=3
b
=1
φ
=Π/3
O
(0,0)</a>
 
<a href="javascript:dibujaElipse(3,1,Math.PI/4,0,0)">
a
=3
b
=1
φ
=Π/4
O
(0,0)</a>
 
<a href="javascript:dibujaElipse(3,1,Math.PI/5,0,0)">
a
=3
b
=1
φ
=Π/5
O
(0,0)</a>
 
<a href="javascript:dibujaElipse(3,1,Math.PI/6,0,0)">
a
=3
b
=1
φ
=Π/6
O
(0,0)</a>
 
<a href="javascript:dibujaElipse(3,2,-Math.PI/4,0,0)">
a
=3
b
=2
φ
=-Π/4
O
(0,0)</a>
 
<a href="javascript:dibujaElipse(3,2,-Math.PI/3,0,0)">
a
=3
b
=2
φ
=-Π/3
O
(0,0)</a>
 
<a href="javascript:dibujaElipse(2,1,0,-1,2)">
a
=2
b
=1
φ
=0
O
(-1,2)</a>
 
<a href="javascript:dibujaElipse(1,3,0,-2,-1)">
a
=1
b
=3
φ
=0
O
(-2,-1)</a>
 
<a href="javascript:dibujaElipse(3,2,-Math.PI/3,2,0)">
a
=3
b
=2
φ
=-Π/3
O
(2,0)</a>

</td>
<td>
<div id="contenedorejes" class="contenedorejes">
</div>
</td>
</tr>
</table>
</html>

TOP

Representación de cónicas - LA ELIPSE

Indice.

1.- Representación de 12 ELIPSES.

2.- Código utilizado.

Menú

Categorías

Lo Último