Mi proyecto del curso: Gráficos vectoriales SVG: ilustrar y animar con código

Mi proyecto se encuentra alojado en https://codepen.io/derpmagician/pen/oNMWZMz

Al momento de comenzar este proyecto quería hacer algo con la librería GSap ya que me gustó lo mucho que te facilitaba la vida al momento de hacer animaciones, así que tuve que leer su documentación.

Me decidí en hacer algo sencillo como un cuadrado al que se le podía controlar por teclado y tuviera un movimiento tipo video juego.

Entre los desafíos que encontré era el poder limitar el movimiento dentro de una zona específica ya que no quería que el cuadrado dejara de mostrarse en pantalla así que tuve que profundizar mas acerca de las propiedades del viewport. La propiedad getBoundingClientRect me facilitó bastante el trabajo con el cual se puede medir cada lado de los elementos HTML con respecto a la pantalla.

Otro de los desafíos que tuve es que al principio quería rotar el cuadrado cuando se cambiara de dirección pero no me gustaba como quedaba el giro controlado por GSap para girar de un ángulo determinado a otro. Al final decidí por darle otro tipo de animación cada vez que se moviera.

Al final me dediqué a elegir el esquema de colores usaría por lo que me decidí en algo monocromático ya que no soy bueno eligiendo colores.