Cónicas - LA CIRCUNFERENCIA

En esta práctica representaremos Circunferencias, Sectores circulares y Anillos circulares.

El script, además de la representación de cada figura, calcula para cada una de ellas, sus respectivas área y perímetro de acuerdo con las siguientes fórmulas:

  • Circunferencia. Perímetro = 2ΠR Area = ΠR2
  • Sectores Circulares. Perímetro = Rβ Area = βR2/2
  • Anillos circulares. Perímetro = PerR1 + PerR2 Area = ArR1 - ArR2 (R1 > R2)

Como siempre la representación está realizada usando JavaScript. Si consulta AQUI tendrá más ejemplos de representaciones geométricas utilizando este lenguaje.

Indice.

  1. Representaciones.
  2. Código utilizado.

1.- Representaciones.

Indice  ¦  2º  >>

Para las representaciones he usado los siguientes valores: el contenedor de los ejes es 400x400 (pxs); el origen es el punto (200,200) y cada unidad es de 50 pxs. El diferencial es Π/20.


TOP

2.- Código utilizado.

<<  1º  ¦  Indice  

Esta es una página que implementa las funciones dibujaCircunferencia(r,c1,c2), dibujaSeccion(r,A), dibujaAnilloCircular(r1,r2), 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>
</title>
<style type="text/css">
a{ text-decoration:none;}
DIV.contenedorejes { background-color : #FFFBEC; 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 : black; }
DIV.ejeXcompleto{ clear : left; position : absolute; font-size : 0px; background-color : black; }
DIV.ejeY{ width : 3px; height : 2px; clear : left; position : absolute; font-size : 0px; background-color : black; }
DIV.ejeYcompleto{ clear : left; position : absolute; font-size : 0px; background-color : black; }
DIV.punto{ width : 2px; height : 2px; clear : left; position : absolute; font-size : 0px; background-color : blue; }
DIV.texto{ clear : left; position : absolute; font-size : 11px; color :red; }
DIV.mio{color : grey; width: 150; height : 50;clear : left; position : relative; left : 0px; top : 0px;font-size:10px}
</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 = Math.PI/20;
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);
}
textomy = "personal-de-jall.webcindario.com Powered JavaScript";
my = document.createTextNode(textomy);
divmy = document.createElement("div");
if(IE) divmy.setAttribute("className","mio");
else divmy.setAttribute("class","mio");
divmy.appendChild(my);
document.getElementById('contenedorejes').appendChild(divmy);
}
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+3) + "px";
divTexto.style.top = (y+2) + "px";
divTexto.appendChild(textoPunto);
document.getElementById('contenedorejes').appendChild(divTexto);
}
}
function dibujaSegmento(pt1,pt2){
text = "";
// 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,text);
}
}
// si pendiente negativa
else{
for( i =0; i >= a; i -= diferencial){
absc = pt1[0] + i;
ordn = pt1[1] + pendiente*i;
dibujaPunto(absc,ordn,text);
}
}
}
// 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,text);
}
}
else{
for( i =0; i >= b; i -= diferencial){
absc = pt1[0];
ordn = pt1[1]+i;
dibujaPunto(absc,ordn,text);
}
}
}
}
function dibujaCircunferencia(r,c1,c2){
init();
text = "";
for (i=0;i<=(2*Math.PI); i += diferencial){
x = r*Math.cos(i);
y = r*Math.sin(i);
if(x == r) text = "R="+x;
x += c1;
y += c2;
dibujaPunto(x,y,text);
dibujaPunto(c1,c2,"C");
var fLongitud = parseInt(2 * Math.PI * r*1000)/1000;
dibujaPunto(1,3.8,"Longitud = " +fLongitud.toString());
var fArea = parseInt( Math.PI * r * r *1000)/1000;
dibujaPunto(1,3.5,"Area = " +fArea.toString());
text="";
}
}
function dibujaSeccion(r,A){
var c1 = 0;
var c2 = 0;
init();
text = "";
var seg1X = (r+0.5)*Math.cos(0);
var seg1Y = (r+0.5)*Math.sin(0);
var ptO = new Array(0,0);
var ptExt1 = new Array(seg1X,seg1Y);
dibujaSegmento(ptO,ptExt1);
var seg2X = (r+0.5)*Math.cos(A);
var seg2Y = (r+0.5)*Math.sin(A);
var ptO = new Array(0,0);
var ptExt2 = new Array(seg2X,seg2Y);
dibujaSegmento(ptO,ptExt2);
for (i=0;i<=Math.abs(A); i += diferencial){
x = r*Math.cos(i);
y = r*Math.sin(i);
if(A<0) y *= -1;
if(x == r) text = "R="+x;
x += c1;
y += c2;
dibujaPunto(x,y,text);
dibujaPunto(c1,c2,"C");
var fLongitud = parseInt(Math.abs(A)* r*1000)/1000;
dibujaPunto(1,3.8,"Longitud = " +fLongitud.toString());
var fArea = parseInt( Math.abs(A/2)* r * r *1000)/1000;
dibujaPunto(1,3.5,"Area = " +fArea.toString());
text="";
}
}
function dibujaAnilloCircular(r1,r2){
init();
text = "";
for (i=0;i<=(2*Math.PI); i += diferencial){
for(j=0; j<r2-r1;j += 0.1){
x = (r1+j)*Math.cos(i);
y = (r1+j)*Math.sin(i);
text="";
if(x == r1 || x == r2) text = "R="+x;
dibujaPunto(x,y,text);
}
x = r2*Math.cos(i);
y = r2*Math.sin(i);
if(x == r2) text = "R="+x;
dibujaPunto(x,y,text);
var fLongitud = parseInt(2 * Math.PI * r1*1000)/1000 + parseInt(2 * Math.PI * r2*1000)/1000;
dibujaPunto(1,3.8,"Perímetro = " +fLongitud.toString());
var fArea = parseInt( Math.PI * r2 * r2*1000)/1000 - parseInt( Math.PI * r1 * r1*1000)/1000;
dibujaPunto(1,3.5,"Area = " +fArea.toString());
text="";
}
}
function init(){
ejes_cartesianos(200,200,50);
dibujaPunto(0,0,'O');
}
</script>
</head>
<body onload="init()" style="left:5px;top:0px;">
<table>
<tr>
<td>
<p>
Circunferencias
</p>
<p style="font-size:11px;">
<a href="javascript:dibujaCircunferencia(3,0,0)">C(0,0) R=3 </a>
<br>
<a href="javascript:dibujaCircunferencia(1.5,0,1)">C(0,1) R=1,5 </a>
<br>
<a href="javascript:dibujaCircunferencia(2,-1,-1)">C(-1,-1) R=2</a>
</p>
<p>
Sectores
</p>
<p style="font-size:11px;">
<a href="javascript:dibujaSeccion(1.5,1)">R=1,5 &phi;= 1</a>
<br>
<a href="javascript:dibujaSeccion(2,Math.PI/2)">R=2 &phi;= &Pi;/2</a>
<br>
<a href="javascript:dibujaSeccion(2.5,2*Math.PI/3)">R=2,5 &phi;= 2&Pi;/3</a>
<br>
<a href="javascript:dibujaSeccion(3,5*Math.PI/3)">R=3 &phi;= 5&Pi;/3</a>
<br>
<a href="javascript:dibujaSeccion(3,-2*Math.PI/3)">R=3 &phi;= -2&Pi;/3</a>
<br>
<a href="javascript:dibujaSeccion(3,-3*Math.PI/2)">R=3 &phi;= -3&Pi;/2</a>
</p>
<p>
Anillos
</p>
<p style="font-size:11px;">
<a href="javascript:dibujaAnilloCircular(1,2)">r=1 R=2 </a>
<br>
<a href="javascript:dibujaAnilloCircular(1.5,2.2)">r=1,5 R=2,2 </a>
<br>
<a href="javascript:dibujaAnilloCircular(1.8,2.5)">r=1,8 R=2,5 </a>
<br>
</p>
</td>
<td>
<div id="contenedorejes" class="contenedorejes">
</div>
</td>
</tr>
</table>
</body>
</html>

TOP
Añadir a Favoritos Internet Explorer Añadir a Favoritos Firefox-Mozilla Añadir a Favoritos Opera

Menú

Categorías


Lo Último

  Mis programas  Matemáticas  Geometría  Programación WEB  Flash MX  Variados
Dedicado a ANGELES y a RAMON.
Realizado por José Antonio López Lorenzo (JALL)
Vigo - Galicia - España -Europa