Blog Juan Bedoya

Objeto siguiendo una curva de Bezier Se quiere que un objeto sigue un camino el cual esta determinado por una curva de Bezier. Primero iniciamos dibujando un camino básico  e intentamos mover nuestro objeto atravesar de el. Para esto diseñamos un método el cual traslada nuestro objeto a través de los puntos de un camino. El camino estará compuesto de 3 , puntos, y usando la primitiva LINE_STRIP ,  podremos dibujar 2 lineas. El método tiene las siguientes variables:  currentPoint = Ultimo punto desde donde el objeto se empezo a mover nextPoint     = Siguiente punto a donde se quiere mover el objeto  difX             = Diferencia en X entre nextPoint y currentPoint  difY             = Diferencia en Y entre nextPoint y currentPoint  forward       = "true" si el objeto se esta moviendo hacia el final de la curva "false si se est...

 Primera Persona Se coloca la cámara debajo de la punta inferior del primer octaedro y se deja apuntando hacia el X positivo. Tercera Persona Se coloca la cámara apuntando hacia el  primer octaedro  y se aleja  la cámara de este 10 unidades tanto para X como para Y. Long Shot  Se coloca la cámara apuntando hacia el origen y se mueve 50 unidades hacia el Z positivo. Superior Se coloca la cámara sobre el movil (Y= 30 ) y se deja apuntando hacia Y negativo

Hopalong Orbit Visualizer -  Fractales en Three.js Atractor de Barry Martin Estructura del Proyecto

Proceso 1 - Lo primero que hizo fue crear el método "drawOcta" (draw Octahedron) el  cual al ser invocado, dentro del loop de dibujo, crea  un octaedro  en el canvas de WebGL. La creaciòn de este método nos permite pintar multiples veces la figura. 2 -  Se modifico el método  " drawOcta" de forma que fuera recursivo. Con el fin de lograr que cada octaedro después de pintarse a si mismo, pinte dos octaedros debajo suyo los cuales además  giren con respecto a el. Para se hizo lo siguiente:  Se agregó el parámetro "maxDepth" el cual disminuye en 1 en cada llamada, lo que permite definir  la profundidad de la recursion. Después de pintarse a si mismo se llama "drawOcta" dos veces Cada objeto  le pasa su transformación a los siguientes llamados recursivos de "drawOcta", de modo que los hijos del objeto se basan en esa transformación para hacer su propia transformación (Rotación+Translación)

Se quiere que la posición del octaedro creado anteriormente en Ejemplo WebGL  cambie de posicion cuando se de click en el canvas de HTML5 Para lograrlo se debe hacer lo siguiente 1 - Transformación de coordenadas Para cambiar la posición de un elemento en cada click, primero debemos  decidir como transformar las coordenadas del canvas HTML al sistema de coordenadas que maneja  WebGL. Sistema de coordenadas del Canvas de HTML X y Y empiezan en la esquina superior izquierda,  X aumenta hacia la derecha y Y aumenta hacia abajo Sistema de coordenadas canvas WebGL El sistema de coordenadas corresponde al de un plano cartesiano convencional La transformación que usaremos sera la siguiente: T(x)=  10 * ( (x / ancho del canvas HTML) - 0.5) T(y) = 10 * ( (y / alto del canvas HTML)  - 0.5) Esta transformación sirve para cualquier tamaño  de canvas, sin embargo para explicar con facilidad  como se l...

A continuación se encuentran los pasos realizados para poder dibujar un octaedro en WebGL similar al de la imagen 1 - Triangulo Basico 2D Inicialmente pintamos un triangulo en 2d para evidenciar el funcionamiento básico de WebGL. Como estamos trabajando en dos dimensiones, en el arreglo de vertices, los dos primeros valores, corresponden a X y Y y los siguientes 3 valores corresponden a el color del vertice usando (R, G, B). Debido a esto el offset para los vertices sera de 0 bytes, y el offset para los colores sera de 8 bytes (2 * Numero de Bytes en un Float de 32 bits). 2 - Triangulo 2D Girando Para cambiar la dirección de un objeto Vector, podemos multiplicar el vector por una o mas matrices de rotación En este caso, para obtener la animación del objeto girando, multiplicaremos los vértices del objeto por las siguientes matrices. mWorld: Representa la rotación del  objeto en el espacio tridimensional. mView: Representa el cambio de posición del observado...

El ejemplo a continuación fue tomado de Ejemplo Processing Después  de instalar Processing, se crea un nuevo SketchBook en este se coloca el código del ejemplo y se presiona ejecutar Aunque este es un ejemplo de Processing, puede ser visualizado en el navegador gracias a P5.js.Para esto es necesario importar la libreria de JavaScript P5.js y ajustar ajustar el código del ejemplo a Javascript y a los metodos especificos de P5.js El codigo ajustado a P5.js fue tomado de Ejemplo P5.js La principal diferencia de Processing con WebGl, es su alto nivel, como se puede ver en el ejemplo, para crear una elipse, simplemente llamamos el método ellipse() con los atributos necesarios y Processing realizara por nosotros todo el trabajo. Además para realizar una animación, basta con aumentar o disminuir las variables necesarias en el método draw(),  ya que Processing lo llama automáticamente para pintar cada "Frame" de la animación.