+525564535330

Polígonos giratorios

Es curioso como algo tan simple puede ser a su vez tan satisfactorio. Este proyecto fue parte del curso de Domestika "Intro to creative coding". Se basa en un grupo de cuadrados que comparten su centro y que se rotan un ángulo x de forma acumulativa, es decir, el primer cuadro se rota x grados respecto a la referencia, el segundo cuadro se rota 2 veces el ángulo x respecto a la referencia o  1 vez x respecto al primer cuadrado, el tercero se rotará 3 veces el ángulo x respecto a la referencia o 1 vez x respecto al segundo cuadrado o 2 veces x respecto al primer cuadrado y así sucesivamente. De igual manera cada cuadrado será un poco más pequeño que el anterior, entonces se puede decir que la animación se resumen en cuadrados girando, donde los cuadrados más pequeños giran más rápido que los cuadrados grandes. El ángulo x crece en un grado en cada iteración hasta llegar a los 90 grados, cuando se llega a este punto se considera que se volvió al punto de partida y se reinicia el ángulo x a cero grados. 

El patrón que produce esta animación se asemeja al de los espirográfos. Un espirográfo según la wikipedia es un "juguete para generar diseños geométricos. Permite dibujar curvas matemáticas conocidas como hipotrocoides y epitrocoides. El término también ha sido usado para describir varias aplicaciones de informática que muestran curvas similares.". Al cambiar el ángulo de separación de los cuadros al avanzar la animación se producen patrones geométricos que son satisfactorios de observar, pensamos que lo que causa mayor placer es observar como pasa de forma cíclica de un sistema con mucho desorden a uno completamente ordenado.

¿Qué puedo hace con este diseño?

  • De forma automática la animación inicia con solo dos cuadrados. Puedes aumentar el número de cuadrados con el slider que se proporciona debajo de la animación. Aumentar el número de cuadros también provocará que la velocidad angular de los cuadrados cambie.
  • Puedes disminuir la cantidad de cuadros por segundo de la animación, esto creará la sensación de disminución de velocidad de giro y permitirá apreciar mejor los patrones que se forman.
  • Para cambiar la relación de tamaño de los cuadros se ajusta el slider de % de cuadro menor, esto permite fijar hasta que % se podrán reducir los cuadros. Por defecto el cuadrado más pequeño corresponde a un 70% del tamaño del cuadrado de referencia, pero este valor se puede ajustar hasta un 10%.
  • Dar un click en el lienzo ocasionará que la animación se detenga temporalmente.
  • Un segundo click permitirá que la animación continúe.
  • Teclear la tecla s o tocar el lienzo con al menos dos dedos desde el celular exportará una captura de pantalla.

¡Disfruta nuestro recurso!

Ver Código Fuente
Ver Código Fuente
Regresar a Sandink-lab

Prueba nuestros diseños

Scroll to Top