Las expresiones condicionales nos permiten indicar cuando queremos que la computadora haga una u otra acción dependiendo de cierta condición (expresión booleana)

[Variables y expresiones booleanas]

1 if( ) sencillo

Usamos la expresión if( ) para indicar que queremos que suceda cierto bloque de código únicamente cuando la expresión booleana sea verdadera (true).

Por ejemplo, dibuja una elipse en la posición del mouse, solo cuando el mouse esté presionado:

if( mousePressed ) {
    ellipse( mouseX, mouseY, 100, 100);
}

Otro ejemplo, regresa la posición a 0 cuando sea mayor al ancho de la pantalla:

if( posicionX > width ){
    posicionX = 0;
}

2 if( ) … else

Usamos if( ) ... else cuando queremos tener dos caminos posibles: un bloque de código se ejecuta cuando la expresión booleana es verdadera (true), y el otro cuando no (o sea, cuando es false)

Por ejemplo, dibuja el fondo azul cuando el mouse esté a la derecha del canvas, y dibújalo verde cuando no:

if( mouseX > width/2 ){
    background( 0, 0, 255 );
}   
else{
    background( 0, 255, 0 );
}

Nota que el else va después de la llave que cierra al if

3 if( ) … else if ( ) … else

Las expresiones booleanas solo tienen dos posibles resultados, pero en ocasiones necesitamos más de dos opciones.

En esos casos podemos “encadenar” expresiones if().

Por ejemplo, dibuja el fondo azul cuando el mouse esté a la derecha del canvas, verde cuando esté a la izquierda arriba, y rojo cuando esté a la izquierda abajo:

if( mouseX > width/2 ){
    background( 0, 0, 255 );  // azul
}
// si la expresión de arriba es falsa,
// entonces mouseX está del lado izquierdo
// y podemos checar solo a mouseY
else if( mouseY < height/2 ){
    background( 0, 255, 0 ); // verde
}
else{
    background( 255, 0, 0 ); // rojo
}

4 if() ‘anidados’

Es posible usar expresiones if() dentro de otras.

Por ejemplo, queremos mover la posición a la derecha al apretar la tecla ‘d’, y a la izquierda al apretar la tecla ‘a’:

if( keyPressed ){ // revisa si hay alguna tecla presionada
    // si sí, entonces revisa qué tecla es:
    if( key == 'd' ){
        // avanza a la derecha
        posicionX = posicionX + 1;
    }
    else if( key == 'a' ){
        // avanza a la izquierda
        posicionX = posicionX - 1;
    }
}
ellipse(posicionX, height/2, 100, 100);