Blog de juleegh

Interacción con el ratón: Conversiones de sistemas de coordenadas

Esta semana el objetivo era modificar la posición del objeto anteriormente creado a partir de una posición dada por el usuario. La posición se obtuvo al añadir un nuevo EventListener al canvas, con el evento "mouseDown":


Este evento se llama al hacer click. De este click se puede obtener sus coordenadas (event.clientX y event.clientY), de estas obtenemos los valores de X y Y para los puntos que constituyen la estrella. La estrella estará centrada en el lugar donde se hizo click, por ello los primeros dos puntos son X y Y, y a partir de estos se generan desplazamientos proporcionales de los vértices para producir la estrella (nótese que las proporciones de la estrella fueron modificadas para que fuera más pequeña y se viera mejor al desplazarla por el canvas).

Sin embargo, cabe señalar que las coordenadas que se obtienen del click (coordenadas en el viewport) pertenecen a un sistema de referencia que es distinto al del espacio de los objetos, y es esta la razón por la cual aplicamos una conversión al sistema. La conversión del ejemplo es la siguiente:



El nuevo X se obtiene al dividir la posición obtenida sobre el ancho del canvas, esto nos retorna un valor entre 0 y 1 ya que la posición obtenida puede ser un valor entre 0 y el ancho del canvas. Este valor se multiplica por 2 y se le resta uno, para obtener un valor entre -1 y 1, y coincidir con que el centro del sistema es en el centro del canvas. El nuevo Y se obtiene al dividir la diferencia entre el alto del canvas y la posición obtenida, sobre el alto del canvas, ya que en el sistema de referencia original Y aumenta de abajo hacia arriba. Esto nuevamente nos retorna un valor entre 0 y 1, e igualmente se multiplica por 2 y se le resta uno.

OJO: Como se puede observar en la primera imagen, esta no fue la transformación que se le aplicó al sistema. El problema de este sistema original es que retorna valores sólo entre -1 y 1, pero las posiciones dentro del canvas podían ser mayores, entonces al hacer click en uno de los bordes la estrella no llegaba hasta allá, en cambio se quedaba en los límites del cuadro de 4 unidades cuadradas de área. Por ello, se escogieron valores que mantuvieran la proporción (-x, x) para el intervalo pero que tuvieran resultados mayores (en el caso de X se obtienen valores entre -2.5 y 2.5, en el caso de Y se obtienen valores entre -1.5 y 1.5). De esta forma, la estrella puede ser colocada en todas las posiciones del canvas definido. Para un canvas con distintas dimensiones sería necesario otra transformación sistema de referencia, de tal forma que las translaciones sean proporcionales al ancho y alto.

Estos nuevos puntos para la estrella se agregan al buffer para luego renderizar la figura: 


El resultado es el siguiente: (nuevos colores para la estrella como para variar :D ) 

https://codepen.io/juleegh/pen/GQEqdr?editors=0010 (Se recomienda ver en modo Debug, ya que el canvas está un poco grande)



SCRUM

Tiempo estimado: 3 horas

Tiempo empleado: 3.5 horas

Repartición de horas: (3.5) lunes 12, realizando el ejercicio y escribiendo el blog.

Observaciones: Se esperaba lograr cosas como cambiar el color de la estrella también según la posición. Sin embargo, manipular los arreglos de los valores hizo que los buffers fallaran ocasionalmente, después de un par de clicks. Por lo tanto, se afirma que es necesario un mejor entendimiento de los buffers (y del pipeline en general), para poder configurarlos de tal forma que funcionen con arreglos de información de tamaño variable, no sólo de tamaño fijo. La solución actualmente implementada fue la que se logró después de mucho esfuerzo de intentar cooperar con los buffers, por ello las horas estimadas fallaron por media unidad. 

Comentarios

No hay ningún comentario

Añadir un Comentario: