⇪

Polígonos regulares

facebook-svg gplus-svg twitter-svg

Un polígono regular es un polígono en el que todos los lados tienen la misma longitud y todos los ángulos interiores tienen el mismo valor. Todos los polígonos regulares se pueden inscribir perfectamente en una circunferencia.
Para dibujar polígonos podemos utilizar tanto el elemento <polygon>, como el elemento <polyline>

Elemento ejemplo Descripción
<polygon> <polygon points = "220,10 300,210 220,250 140,210" style="fill: #6ab150; stroke: #003300; stroke-width: 3" /> Dibuja un polígono
<polyline> <polyline points = "220,10 300,210 220,250 140,210" style= "fill: #6ab150; stroke: #003300; stroke-width: 3" /> Dibuja una polilínea

Repaso de geometría

Para calcular las coordenadas x e y de un punto en la circunferencia de un círculo utilizamos las siguientes fórmulas:
var x = cx + r * Math.cos(a);
var y = cy + r * Math.sin(a);
Donde cx y cy son las coordenadas del centro del círculo;
r es el radio del círculo;
a es el ángulo en radianes entre el punto 0π y este punto.
Las coordenadas del punto 0π son x0 = cx + r; y0 = cy.
Utilizaremos más adelante estas formulas.

Dibujar un hexágono

Todos los polígonos regulares se pueden inscribir en una circunferencia. Por lo tanto tenemos que definir la posición del centro y el radio de este círculo.

var cx = 125;
var cy = 100;
var r = 70;

También definimos el número de lados del polígono. Un hexágono tiene 6 lados, pero cambiando el número de lados podemos conseguir otros polígonos regulares.

var lados = 6;

En el siguiente ejemplo utilizamos el elemento <polygon>, pero podemos utilizar también el elemento <polyline>

Un polígono SVG es en realidad un elemento que pertenece al DOM, y por lo tanto un <script> puede referirse al polígono, y lo puede manipular.

El elemento <poygon> tiene asignado un id="poligono", para poder identificarlo y guardarlo en una variable.

var poligono = document.getElementById("poligono");

          

Después utilizando el método setAttribute podemos modificar el valor del atributo points.

poligono.setAttribute("points", nuevoValor);

Escribimos la función points()

La función points() calcula el nuevoValor del atributo points. Vayamos por partes.

1. Todos los ángulos centrales de un polígono regular son iguales entre si y su medida a puede obtenerse a partir del número de lados del polígono.

var a = 360/lados;

2. Iniciamos la variable var points, que nos dará el nuevo valor del atributo points. El punto de partida ( donde empezamos a dibujar el polígono ) es el punto 0π.

var points = ( cx + r ) + "," + cy + " ";

donde cx, cy son las coordenadas del centro y r es el radio del círculo circunscrito.

3. Para calcular el resto de los puntos utilizamos un bucle for ( for loop ), donde cada paso del bucle calcula otro punto del polígono.


      for( var i = 1; i < = lados; i++ ){
            var aRad = ( Math.PI / 180 ) * ( a*i );
            Xp = cx + r * Math.cos( aRad );
            Yp = cy + r * Math.sin( aRad );
            points + = Xp + "," + Yp + " ";
      }

Miremos de cerca el bucle for:
- Primero calcula el valor en radianes del ángulo ( un múltiple de a ).
- Después calcula las coordenadas Xp e Yp del punto en la circunferencia del circulo circunscrito.
- Al final añade estas coordenadas al valor de la variable points.

4. Finalmente la función devuelve ( return ) el valor de var points

return points;

Poniendolo todo junto

No te olvides: siempre que sea posible, pon el JavaScript dentro del <body>, justo antes de su cierre: los estilos arriba, los scripts al fondo.


// define algunas variables necesarias
var cx = 125;
var cy = 100;
var r = 70;
var lados = 6;
// la función points
function points(cx, cy, r, lados){
var a = 360/lados;
// inicia la variable points
var points= (cx+r)+","+cy+" ";
// calcula el resto de los puntos
		for(var i=1;i <= lados;i++){
				var aRad=  (Math.PI / 180) * (a*i);
				Xp = cx+r * Math.cos(aRad);
				Yp = cy+r * Math.sin(aRad);
				points += Xp+","+Yp+" ";
		}
// devuelve la variable points			
return points	
}
// busca el elemento #poligono
var poligono = document.getElementById("poligono");	
// modifica el valor del atributo points utilizando la función points.
poligono.setAttribute("points", points(cx, cy, r, lados));

Galería de polígonos regulares

Solo con cambiar el valor del número de lados del trazado podemos conseguir cualquiera de estos polígonos regulares. Los polígonos regulares que aparecen a continuación fueron girados 90° en el sentido contrario del reloj: rotate(-90 60 60).