Ejemplo Processing P5.js
Se utilizó la versión web de processing para mostrar un ejemplo. Este ejemplo se encuentra desplegado en https://codepen.io/adelavegaf/pen/jZOeOB.
Como se evidencia del codepen, son una serie de objetos en 3D rotando.
Para poder utilizar la versión web de processing, solo hay que incluir una serie de tags al html con las librerias.
Al incluir estos tags en el html principal, podemos comenzar a utilizar las funcionalidades que nos provee P5.js desde nuestros archivos de JavaScript.
Para hacer uso de las funciones, creamos un nuevo archivo de JS donde llamaremos las distintas funciones. Este archivo lo llamaremos Sketch.js. Se debe agregar un tag ubicando a este archivo en el html antes de que podamos usarlo. El tag debe estar ubicado después de los tags de las librerías de P5.js.
En el archivo Sketch.js vamos a utilizar las dos funciones más importantes de P5.js: Setup y Draw. Setup se llama solo una vez, su rol es crear todo los objetos necesarios para que funcione P5. En este caso solo creamos un canvas, y decimos que verifique que tenga soporte para WebGL.
Por otro lado, draw se llama cada vez que se vaya a dibujar algo en la pantalla. Vamos a utilizar esta función para dibujar los dos objetos que vamos a mostrar: un cubo y un toro. Lo primero que haremos es decir que el color de fondo del canvas va a ser blanco.
Teniendo en cuenta que vamos a dibujar dos objetos, y que inicialmente todo se dibuja en el centro del canvas, vamos a desplazarnos 100 pixeles hacia arriba desde el centro mediante la función translate.
Luego, hacemos uso de push y pop, dos funciones que nos permiten guardar el contexto actual del dibujo (colores y ubicación), antes de cambiarlos, para luego poder volver a ellos.
Después de haber guardado el contexto, decimos que queremos que rote el objeto a dibujar en los 3 ejes, X, Y, Z.
Finalmente, creamos un cubo mediante la función box().
Hacemos lo mismo para dibujar el toro, solo que hacemos un desplazamiento de 200 en Y, teniendo en cuenta que nos encontramos a -100 del centro del Canvas y en vez de llamar la función box, llamamos la función torus.
Este código sencillo resulta en esta imagen:
Se observa del código escrito que el proceso de dibujo en processing mediante la libreria P5.js es mucho más sencillo que usando solo WebGL. Esto se debe a que P5 nos ofrece funciones que se encargan de simplificar mucho el proceso de dibujo. En especial, existen built-ins para muchos objetos, rotaciones, animaciones, etc.
Como se evidencia del codepen, son una serie de objetos en 3D rotando.
Para poder utilizar la versión web de processing, solo hay que incluir una serie de tags al html con las librerias.
Al incluir estos tags en el html principal, podemos comenzar a utilizar las funcionalidades que nos provee P5.js desde nuestros archivos de JavaScript.
Para hacer uso de las funciones, creamos un nuevo archivo de JS donde llamaremos las distintas funciones. Este archivo lo llamaremos Sketch.js. Se debe agregar un tag ubicando a este archivo en el html antes de que podamos usarlo. El tag debe estar ubicado después de los tags de las librerías de P5.js.
En el archivo Sketch.js vamos a utilizar las dos funciones más importantes de P5.js: Setup y Draw. Setup se llama solo una vez, su rol es crear todo los objetos necesarios para que funcione P5. En este caso solo creamos un canvas, y decimos que verifique que tenga soporte para WebGL.
Por otro lado, draw se llama cada vez que se vaya a dibujar algo en la pantalla. Vamos a utilizar esta función para dibujar los dos objetos que vamos a mostrar: un cubo y un toro. Lo primero que haremos es decir que el color de fondo del canvas va a ser blanco.
Teniendo en cuenta que vamos a dibujar dos objetos, y que inicialmente todo se dibuja en el centro del canvas, vamos a desplazarnos 100 pixeles hacia arriba desde el centro mediante la función translate.
Luego, hacemos uso de push y pop, dos funciones que nos permiten guardar el contexto actual del dibujo (colores y ubicación), antes de cambiarlos, para luego poder volver a ellos.
Después de haber guardado el contexto, decimos que queremos que rote el objeto a dibujar en los 3 ejes, X, Y, Z.
Finalmente, creamos un cubo mediante la función box().
Hacemos lo mismo para dibujar el toro, solo que hacemos un desplazamiento de 200 en Y, teniendo en cuenta que nos encontramos a -100 del centro del Canvas y en vez de llamar la función box, llamamos la función torus.
Este código sencillo resulta en esta imagen:
Se observa del código escrito que el proceso de dibujo en processing mediante la libreria P5.js es mucho más sencillo que usando solo WebGL. Esto se debe a que P5 nos ofrece funciones que se encargan de simplificar mucho el proceso de dibujo. En especial, existen built-ins para muchos objetos, rotaciones, animaciones, etc.
Comentarios
Publicar un comentario