En el post anterior vimos algunos elementos de la sintaxis de Processing:

• Esto es una función: point(50,50);
• Esto, una variable float y = height/2;

Una función puede contener una variable: point(50,y); (y es una variable). Una variable puede contener a otra: y = height/2 (tanto y como height son variables).

Ahora vamos a ver un par de funciones especiales que normalmente contienen a otras funciones: setup() y draw().

setup()

Esta función es llamada una sola vez cuando el programa inicia. Se usa para definir las propiedades iniciales del entorno. Un programa sólo puede contener una función setup().

void setup(){
    // funciones, variables, medios
}

Algunas funciones que suelen incluirse en setup():

• size(). Define las dimensiones de ancho y alto de la ventana donde se ejecutará el programa (en píxeles).
• background(). Color o imagen de fondo de la ventana
• fill(). Color de relleno de las formas dibujadas por el programa
• stroke(). Color del contorno de las formas
• strokeWeight(). Grosor de ese contorno

Ya las comentaremos. Ahora veamos algunas en acción. Por ejemplo:

void setup(){
    size(650, 200);
    background(#339966);
}

produce ->

De momento no es más que un fondo verde de 650 x 100 píxeles. Vamos a dibujar algo encima:

void setup(){
    //dimensiones
    size(650, 100);
    //color del fondo
    background(#339966);
    //color del trazo en hexadecimal
    stroke(#ffffff);
    //grosor del trazo en píxeles
    strokeWeight(5);
    //declaramos la variable que contiene las coordenadas y
    float y = height/2;
    //y dibujamos tres puntos
    point(width*0.25, y);
    point(width*0.5, y);
    point(width*0.75, y);
}

Como veis hemos escrito todas las funciones y la variable y dentro de la función setup().

Si queremos añadir un poco de movimiento necesitamos usar draw()

draw()

Ya sabemos que nuestro programa ejecutará una sola vez la función setup() con todo lo que contenga. Para crear una animación necesitamos que al menos una parte de ese código se ejecute muchas veces, y que se produzca alguna variación en los datos cada vez que se ejecute.

Para esto tenemos draw(), una función que se ejecuta constantemente (60 veces por segundo, por si quieres saberlo).

Si queremos que nuestros puntos se muevan sobre el fondo, necesitamos además que al menos una de las coordenadas varíe a lo largo deltiempo. Por ejemplo, si conseguimos que las coordenadas y tengan un valor cada vez mayor, veremos los puntos moverse hacia abajo.

void setup(){
    //dimensiones
    size(650, 100);
    //color del fondo
    background(#339966);
    //color del trazo en hexadecimal
    stroke(#ffffff);
    //grosor del trazo en píxeles
    strokeWeight(5);
}
 
//declaramos la variable y
float y = height/2;
 
void draw(){
    //actualizamos el fondo
    background(#339966);
    //dibujamos tres puntos
    point(width*0.25, y);
    point(width*0.5, y);
    point(width*0.75, y);
    //y ahora viene la magia: añadimos 1 a la variable <strong>y</strong>
    y=y+1;
    //por último vamos a reiniciar la animación cuando los puntos alcancen el borde inferior
    if (y > height){
        y=height/2;
    }
}

Vamos a fijarnos en tres detalles:

• Ya habíamos establecido el color de fondo (background(#339966);) en setup(). ¿Por qué debemos hacerlo otra vez en draw()?. Fácil: para borrar el estado anterior de cada punto. De lo contrario se vería su rastro en la ventana. Compruébalo en tu editor de Processing.
• Hemos declarado el valor de y fuera de las funciones setup() y draw(). La razón es que si lo hacemos dentro de setup(), no podríamos usarla en draw(). Las variables no pueden usarse fuera de la función en la que han sido declaradas. Por otra parte, si la declaramos en setup(), su valor se reiniciaría en cada ciclo, quedando sin valor la suma y = y + 1 que realizamos al final
• El condicional if() sirve para hacer que el código escrito entre llaves ‘{}’ se ejecute sólo si se da la condición expresada entre paréntesis. Lo veremos con detalle más adelante

Documentación

• http://www.funprogramming.org/3-Create-an-animation-use-random.html
• http://processing.org/tutorials/overview/
• http://processing.org/reference/setup_.html
• http://processing.org/reference/draw_.html
• http://processing.org/reference/size_.html
• http://processing.org/reference/size_.html
• http://processing.org/reference/fill_.html
• http://processing.org/reference/stroke_.html
• http://processing.org/reference/strokeWeight_.html
• http://processing.org/reference/if.html