Software over the rainbow

Esta es la primera parte del tutorial de 3d básico en processing. Es una introducción general y he intentado q sirva independientemente del resto de los pasos: no contiene nada de 3d.

Para probar el código basta con copiarlo y pegarlo en el editor*. Al principio de cada tutorial incluiré enlaces de las funciones utilizadas a la referencia en castellano de processing, amablemente traducida por Pedro Alpera.

*Nota: Al pegar en el editor de processing ejemplos de código copiados de una página web éste se cuelga (probablemente por los datos de formato), por lo que es mejor copiar el código fuente en los applets o simplemente escribirlo.

Funciones utilizadas

rect()
fill()
stroke()

1. Flujo de ejecución:

Dado que en processing carecemos de la típica línea de tiempo de flash o director, el orden de ejecución del código sólo va a estar determinado por el orden en que lo escribamos (estamos hablando de código simple, sin funciones ni objetos). Lo primero que hayamos escrito se ejecutará primero, y así sucesivamente.

Ejemplo 1:

// SECUENCIALIDAD DEL CÓDIGO EN PROCESSING 00
// El cuadrado de arriba a la izquierda es el primero
// en ser dibujado, y queda más al fondo.
rect(15, 15, 50, 50);
// el siguiente queda en la mitad
rect(25, 25, 50, 50);
// y el de más abajo es el último y queda al frente
rect(35, 35, 50, 50);

El resultado es el siguiente:

Aunque parezca trivial, no lo es. Si por ejemplo quisieramos crear un cuadrado y rellenarlo de un color, lo haríamos en ese orden, ¿no?

rect(15, 15, 50, 50);  // crea un cuadrado
fill(0); // lo rellena del color negro...?

Efectivamente, no. Como se comprobará si se prueba el ejemplo, el cuadrado permanece blanco (que es el color en el que se dibuja por defecto). En processing es necesario hacerlo al revés: primero se especifica una propiedad y luego el objeto al que ha de ser aplicada.

fill(0);   // ahora si, especificamos el color negro.
rect(15, 15, 50, 50);   // y se aplica a el cuadrado.

2. Persistencia de las propiedades

Una vez establecida una propiedad (como fill() o color() ), ésta se aplica a todos los objetos siguientes (hasta que se especifique lo contrario):

fill(0); //especificamos el color negro
rect(15,15, 34, 37); // creamos un cuadrado
rect(25,25, 10, 50); // y otro. los dos son negros.

¿Cómo se especifica lo contrario? Pues simplemente llamando de nuevo a la misma propiedad y cambiando el valor…

fill(0); //especificamos el color negro
rect(15,15, 34, 37); // creamos un cuadrado
rect(25,25, 10, 50); // y otro. los dos son negros.
fill(127); //ahora el relleno es gris
rect(10,10, 20, 20);  // y este cuadrado es gris

También se pueden anular algunas propiedades mediante comandos especiales (por ejemplo, noFill() para quitar el relleno o noStroke() para… bueno, creo que se entiende).

Un segundo ejemplo con todos los pasos combinados.
Ejemplo 2:

// SECUENCIALIDAD DEL CÓDIGO EN PROCESSING 01
// Dado que el código es secuencial,
// si queremos aplicar una propiedad a un
// objeto, tenemos que especificarla antes.
// Especificamos un color de relleno
fill(150);
// el primer cuadrado se rellena con ese color
rect(50, 25, 45, 45);
// especificamos un color de linea
stroke(240);
// Como no hemos cambiado el color de relleno,
// el siguiente cuadrado mantiene el gris del primero.
// El color de linea si ha cambiado.
rect(55, 30, 35, 35);
 // Ahora cambiamos el color de relleno
fill(200);
// El tercer cuadrado tiene un relleno distinto
// y mantiene el color de linea de el anterior.
rect(60, 35, 25, 25);
// y finalmente quitamos el relleno
noFill();
// y creamos un último rectangulo
rect(45, 45, 50, 50);

El resultado es este:

Y eso es todo por ahora.

Para saber más:

Acabando este tutorial me encontré uno muy parecido en los foros de processing, y es que quizás sea un poco inútil hacer más tutoriales sobre una herramienta con tantos recursos para aprender. En cualquier caso aquí está:
drawing statements and execution flow, part I

Hasta el siguiente.

Por supuesto, si tienen alguna duda, corrección, comentario o sugerencia, no duden en utilizar el formulario destinado a tal efecto. Justo debajo de esta línea :)

Intentando hacer en processing transformaciones de varios objetos 3d a la vez , me he encontrado con un problema: Debido a la falta de un sistema de referencias a los objetos y al peculiar resultado que producen las funciones 3d, el trabajo con varios objetos se hace poco intuitivo.

Afortunadamente también he encontrado una excelente solución en la librería BSpace de Amit Pitaru. Y como estoy aprendiendo, por el camino he hecho un pequeño tutorial en varias partes que espero que sirva a neófitos (no se me asusten con esto del 3d y las librerías que es todo bien básico) e incluso mediófitos.

Iré publicandolo en los próximos días. Si no se me ocurre nada más, estará divido en:

1. Flujo de ejecución en processing: Lo primero es lo primero.
2. Transformaciones en 3d: Problema ¿Donde está mi sistema de coordenadas?
3. Solución tentativa: push() y pop().
4. Solución definitiva: BSpace de Amit Pitaru.

Conforme vaya publicando iré editando este post con los enlaces.

Últimamente cada vez que tengo un rato libre (e incluso algunos que no son libres) siempre acabo abriendo processing. Estoy haciendo variaciones sobre el sketch del reloj de color.

En esta ocasión pretendía, siguiendo con el esquema original (hora= Tono, minutos y segundos= Saturación) representar una hora entera cada vez. La inspiración viene (salvando las evidentes distancias) del Cinema Redux de Brendan Dawes . En un principio pensé en guardar automáticamente una captura de pantalla de cada segundo y luego colocarlas en una nueva imagen en un segundo sketch, pero eso me limitaría a generar imágenes estáticas. Prefiero continuar haciéndolo interactivo.

Finalmente he hecho algo más simple. En un cuadrado de 60 x 60, el eje horizontal representa los segundos, y el vertical los minutos. La hora sigue representada por el tono, pero ahora sólo vemos el de los segundos… El resultado es que a los 59 minutos se observa un degradado desde blanco en la esquina superior derecha al tono que marque la hora abajo a la derecha… es un poco difícil de explicar. Mejor vean el applet*.

Dudo que tenga la más mínima utilidad como reloj, y el resultado visual es bastante pobre, pero estamos en proceso.

* Es necesario instalar el plugin de java. Puedes descargarlo para linux, macintosh o windows.

No me desagradan las 2:20 de la madrugada.

La 1:19 del mediodía tampoco está mal.

Pero creo que me quedo con las 23:58.

Hace un par de días he vuelto a jugar con proce55ing. Como últimamente estoy pensando en la interactividad y el tiempo pensé en hacer algo en este sentido.

Se me ocurrió un reloj de color*. Cada hora del día se representa como un tono en la escala HSB. Los minutos son el mismo color pero variando la saturación (desde 0% a los 00 minutos hasta 100% a los 59). Los segundos se reflejan igualmente pero tomando como valor máximo en cada momento la saturación de los minutos. Dependiendo de la hora a la que entremos veremos una determinada conjugación de colores.

No es que sea nada del otro mundo, pero me sirvió para retomar un poco el lenguaje (que espero seguir practicando porque me encanta). También me gustó hacer un experimento de código pensando primero y ejecutando después, y no al revés.

http://www.jesusgollonet.com/proce55ing/reloj_color

*Para ver el reloj es necesario instalar el plugin de java. Puedes descargarlo para linux, macintosh o windows