Unidad 4 - Processing

1. Array o arreglo

En algunos casos hay que definir muchas variables que pueden complejizar el desarrollo y entendimiento del código. Por ejemplo, si quisieras dibujar seis círculos en posiciones distintas, requerirías de doce variables para sus posiciones y seis más si tienen distintos radios, como te mostramos a continuación:  

int posicionX1;

int posicionX2;

int posicionX3;

int posicionX4;

int posicionX5;

int posicionX6;

int posicionY1;

int posicionY2;

int posicionY3;

int posicionY4;

int posicionY5;

int posicionY6;

En este ejemplo eran solo seis, ¿te imaginas qué sucedería si fueran cien o incluso más?

En estos casos, y muchos otros, los arreglos sirven para manejar toda esa información de manera más eficiente y con menos líneas de código. Al igual que en las variables y funciones, estas estructuras de datos pueden ser de distinto tipo (int, float, boolean, etc.). Sin embargo, todos los elementos de un mismo arreglo son de igual tipo y se accede a cada dato mediante corchetes. 

A continuación te mostramos el mismo ejemplo anterior pero realizado con dos arreglos: uno para las posiciones de x y otro para las de y (y se podría crear otro para los radios). 

En ambos casos los arreglos son de tipo entero (int) y están creados de formas distintas pero equivalentes. 

En el caso int y[] = {50,150,250,350,450,550}; el valor 50 se guarda en y[0], el 150 en y[1] y así sucesivamente. El orden de los valores es muy importante.

En el ejemplo siguiente, se puede ver cómo dibujar seis círculos con arreglos.

2. Bucles

En el ejemplo anterior, aun utilizando arreglos, hay instrucciones que se repiten de forma muy similar y no agilizan el código. En estos casos podés usar bucles o ciclos for.

 for (expresión) {

  instrucciones

}

En el caso del ciclo for, generalmente, la expresión va a tener esta forma:

(int i = 0; i < número; i++)

Como la variable i se crea dentro de la condición, solo existe dentro del ciclo for. Las instrucciones de dicho ciclo se ejecutarán mientras la condición del medio sea válida (i<número). La condición puede utilizar otros operadores como >(mayor), =>(mayor o igual), =< (menor o igual). 

Y finalmente, en cada ejecución, la variable i se incrementará en uno porque hay un i++ (se pueden utilizar otras variantes como i--, i += número, i -= número, etc.). 

A continuación vemos el mismo ejemplo que antes, pero se utilizan arreglos y un ciclo for.

En cada oportunidad que dibujes un círculo, podrás modificar sus posiciones de la misma forma que lo realizaste en la unidad anterior, pero dibujando el fondo antes del ciclo for:

Y si querés mover los círculos a distintas velocidades, podés crear un arreglo con los distintos valores, que se le añadirán a las posiciones de esta forma: 

En ambos casos trabajamos solo en el eje x, pero podemos aplicarlo al eje y o a ambos a la vez. Además, con esta misma técnica podés variar los radios. 

Una alternativa al ciclo for es el while:

while (condición) {

  instrucciones

}

El mismo ejemplo anterior, que utilizaba un ciclo for, adquiere esta forma:

int i = 0;

while (i < número) {

  instrucciones

  i++;

}

Por lo que el ejemplo de los círculos quedaría así:

3. Rebotes de varios círculos

Al igual que en la unidad anterior, utilizando arrays vas a poder mover los círculos en ambas direcciones y hacer que «reboten» cuando llegan a los bordes. 

Lo primero que se debe hacer es crear un array para manejar las direcciones de cada eje:

En este caso, el valor verdadero indica que se moverán a la derecha y el falso, a la izquierda.

Y dentro del ciclo for se agregan estas dos instrucciones: 

Estas son funciones que se detallan luego:

Ambas funciones reciben el valor i, que se requiere para saber a qué posición del arreglo acceder. Dado que la variable i solo existe en el ciclo, para que las funciones puedan conocer la posición del array, dicho valor debe enviarse por parámetro. 

Al crear cada función es un requisito especificar entre paréntesis qué tipo de dato va a recibir y darle un nombre. 

Luego, la función pregunta cuál es la dirección para saber si debe sumar o restar al valor de cada posición. Y también si se debe cambiar la dirección del movimiento, tal como observamos en la unidad anterior y como se ve en el siguiente video.

 

 Consejo: si deseás profundizar, te invitamos a indagar en los conceptos de clases y objetos que, si bien son más complejos, facilitan estos comportamientos.

4. Dibujar figuras con un ciclo for

Por otro lado, el uso de arreglos y ciclos for te permite crear figuras más complejas. 

Para ello tenés que invocar la función beginShape() y, luego, con un ciclo for vas recorriendo los arrays y añadiendo todos los vértices de la figura. Una vez finalizado esto, utilizás endShape() y ya podés ver la figura en pantalla tal como te mostramos en este ejemplo. 

5. Desafío

Ahora te proponemos que manejes las figuras en movimiento que programaste antes utilizando uno o más arrays. Si en el programa que creaste se observa una sola figura, ¡es una gran oportunidad para que ahora sean muchas!

Volver a Processing