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 :)

tags:No tags

This entry was posted on Wednesday, December 1st, 2004 at 12.20 am and is filed under Programming, Processing, Tutorial. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.