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 (parte II)

zip descargar

Incrementos cíclicos

Hasta aquí hemos visto las estructuras condicionales, ahora veremos una aplicación de estas estructuras a un problema de incremento con restricciones. Supongamos que tenemos un ejemplo como el que sigue en donde incrementamos una variable para desplazar un objeto en la pantalla: (si el objeto ya salio de pantalla haga click sobre el ejemplo para que vuelva a empezar)

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

int x;
void setup(){

size(200,200);
smooth();
x = 10;

}
void draw(){

background(0,0,50);
ellipse(x,100,20,20);
x++;
println(x);

}
void mousePressed(){

x = 10;

}

Hecho en Processing

En el ejemplo anterior hemos empleado una estructura void mousePressed(), esta estructura es como setup() o draw(), con la única diferencia de que esta estructura se ejecuta cuando hacemos click con el mouse. Este ejemplo establece el valor inicial de la variable x en 10, luego en cada fotograma que se ejecuta la estructura draw() la variable x se incrementa en 1. Esto sucede hasta que se termine el programa o el usuario haga click. Es fácil ver que con un algoritmo como este, el valor de x se incrementará hasta el infinito (o por lo menos hasta valores muy grandes en función de la presición del lenguaje de prorgramación), pero en principio esto es un problema dado que si bien queremos que el objeto se desplace no queremos que se vaya de pantalla.

La forma de resolver este problema es usando un if-then que nos permita "condicionar" el incremento:

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

int x;
void setup(){

size(200,200);
smooth();
x = 10;

}
void draw(){

background(0,0,50);
ellipse(x,100,20,20);
x++;
if( x > width ){ //agregamos esta línea para condicionar el //incremento

x = 0;

}

}

Hecho en Processing

Como se puede ver en este ejemplo, el "if( x > width )" evalúa si la variable x tiene una valor mayor al ancho de la pantalla (determinado por la variable del sistema llamada width), y si esto es cierto entonces le asigna a x un cero, el equivalente a enviar al objeto al extremo izquierdo de la pantalla. Cabe aclarar que en este ejemplo hubiera sido lo mismo poner "if( x > 200 )" dado que ese es el ancho de la pantalla, pero al usar la variable width nos aseguramos de que si cambiamos el ancho en algún momento con la instrucción size() entonces no estaremos obligados a buscar los valores del ancho por todo el programa dado que width se acomoda automáticamente.

El ejemplo que sigue es análogo al anterior sólo que el objeto va de derecha a izquierda y por ende cambia la "condición de borde", teniendo que evaluar si x es menor a cero, y en caso de ser cierto le asigna el valor width, el equivalente a trasladar al objeto al borde derecho:

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

int x;
void setup(){

size(200,200);
smooth();
x = 100;

}
void draw(){

background(0,0,50);
ellipse(x,100,20,20);
x--;
if( x < 0){

x = width;

}

}

Hecho en Processing

ir arriba

Incremento ida y vuelta

Supongamos ahora que desamos hacer que el objeto vaya ida y vuelta de un extremo al otro. Entonces no encontramos con el problema de que la condición de borde depende de en qué dirección estamos llendo, pero no sólo eso, sino que el incremento también depende de la dirección en la que se está moviendo. En el ejemplo que sigue, pusimos una variable que se encarga de señalar la dirección hacia la que nos dirigimos. El círculo comienza en el centro y se aleja hacia la izquierda o derecha en función de la variable llamada haciaLaDerecha que es booleana e indica la dirección que sigue el objeto. (si el objeto sale de pantalla haga click con el mouse y el objeto volverá al centro de la pantalla y cambiará de dirección)

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

int x;
boolean haciaLaDerecha;
void setup(){

size(200,200);
smooth();
x = width/2; //inicia del centro
haciaLaDerecha = true; //establece como dirección la derecha

}
void draw(){

background(0,0,50);
ellipse(x,100,20,20);
if( haciaLaDerecha ){

x++; //incrementa si haciaLaDerecha es true

}
else{

x--; //decrementa si haciaLaDerecha es false

}

}
void mousePressed(){

x=width/2; //si se presiona el mouse vuelve al punto //central y
haciaLaDerecha = !haciaLaDerecha; //cambia de dirección

}


Hecho en Processing

En el ejemplo podemos ver como en función de la variable booleana llamada haciaLaDerecha, se produce un incremento (x++) o un decremento (x--). Al presionar el mouse, el objeto vuelve al centro (x=width/2), a la vez que cambia de dirección, dado que la instrucción "haciaLaDerecha = !haciaLaDerecha", cambia el valor de la variable de true a false y viceversa, funciona como un interruptor ON/OFF.

Entonces ya que establecimos con la variable haciaLaDerecha la dirección en que se mueve el objeto, entonces ahora podemos hacer que este cambie de dirección cuando este choca el borde:

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

int x;
boolean haciaLaDerecha;
void setup(){

size(200,200);
smooth();
x = width/2; //inicia del centro
haciaLaDerecha = true; //establece como dirección la //derecha

}
void draw(){

background(0,0,50);
ellipse(x,100,20,20);
if( haciaLaDerecha ){

x++; //incrementa si haciaLaDerecha es true
if( x > width ){ //si choca el borde derecha

haciaLaDerecha = false; //cambia //de dirección

}

}else{

x--; //decrementa si haciaLaDerecha es false
if( x < 0 ){ //si choca el borde izquierdo

haciaLaDerecha = true; //cambia //de dirección

}

}

}

Hecho en Processing

Cuando el objeto se dirije hacia la derecha (es decir cuando la variable haciaLaDerecha es true), entonces el borde se evalúa preguntando si x es mayor que width, mientras que cuendo el objeto se dirije a la izquierda, dicha evaluación se realiza preguntado si x es menor que cero.

ir arriba

Aprovechando el signo positivo o negativo

El ejemplo que sigue hace lo mismo que el anterior, sólo que en vez de tener una variable booleana llamada haciaLaDerecha, tiene una variable entera llamada paso que se encarga de señalar la dirección así como de establecer el incremento o decremento. Veamos cómo hace esto:

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

int x;
int paso;
void setup(){

size(200,200);
smooth();
x = width/2; //inicia del centro
paso = 2;

}
void draw(){

background(0,0,50);
ellipse(x,100,20,20);
x += paso; //cuando paso es negativo, esto es un //decremento
if( x > width || x < 0 ){ //si choca algún borde

paso *= -1; //cambia de dirección

}

}

Hecho en Processing

La clave de este programa está en la operación "x += paso", dado que si paso es positivo (en este caso el valor 2), entonces esta operación es un incremento (y por ende el objeto se desplaza hacia la derecha), pero cuando paso tiene un valor negativo ( -2 ), entonces esta operación es un decremento (sumar a un valor otro negativo es el equivalente a restar) y por ende el objeto se dirije a la izquierda. Esta posibilidad del uso del signo para poder realizar decrementos o incrementos con una sola operación nos permite transformar el cambio de dirección en un cambio de signo, lo que se resuelve en la operación " paso *= -1", que significa multiplicar a paso por -1 (menos uno). Dado que ambos cambios de dirección son idénticos, entonces podemos evaluar una única condición que se ver si x se pasó de algún borde (x > width || x < 0).

ir arriba

En dos dimensiones

El ejemplo que sigue traslada estos conceptos de movimiento unidimensional a un movimiento bi-dimensional. Simplemento duplicamos las variables x y paso con otras para el movimiento vertical (y y pasoY), dado que el paso del movimiento vertical se llama pasoY, decidí cambiar el nombre de paso por pasoX. Para el límite vertical usamos la variable de sistema height que es la altura de la pantalla.

Note que cambiamos la altura con respecto a la anchura, así como el paso de avance horizontal con respecto al vertical, para mostrar que el ejemplo aún funciona:

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

int x,y;
int pasoX,pasoY;
void setup(){

size(200,300);
smooth();
x = 87;
y = 13;
pasoX = 2;
pasoY = 4;

}
void draw(){

background(0,0,50);
ellipse(x,y,20,20);
x += pasoX; //movimiento horizontal
if( x > width || x < 0 ){ //bordes horizontales

pasoX *= -1; //cambia de dirección horizontal

}
y += pasoY; //movimiento vertical
if( y > height || y < 0 ){ //bordes verticales

pasoY *= -1; //cambia de dirección vertical

}

}

Hecho en Processing

ir arriba