Unidad 3 - Processing

 1. Desplazar elementos - x , y

Desplazar elementos en la pantalla consiste en cambiar el valor de la posición en x, y o ambas. Para facilitar este trabajo, se utilizan variables. 

Las variables son espacios de memoria que se reservan y cuyo contenido puede variar. Por ejemplo, en la unidad anterior, se utilizaron las variables mouseX y mouseY, que ya están creadas por Processing. Si bien siempre se refiere a ellas utilizando el mismo identificador (nombre), su contenido varía dado que contienen el valor actual de la posición en x e y del ratón.

Para evitar errores, es importante que el nombre de las variables sea representativo de la información que almacenan. Recordá que se pueden agregar comentarios con //, para realizar acotaciones pertinentes.

Por otro lado, el nombre de las variables suele escribirse en minúscula y no puede coincidir con las palabras reservadas del lenguaje. Una forma sencilla de verificarlo es escribir el nombre y asegurarte de que no cambie de color (Processing cambia el color de las palabras que reconoce como parte del lenguaje). 

Processing es un lenguaje tipado, lo que implica que cada variable está asociada a un tipo de dato. 

Algunas de ellas son:

int, para números enteros.

float, para números reales (con coma flotante).

char, para caracteres.

string, para cadenas de caracteres.

boolean, para valores lógicos (verdadero/falso).

Para crear (declarar) una variable se debe seguir la siguiente estructura:

tipo de dato + nombre (identificador) + = (símbolo de asignación) + valor + ;

Ejemplo: int posicionX = 0 ;

En el ejemplo la variable es de tipo entero, por lo que solo se le podrá asignar un valor entero. Es decir, no se le podrá asignar una cadena como «Hola» ni un número real como 1.25. A pesar de ello, en algunos casos, Processing convierte automáticamente el valor a un número entero, lo cual no es recomendable porque puede traer inconvenientes.

Para incrementar en 1 el valor de una variable, se pueden utilizar estas formas:

posicionX = posicionX + 1;

posicionX ++;

Para incrementar en un valor distinto de 1:

posicionX = posicionX + 4;

posicionX += 4;

Para decrementar en 1 el valor de una variable, se usan las siguientes formas:

posicionX = posicionX - 1;

posicionX --;

Para decrementar en un valor distinto de 1:

posicionX = posicionX - 4;

posicionX -= 4;

De la misma manera se aplican las operaciones de división con el símbolo / y multiplicación con *.

En el siguiente video se ve un ejemplo del desplazamiento de una elipse que utiliza variables para sus posiciones. Siguiendo la misma lógica, se pueden usar variables para cambiar su tamaño. 

Dato: el lenguaje distingue mayúsculas y minúsculas, por lo que siempre se deben respetar.

2. Condicionales

En el video anterior la figura no volvía a aparecer en pantalla debido a que sumaba continuamente y no «reconocía» haber llegado al final. 

Para conocer estas situaciones, se debe hacer una pregunta utilizando una estructura if:

if (condición) {

  instrucciones para ejecutar si se cumple la condición

 } 

Para conocer si la posición de la figura supera el ancho de la pantalla, se debe preguntar si es mayor al ancho de esta forma:

if (posiciónX > width) {

}

width es una variable de Processing que almacena el ancho de la ventana y height almacena el alto.

Si la condición se cumple, la figura debe volver al inicio, esto es a x = 0. Por ello se le asigna 0 a la variable posicionX y la estructura queda como sigue:

if (posiciónX > width) {

  posicionX = 0 ;

}

Dato: se puede realizar lo mismo modificando el valor de la posición en y o en x e y a la vez.

3. Rebotes

Una de las formas de lograr que la figura rebote contra los bordes es utilizar una variable booleana que ayude a saber hacia dónde se dirige la figura. Mientras la variable booleana sea verdadera, se incrementará la posición en x, y cuando no sea así, se decrementará. Por otro lado, cada vez que se incremente o decremente el valor de x, será preciso consultar si la figura llegó a algún borde, para cambiar la dirección del movimiento, como se ve en el video a continuación. 

Dato: al igual que en la sección anterior, se puede realizar lo mismo modificando el valor de la posición en y o en x e y a la vez y ajustando los if.

4. Funciones del usuario

En numerosas ocasiones, crear funciones ayuda a visualizar mejor el código y resolver instrucciones de forma más apropiada.

Al igual que las variables, las funciones también tienen tipos según los valores que «retornen». Acá se representarán funciones de tipo void, que no «retornan» nada y, por ende, son las más sencillas. 

Por otro lado, dentro de los paréntesis es posible agregar parámetros, valores para enviarle a la función. Pero ahora no se los va a utilizar.

El nombre de las funciones debe ser representativo de las instrucciones que contienen y, al igual que el de las variables, no debe coincidir con el de las palabras reservadas ni otras funciones que ya existan en Processing (podés consultar «Referencia» en el sitio web). 

Es recomendable que las funciones se creen fuera del draw() o del setup() de esta forma:

tipo nombreDeLaFuncion (parámetros) {

instrucciones para ejecutar

} 

 

Ejemplo:

void sumar (){

  posicionX = 0;

}

Sin embargo, crear una función no implica que se ejecute por Processing. Para ello se la debe incluir dentro de las instrucciones del setup() o draw(), o bien dentro de una función que se invoque en alguna de estas dos. 

Para invocar una función, se debe escribir de esta forma:

sumar();

Como ya se aclaró que no se trabaja con parámetros en esta unidad, los paréntesis siempre van vacíos. Un ejemplo de funciones que utilizan parámetros son las de la unidad anterior, que permitían dibujar figuras. En ese caso, los parámetros sirven para especificar cómo dibujar esas figuras.

A continuación vemos un ejemplo de construcción de una de las funciones sencillas a partir del código del ejemplo anterior:

5. Desafío 3

En este desafío, te invitamos a retomar el programa que hiciste en la unidad anterior y a agregarle figuras que se muevan en los ejes x e y. Para ello podés crear funciones, hacer que reboten contra los bordes o que al llegar a ellos aparezcan en el inicio o en cualquier otra posición de la pantalla.

Volver a Processing