tutorial de programación para arte interactivo
Emiliano Causa
e_causa@yahoo.com.ar
www.emiliano-causa.com.ar
www.biopus.com.ar
Christian Silva
entorno3@gmail.com
www.hipertextos.com.ar
Leonardo Garay
todotresde@gmail.com
David Bedoian
bedoiandavid@yahoo.com
www.bedoiandavid.com.ar
tutorial de programación para arte interactivo

Estructuras de control condicionales

zip descargar

Estructuras de control

Los ejemplos de los anteriores apartados siguen una línea única de ejecución, es decir, no tienen posibilidad de bifurcar su línea de ejecución, ni de repetir ninguna porción de su código. Para poder dirigir, controlar, la forma en que se ejecuta el algoritmo, es decir, para controlar su flujo de ejecución, existen dos tipos principales de estructuras: las estructuras condicionales y las estructuras iterativas (repetitivas). Entendemos por estructura a un tipo de demarcación del código que nos permite organizarlo de alguna forma. En el ejemplo que sigue se ve una estructura condicional que bifurca el código en dos líneas de ejecución:

 

...
void draw(){

if(mouseX>200){ //comienzo estructura

background(255); //primera línea de ejecución

}else{ //separación entre las líneas

background(0); //segunda línea de ejecución

} //fin de la estructura

}

Hecho en Processing

ir arriba

Las estructuras condicionales

Las estructuras condicionales permiten bifurcar un algoritmo en función de una condición. Existen diferentes tipos de estructuras condicionales, una de las primeras que veremos es la estructura if-then que se traduce como si-entonces, lo que quiere decir es "si tal cosa entonces hacer tal otra":

 

if( condición ){

cuerpo de la estructura

}

La estructura if-then permite encerrar una porción de código entre sus dos llaves ( { } ) . Esa porción de código se ejecuta sólo si se cumple la condición que se encuentra entre los paréntesis:

To view this content, you need to install Java from java.com

(algunos navegadores requieren que ud. haga click en el applet para que entre en foco y se ejecute)

void setup(){

size(200,200);

}
void draw(){

background( 0 );
fill(255);
if( mouseX > 100 ){

rect( 50 , 50 , 100 , 100 );

}
fill(255,0,0,150);
rect(100,0,100,200);

}

En el ejemplo de arriba, la instrucción "rect(..." , sólo se ejecuta cuando se cumple la condición "mouseX>200", es decir, se dibuja un rectángulo en la pantalla sólo cuando el mouse está más a la derecha de los 100 píxeles. El segundo rectángulo marca la zona en que la posición horizontal del mouse supera el valor de 100. A continuación se puede ver un diagrama de flujo que muestra en qué orden se van ejecutando las instrucciones y bajo qué condiciones:

Como muestra el diagrama de arriba el orden en que se ejecutan las instrucciones es:

1ero, se pinta el fondo de negro
2do, se define el color de relleno en blanco, se pregunta
3ero, se evalua si el mouse supera la posición horizontal 100
4to, sólo si la condición se cumple se dibuja el cuadrado del centro de color blanco
5to, se define el color de relleno como rojo con un poco de transparencia
6to, se dibuja un rectángulo del color rojo que muestra el área activa

ir arriba

La Condición

En este punto es preciso ver qué es una condición. Se considera condición a cualquier variable, constante u operación que devuelva un valor lógico. Los valores lógicos sólo pueden adoptar dos estados: verdadero o falso. En inglés los los valores lógicos verdadero o falso, se escriben true o false respectivamente. Es decir, true o false son las dos únicas constantes lógicas que existen.

Una estructura if-then se ejecuta si la condición devuelve un valor true. En el ejemplo anterior la condición era una operación de comparación ( mouseX > 100 ), las comparaciones dan como resultado un valor de verdad, como muestra el siguiente ejemplo:

 

int a = 10;
println( a > 5 ); //esta operación devuelve el valor true
println( a > 15 ); //esta operación devuelve el valor false

ir arriba

Los comparativos

Los operadores comparativos son los siguientes:

 

println( 3 > 2 ); // esto significa 3 es mayor que 2
println( 2 < 3 ); // esto significa 2 es menor que 3
println( 2 == 2 ); // esto significa 2 es igual a 2
println( 3 >= 2 ); // esto significa 3 es mayor o igual que 2
println( 2 <= 3 ); // esto significa 2 es menor o igual que 3
println( 3 != 2 ); // esto significa 3 es distinto a 2

En el ejemplo anterior todas las líneas devuelven true. Hay que señalar que el signo de "igual a" se escribe con un doble signo (=), no hay que confundir el (==), que es una comparación, con el (=), que es una asignación.

En los casos del mayor o igual (>=), la operación devuelve true tanto en los casos en que el primer valor es mayor al segundo, así como cuando el valor es igual al segundo, es decir que 3>=2 devuelve true y 2==2 también devuelve true. El mismo caso se dá con el signo menor o igual.

ir arriba

La estructura if-then-else

La estructura if-then, permite ejecutar u omitir una porción de código en función de una condición. A veces es necesario bifurcar el código en vez de omitirlo. La estructura if-then-else, que se traduciría como si-entonces-sino, quiere decir "si tal cosa entonces hacer tal cosa sino hacer tal otra":

 

if( condición ){

se ejecuta si la condición es verdadera

}else{

se ejecuta si la condición es falsa

}

En el ejemplo que sigue, que es una variación del primer ejemplo, se puede ver como se bifurca el algoritmo a partir de la condición. Si la condición ( mouseX > 100 ) se cumple, entonces se dibuja el cuadrado, sino se dibuja el círculo:

To view this content, you need to install Java from java.com

void setup(){

size(200,200);

}
void draw(){

background( 0 );
fill(255);
if( mouseX > 100 ){

rect( 50 , 50 , 100 , 100 );

}else{

ellipse( 100 , 100 , 100 , 100 );

}
fill(255,0,0,150);
rect(100,0,100,200);

}

ir arriba

La estructura if-then-else if-else

La estructura if-then-else_if-else, permite evaluar varias condiciones para tomar diferentes caminos en función de cada una y por último tomar un camino si no se ha cumplido ninguna de estas:

 

if( condición 1 ){

se ejecuta si la condición 1 es verdadera

}else if( condición 2 ){

se ejecuta si la condición 1 es falsa y la 2 es verdadera

}else if( condición 3 ){

se ejecuta si la condición 1 y 2 son falsas y la 3 es verdadera

...

}else{

se ejecuta si todas las condiciones anteriores son falsas

}

En el ejemplo que sigue, que es una nueva variación del primer ejemplo, se puede ver como se bifurca dos veces el algoritmo a partir de dos condiciones:

To view this content, you need to install Java from java.com

void setup(){

size(200,200);

}
void draw(){

background( 0 );
fill(255);
if( mouseX > 100 ){

rect( 50 , 50 , 100 , 100 );

}else if( mouseX > 50 ){

ellipse( 100 , 100 , 100 , 100 );

}else{

triangle(50,150,100,50,150,150);

}
fill(255,0,0,70);
rect(100,0,100,200);
rect(50,0,150,200);

}

ir arriba

Las variables booleanas

Así como existen los valores de verdad true y false, valores lógicos o booleanos (en honor a George Boole ver el tema en Wikipedia), también existen variables de tipo lógico. Estas variables se declaran con la palabra boolean y sólo pueden adquirir valores booleanos: true o false. Debido a que las comparaciones devuelven valores booleanos, se puede asignar a una variable booleana el resultado de una comparación:

 

boolean a,b;
int c = 10;
int d = 20;
a = true;
b = c > d;
println( a ); //imprime true
println( b ); //imprime false

En los ejemplos anteriores se podría reemplazar, en la condición, la operación de comparación por una variable booleana:

 

...
boolean a;
a = mouseX > 100;
if( a ){
...

En este caso no es muy útil, pero existen casos en que se hace necesario cambiar la condición en forma dinámica.

ir arriba

Las operaciones booleanas

Así como cada tipo de dato permite realizar ciertas operaciones, los datos booleanos pueden ser operados por tres operadores llamados: and (que se escribe && ), or (que se escribe || ) y not (que se escribe ! ). Estos operadores sirven para combinar más de un valor de verdad y obtener uno solo como resultado:

 

println( true && true ); //imprime true
println( true && false); //imprime false
println( false && true ); //imprime false
println( false && false); //imprime false

println( true || true ); //imprime true
println( true || false); //imprime true
println( false || true ); //imprime true
println( false || false); //imprime false

println( ! true ); //imprime false
println( ! false ); //imprime true

Como muestra el ejemplo anterior, el operador and (&&) devuelve un valor true sólo cuando los dos operadores son true, caso contrario devuelve false. El operador or (||) devuelve un valor false sólo cuando ambos operadores son false, caso contrario devuelve true. Y el operador not (!) invierte el valor de verdad de true a false y viceversa.

Estos operadores sirven para evaluar varias comparaciones en una sola condición, como muestra el ejemplo siguiente, en donde las condición es cierta cuando se cumplen las dos comparaciones a la vez: cuando mouseX>100 y mouseY>100:

To view this content, you need to install Java from java.com

void setup(){

size(200,200);

}
void draw(){

background( 0 );
fill(255);
if( mouseX > 100 && mouseY > 100){ //solo se cumple //cuando las dos condiciones son ciertas

rect( 50 , 50 , 100 , 100 );

}
fill(255,0,0,150);
rect(100,100,100,100);

}

El ejemplo que sigue muestra como se usa el operador or para unir condiciones que no se superponen, dado que alcanza que se de una para ser verdadera:

To view this content, you need to install Java from java.com

void setup(){

size(200,200);

}
void draw(){

background( 0 );
fill(255);
if( mouseX > 160 || mouseX < 40){ //basta que una de las //dos condiciones sea cierta para cumplirse

rect( 50 , 50 , 100 , 100 );

}
fill(255,0,0,150);
rect(160,0,40,200);
rect(0,0,40,200);

}

El ejemplo que sigue muestra como el operador not invierte la condición, haciendo que se cumpla cuando mouseX NO es nayor a 100:

To view this content, you need to install Java from java.com

void setup(){

size(200,200);

}
void draw(){

background( 0 );
fill(255);
if( !(mouseX > 100) ){ //se cumple si NO es mayor a 100

rect( 50 , 50 , 100 , 100 );

}
fill(255,0,0,150);
rect(0,0,100,200);

}

ir arriba