Podemos utilizar las variables para comportamientos complejos como los descritos a continuación.

1 Contadores

Los “contadores” son variables que utilizamos para contar: ¿qué es “contar”?

Sumarle uno a la cantidad que teníamos antes, y almacenar esa nueva cantidad.

Como en general contamos entidades enteras, conviene usar variables de tipo int.

Para usar una variable como contador, el primer paso es declararla y asignarle un valor inicial (normalmente 0) :

int contador = 0;

El otro paso es la expresión que “cuenta” cuando sucede lo que deseamos contar:

// suma 1 a la cantidad que tenías antes, y reemplázala
contador = contador + 1;

Esta expresión que “cuenta” también puede escribirse de estas dos formas que son un poco más compactas:

contador += 1; // súmale 1 al valor del contador

o

contador++; // incrementa en 1 el valor del contador

2 Acumuladores

Los acumuladores se comportan de manera similar a los contadores, pero en lugar de sumar un “1” entero, pueden sumar o restar otras cantidades.

Solemos usar este tipo de variables para representar posiciones, tamaños, colores, por lo que podemos utilizar puntos decimales (variables de tipo float).

Al igual que los contadores, los declaramos e inicializamos:

float posicion = 100;

Y después les podemos incrementar o decrementar de cualquiera de estas formas:

// opciones de incremento:
posicion = posicion + 0.5;
posicion += 0.5;

// opciones de decremento:
posicion = posicion - 0.5;
posicion -= 0.5;

3 Banderas (flags)

Las variables “bandera” nos sirven para indicar y almacenar que algún evento o condición se cumplió.

Aquí solemos usar variables de tipo boolean.

3.1 Activación

Por ejemplo, si queremos que inicialmente nuestro sketch esté estático, y al dar click empiece a moverse, podemos usar una bandera que inicialmente esté desactivada (en false) y que se active (en true) cuando demos click. La bandera se quedará así hasta que sea desactivada.

// inicializa la bandera desactivaa
boolean enMovimiento = false;

float posicion = 0;

void setup(){
   size(500, 500);
}

void draw(){
    // activa la bandera cuando el mouse se presione
    if( mousePressed ){
        enMovimiento = true;
    }

    // consulta el estado de la bandera,
    // e incrementa la posición si está activada
    if( enMovimiento ){
        posicion = posicion + 0.5;
    }

    // dibuja un rectángulo
    rect( posicion, height/2, 100, 100 );
}

3.2 Alternación (toggle)

Este ejemplo es similar al anterior, pero con cada click el estado de la bandera se invierte.

El ejemplo hace uso del operador ! (NOT) para “invertir” el valor de la variable.

[Variables y expresiones booleanas]

También usa la función del evento de mousePressed() para que la inversión solo suceda una vez por click.

// inicializa la bandera desactivaa
boolean enMovimiento = false;

float posicion = 0;

void setup(){
   size(500, 500);
}

void draw(){
    // consulta el estado de la bandera,
    // e incrementa la posición si está activada
    if( enMovimiento ){
        posicion = posicion + 0.5;
    }

    // dibuja un rectángulo
    rect( posicion, height/2, 100, 100 );
}

void mousePressed(){
    // "togglea" la bandera cuando el mouse se presione
    if( mousePressed ){
        // asigna a enMovimiento el valor opuesto al que tenía
        enMovimiento = !enMovimiento;
    }
}

4 Banderas numéricas

También podemos usar variables numéricas (normalmente de tipo int) para indicar y almacenar dos o más posibles opciones a las que como personas programadores asignaremos números.

Por ejemplo, podemos tener una variable llamada direccion, y definir que si su valor es 1 indica que hay que moverse hacia abajo, y si es 0 hacia arriba:

if( direccion == 1 ){ // abajo
    y += 0.5;
}
else if( direccion == 0){ // arriba
    y -= 0.5;
}

Otro ejemplo, podemos tener una variable llamada estado que va a definir el color de un círculo (por ejemplo un semáforo).

if ( estado == 1 ){
    fill( 0, 255, 0 ); // color verde
}
else if ( estado == 2 ){
    fill( 255, 255, 0 ); // color amarillo
}
else if ( estado == 3 ){
    fill( 255, 0, 0 );
}