Visualización interactiva para dibujar un triángulo usando fórmulas trigonométricas con la API Canvas
A primera vista, la trigonometría puede parecer un área de las matemáticas distante de la programación, pero su aplicación en el ámbito informático es realmente destacable. En esencia, la trigonometría es la rama de las matemáticas que estudia las relaciones entre los ángulos y los lados de los triángulos. En el universo de la programación, esta disciplina se convierte en un recurso básico para resolver problemas geométricos, gráficos, de movimiento, animación, física simulada y mucho más.
Normalmente cuando se explican estos conceptos en la escuela apenas hay tiempo para aplicarlos en casos más complejos, o bien faltan otros conocimientos para usar la trigonometría en casos más interesantes. Por eso me pareció divertido crear una visualización interactiva para mostrar la aplicación de un caso real utilizando Javascript para dibujar sobre el elemento Canvas de HTML.
Pero antes vamos a repasar un poco las bases de la trigonometría: el seno y el coseno. En JavaScript, estas funciones son accesibles a través de sus métodos nativos:
Seno (sin): Calcula la relación entre el lado opuesto y la hipotenusa de un triángulo rectángulo. En JavaScript, se utiliza mediante Math.sin()
.
Coseno (cos): Calcula la relación entre el lado adyacente y la hipotenusa de un triángulo rectángulo. En JavaScript, se emplea a través de Math.cos()
.
Estas funciones son la clave para resolver una amplia gama de problemas con triángulos rectangulos. Pero, ¿qué sucede con la diferencia entre radianes y grados? Los radianes son una medida angular que relaciona el radio de un arco con su longitud. Mientras que los grados son la unidad de medida angular más común.
En JavaScript, podemos convertir fácilmente de radianes a grados y viceversa. Para convertir de radianes a grados, la fórmula es simple:
Con estas fórmulas podremos entender la mayoría de operaciones que requeriremos para crear la visualización.
Vamos a empezar con un archivo llamado index.html. Escribiremos el elemento Canvas, sobre el que luego dibujaremos la visualización
Luego añadiremos unos tags <script></script>
y dentro escribiremos todo el código JavaScript.
Primero escribiremos las variables para manipular el elemento canvas y su contexto, así como algunos valores por defecto, como el ángulo inicial y los colores:
En esta sección, definimos funciones que permiten dibujar un círculo, una línea, texto paralelo y calcular el ángulo a partir de un clic en un canvas HTML usando el objeto MouseEvent.
Estos event listeners están pendientes de la interacción del usuario con el canvas: detectan clics del mouse, movimientos y liberación del botón del mouse.
La función draw() se encarga de dibujar en el canvas. Define la apariencia de un círculo, líneas, texto y otros elementos, utilizando operaciones trigonométricas como el coseno y el seno para posicionar y rotar elementos en el canvas.
Esta función realiza los siguientes pasos:
Finalmente, aquí tienes la visualización interactiva completa: