A veces queremos colocar elementos siguiendo formas geométricas, ya sea para colocar enemigos, crear efectos especiales o como parte de la decoración.
En este primer artículo veremos cómo colocar elementos en una circunferencia. En la siguiente parte (¡pronto!) veremos cómo colocar objetos en polígonos y estrellas.
Repaso de trigonometría: la circunferencia
En esta gráfica podemos ver una circunferencia de radio 1 (llamada circunferencia unitaria por esta razón) centrada en $(x = 0, y = 0)$.
Dado cualquier punto de la circunferencia unitaria, podemos trazar una línea desde el centro de la circunferencia hasta él. La inclinación de esta línea respecto a la línea base nos da un ángulo que llamaremos $\alpha$.
Utilizando el valor de este ángulo, podemos utilizar dos funciones trigonométricas nos dan la posición exacta de un punto:
- Seno: dado un ángulo, devuelve la coordenada $y$ del punto con ese ángulo dentro de la circunferencia unitaria.
- Coseno: dado un ángulo, devuelve la coordenada $x$ del punto con ese ángulo dentro de la circunferencia unitaria.
Si tenemos una circunferencia cuyo radio no es 1, multiplicaremos las coordenadas obtenidas por el radio. Por ejemplo: en una circunferencia de radio 1, el punto con ángulo 30º es $(0.87, 0.5)$. En una circunferencia de radio 2, ese punto estará en $(1.74, 1)$.
Las coordenadas devueltas por las funciones seno y coseno asumen que nuestra circunferencia tiene centro en $(0, 0)$. Podemos sumar o restar valores en estas coordenadas para colocar la circunferencia donde queramos.
Medición de ángulos
Hay dos unidades populares para medir ángulos:
- Grados: Un ángulo completo son 360º.
- Radianes: Un ángulo completo es la longitud de una circunferencia unitaria, es decir, $2\pi \approx 6.2831$ rad.
Las medidas en grados son más fáciles de comunicar numéricamente a personas: es más fácil recordar que un cuarto de circunferencia son 90 grados, que recordar que son 1,5707… radianes. Por otro lado, muchas fórmulas matemáticas son más sencillas si los ángulos están expresados en radianes.
Distintos lenguajes de programación pueden utilizar diferentes unidades para los ángulos, e incluso dentro del mismo lenguaje puede haber funcionalidades que trabajen en una u otra unidad. Es importante saber con qué unidades trabaja una determinada función antes de utilizarla.
En cuanto a las funciones trigonométricas habituales (seno, coseno…), la mayoría de lenguajes utilizan radianes como unidad. Convertir ángulos de una unidad a otra es fácil:
$$grados\ a\ radianes(grados) = grados\cdot\frac{2\pi}{360}\\
radianes\ a\ grados(radianes) = radianes \cdot \frac{360}{2\pi}$$
Colocar objetos alrededor del círculo
El primer paso que tenemos que tomar es decidir cuántos objetos colocar (num_objetos). Si dividimos 360º o $2\pi$ rad obtendremos un ángulo que nos indicará la separación entre cada objeto, separacion.
Multiplicaremos separacion por cada número entero entre 0 y num_objetos (no incluido). En cada caso obtendremos el ángulo en el que debemos colocar un objeto. Utilizando las funciones seno y coseno podemos transformar este ángulo en coordenadas $x$ e $y$.
var tau = 2 * Math.PI;
function drawWidgetsAroundCircle(ctx, centerX, centerY,
radius, numWidgets)
{
var ang_interval = tau / numWidgets;
for (var i = 0; i < numWidgets; i++) {
var x = centerX + Math.cos(ang_interval) * radius;
var y = centerY + Math.sin(ang_interval) * radius;
drawWidget(ctx, x, y);
}
}