MAD07 - InfoVis & GenerArt

Remix: 3D, Aleatoriedad e Interacción

En esta sesión daremos una mirada a las demás posibilidades de Processing. Usaremos los distintos ejemplos y añadiremos pequeñas modificaciones que nos permitirán descubrir otras funciones de Processing.

3D

Todos los ejercicios hechos hasta ahora han sido en 2 dimensions (X y Y). Processing también nos permite dibujar objetos en 3 dimensiones. Algunas de las funciones que ya conocéis como line() pueden aceptar 6 parametros en lugar de 4 indicando las posiciones XYZ de cada uno de los puntos. Sin embargo en la mayoría de situaciones se hará uso de translate(), rotate() y scale() así como de algunas nuevas funciones de cambio de estado como rotateX(), rotateY(), rotateZ().

A parte de las primitivas ya conocidas, Processing tiene unas funciones para dibujar esferas y cubos. La forma de dibujar esferas y cubos, es posicionandonos en el lugar donde pretendemos dibujar (mediante el comando translate()) y después llamar a una de las primitivas:

• box(float width, float height, float depth)
• sphere(float radius)

Para dibujar formas más complejas se hace uso de los comando beginShape() y endShape(), definiendo entre las dos las posiciones de los puntos de nuestro dibujo.

En un ejemplo del uso de 3D podemos retomar el ejercicio de la imagen y sus puntos grandes y la modificaremos para que en lugar de dibujar cuadrados dibujemos cubos, la profundidad de los cuales sean su brillo. El resultado final nos tendría que dar algo similar al siguiente.

Nota: Una cosa a tener en cuenta es que en muchos casos el efecto 3D no será visible a menos que se le añada movimiento a la escena. El movimiento que le añadiremos será de rotación al rededor del centro. Para esto debemos:

• Movernos al centro de la pantalla
• Rotar respecto al eje X (rotateX())
• Rotar respecto al eje Y (rotateY())
• Movernos de vuelta al punto, haciendo el paso inverso al primero

Para los ángulos de las rotaciones utilizaremos una variable proporcionada por Processing llamada frameCount que aumentar su valor a cada frame. Esto nos evita tener que definir una nueva variable a la que le vamos aumentando. Sin embargo como esta variable aumenta de uno, este aumento es demasiado grande para un angulo, así que la usaremos dividida entre 30 o 40 para que la rotación sea más lenta (frameCount/30.0).
imagen y sus puntos al cubo

Aleatoriedad

Hasta ahora hemos hecho ejercicios haciendo uso de la precisión y repetición de la computación. Esto aparte de ser una gran ayuda en muchos casos, puede ser también una limitación. Para poder liberarnos esta limitación haremos uso de las funciones de aleatoriedad. En Processing dispones de dos principales funciones de aleatoriedad: random y noise.

Nosotros nos centraremos en el uso de random() ya que es la más intuitiva y fácil de usar. La función random(float min, float max) nos devuelve un valor aleatorio entre los dos argumentos que le pasamos. En la mayoría de los casos el uso de la función random será evidente. Por ejemplo si en un ejercicio queremos dibujar curvas de 100 puntos con todos sus puntos dentro de la pantalla:

Nota: Para dibujar una curva hacemos uso de la construcción siguiente:

noFill();

beginShape();

curveVertex(x1, y1);

curveVertex(x2, y2);

…

curveVertex(x100, y100);

endShape();

curva aleatoria

Sin embargo para usos más específicos deberemos prestar una atención especial a los mínimos y máximos, así como a que se le aplica la aleatoriedad. Por ejemplo, para un ejercicio más interesante dibujaremos 20 curvas que nacen del centro abajo de la pantalla y van subiendo hacia arriba a pasos distintos (aleatorios). A cada paso hacia arriba la curva podrá desviarse más hacia los lados (también de forma aleatoria). Como esta explicación no es muy clara, mejor vemos el ejemplo:

Nota: No es necesario el uso de arrays, porque no nos hace falta guardar los puntos de las curvas en memoria. Para dibujar las 20 curvas simplemente usaremos otro bucle que englobará al bucle de dibujar la curva. Para conseguir un efecto más orgánico usamos un color de curva con una cierta transparencia, así como el uso del comando smooth(), que permite de dibujar todas las lineas aplicando técnicas de “anti-aliasing” para evitar el efecto de pixelizado.

curvas que se dispersan

Interacción

Finalmente hoy repasaremos el uso de las clases y de la interacción para un uso muy común: los botones. Empezaremos haciendo un círculo redondo de forma que cuando el ratón esté encima se encienda.

Nota: para saber si el ratón está sobre un círculo, no basta con hacer:

if(mouseX == centroX && mouseY == centroY)

porque esta condición solo sera verdadera cuando el ratón esté exactamente en el centro. Lo que hacemos para saber si el ratón esta dentro del círculo es lo siguiente:

if(dist(mouseX, mouseY, centroX, centroY) < radio)

Veamos el ejemplo:

botón sencillo

ahora convirtamos el botón en una clase:

botón con clase

ahora demos al botón un poco de clase haciendo los cambios de color animados.

Nota: Para este ejercicio haremos uso de una función que nos proporciona Processing llamada

color lerpColor(color colorAhora, color colorObjetivo, float coeficiente)

esta función nos devuelve un color entre el colorAhora y colorObjetivo. El coeficiente determina cuanto se cercará el color devuelto al colorObjetivo.

botón con más clase

y finalmente para los más atrevidos hagamos uso del hecho que estamos usando un ordenador, y revisemos los bucles y los arrays de clases:

botones