Computación Visual Interactiva

En este post se explicará cómo se desarrolló el siguiente móvil de figuras sencillas . Se asumirá que ya el usuario ya está familiarizados en cómo crear figuras sencillas como cubos y pirámides. El post se concentrará en las operaciones matriciales empleadas para lograr que el móvil se mueva de forma adecuada, y que cada objeto esté ubicado donde debe. Figuras a utilizar: Prisma Rectangular : Utilizaremos esta figura 6 veces. Será empleada dos veces para armar la base del móvil (lo que queda suspendido en el techo), y también se utilizara cuatro veces para representar cada cuerda que sujeta las otras figuras del móvil. Cubo : Se utilizaran dos cubos. Estos van a ser artefactos que van a estar suspendidos por las cuerdas. Pirámide : Se utilizaran dos pirámides. Estas también serán usadas como artefactos que estarán suspendidos por las cuerdas. Transformaciones hechas para cuadrar la base: Anteriormente se estableció que la base está compuesta por dos prismas rectangulare

Partimos del ejemplo del cubo básico en 3D para llegar al ejemplo que se explicará hoy: mover el cubo cuando el usuario interactúe con el canvas a través de un click. Se explicaran los segmentos de código que se adicionaron, eliminaron, y modificaron del ejemplo básico del cubo en 3D para llegar a la interacción por medio del ratón. Aquí se encuentra el demo de lo que se va a explicar. Inicialmente definimos 4 variables nuevas que van a estar relacionadas con el movimiento del cubo. curX y curY determinan la posición actual del centro del cubo. finalX y finalY determinan la posición final a la que debe llegar el cubo. movementDelta determina la cantidad que se va a desplazar el cubo en cada iteración de su posición actual de X y Y, a la posición final esperada en X y en Y. Luego, en la función main, tras verificar que el browser soporta WebGL, pasamos a definir el viewport: Después, antes de definir la función render, agregamos un listener al canvas que nos ind

Se modificará el ejemplo del cubo para dibujar una pirámide. El código del ejemplo que se explicará está aquí . Inicialmente, explicaremos los cambios que ocurren en la función initBuffers. Dado que vamos a combinar tanto los colores como los vertices en un solo buffer, hacemos los cambios correspondientes en la función. Creamos un único buffer de datos donde vamos a almacenar tanto las posiciones como los colores de forma intercalada. Luego, para poder dibujar una pirámide debemos determinar cuales son los vertices de esta figura. Para esto, dividimos la figura en 5 caras, y definimos los vertices de cada cara así: Se nota de la definición de los vertices que todas las caras, excepto la de abajo, están conformadas por 3 vertices. Esto se debe a que vamos a dibujar una pirámide y por ende la mayoría sus lados son triángulos. También se nota que estas caras tienen un vértice en común, (0, 1, 0), que es la punta superior de la pirámide (donde los triángulos se un