Bueeeno, pues ya habéis pasado por mi pequeña introducción a Processing, de modo que es de suponer que ya tenéis una cierta idea de cómo se escribe un programa y de cómo se ejecuta. Así que hoy vamos a empezar algo un poco más serio, mis pequeños padawan: vamos a aprender a trabajar con constantes y con variables, y comenzaremos nuestros primeros devaneos con las sentencias de control de flujo, los famosos if then.
Al final de este artículo, habremos aprendido a utilizar variables y sentencias de control para automatizar una animación, además de trabar conocimientos con algunos comandos nuevos como text();. ¿Comprendido?, ¡vamos allá!
Al final de esta práctica, tendremos una pelota blanca que rebota sobre un fondo del color que queramos, al estilo de esta pantalla (pincha en la imagen):
Constantes y variables
Por definición, una variable en programación es un valor que puede cambiar durante el periodo de ejecución del código. Así, por ejemplo, en un programa que saludara al usuario, puedo utilizar una variable llamada "usuario". En un momento dado, el usuario puede ser "Juan". En otro momento, esta variable puede cambiar a "Lola". En el código correspondiente, ambos momentos se reflejarían en :
//Declaro la variable usuario, de tipo cadena
String usuario;
//Asigno a usuario el valor Juan
usuario="Juan";
//Ahora asigno a usuario el valor Lola
usuario="Lola";Normalmente, es necesario declarar la variable antes de utilizarla, salvo en algunos lenguajes más particulares, como el PHP. DECLARAR la variable quiere decir que estamos avisando al ordenador de que tenemos intención de utilizar una zona de la memoria para ir guardando un valor de referencia que puede ir cambiando. Para que el programa sepa cuánta memoria necesita reservar a dicha variable, tenemos que indicar de qué tipo es. En la mayor parte de los lenguajes comunes de programación, nos vamos a encontrar con los siguientes tipos de variable:
- int (integer) si queremos trabajar con valores enteros
- float si queremos trabajar con decimales
- char si queremos guardar un sólo carácter
- string si queremos guardar un texto (varios caracteres)
- boolean si queremos guardar valores de tipo true/false (verdadero/falso).
Antes de continuar, vamos a probar con un pequeño programa en Processing. Teclea este código (o copia y pega, que ya nos conocemos, vaguete...):
//Declaramos variable
int x=0;
void setup(){
size(800,600);
}
void draw(){
//Borramos todo
background(255,255,255);
//Dibujamos la elipse con coordenada horizontal x
ellipse(x,300,50,50);
//Hacemos crecer a x en una unidad para el siguiente recorrido del bucle
x=x+1;
}Si has ejecutado el código, verás una pelota que se desplaza de izquierda a derecha por mitad de la pantalla. (haz click en el script si la pelota ya ha desaparecido).¿Qué es lo que ha pasado?. Analicemos el funcionamiento del código:
- Declaramos una variable de tipo entero llamada x antes de setup(), y la ponemos a 0;
- En setup() nos limitamos a construir una ventana de 800x600 píxeles
- En cada reiteración del bucle draw:
- Borramos la pantalla con background() (tú pon el color que quieras, yo prefiero el blanco)
- Dibujamos la pelota con ellipse, cuyo primer argumento es la variable x. Como en el primer ciclo es 0, pues la pelota se situa en las coordenadas (0,300).
- Sumamos 1 a x, de modo que x=0+1=1. Eso quiere decir que en el próximo ciclo, se volverá a borrar la pantalla y se dibujará la pelota, pero ahora en (0,301).
- x irá pasando por 1, 2, 3, etc... de modo que la pelota se irá redibujando desplazándose a la izquierda, generándonos la ilusión de la animación.
- Cuando la pelota llegue al final de la ventana (x pasa de 800), simplemente desaparecerá, por que la pelota se seguirá dibujando, pero fuera de los límites de la ventana.
En un momentito nos preocuparemos de cómo hacer que rebote horizontalmente. Pero primero, pensemos, ¿cómo enriquecer este código para que la pelota se mueva en diagonal?. ¡Exacto!, creando una segunda variable, y asignando a esta la coordenada vertical en ellipse(). Veamos cómo:
int x=0;
int y=0;
void setup(){
size(800,600);
}
void draw(){
background(255,255,255);
ellipse(x,y,50,50);
x=x+1;
y=y+1;
}¡Fácil!, ¿verdad?. ¡Sí, sí, ya sé que la pelota sigue desapareciendo por una esquina de la pantalla!. Paciencia, ya llegaremos a eso.
Una vez hemos definido lo que son las variables en programación, hablaremos de las constantes. Como puedes suponer, una constante es un valor que se mantiene constante (de ahí su nombre) durante todo el proceso de ejecución del código. Un ejemplo puede ser el número de Euler, el número PI, o la constante de Avogadro, que son valores inamovibles. En el caso concreto de Processing (hijo de Java), para definir un valor constante se usa la palabra final, para indicar que ese valor en concreto no debe cambiar. Por ejemplo:
final double avogadro=6.02*pow(10,23);
(Tranquilos, no vamos a ponernos aquí a calcular moles; por cierto, double es un tipo extendido de variable float pero que guarda el doble de memoria, de 32 a 64 bit, para números excepcionalmente grandes; por otro lado pow() es una función que me está elevando 10 a 23).
Variables de entorno
En ciertos lenguajes de programación, como es el caso de Processing, se utilizan variables de entorno, que forman un conjunto de valores dinámicos que normalmente afectan al comportamiento de los procesos en una computadora (Wikipedia dixit). Es decir, que recogen ciertos valores dentro del funcionamiento normal del programa. En el artículo anterior ya conocimos dos, que son mouseX y mouseY. Puedes poner casi cualquier tipo de nombre a una variable, siempre que no coincidan con nombres de variables de entorno.
Por ejemplo, la variable width recoge la anchura de la ventana en píxeles. La variable height recoge la altura. Las variables de entorno pueden dinamizar mucho el trabajo.
Además, podemos crear variables que combinen el contenido de otras variables. En algunos lenguajes hay que ser muy tiquismiquis y procurar que coincidan sus tipos, o hacer lo que se llama un casting, pero bueno, para nosotros de momento no será necesario.
Veamos un ejemplo añadiendo, ahora, el comando text("texto entrecomillado",x,y); que, como imaginarás, te pone el texto indicado en las coordenadas x, y especificadas. El texto será otra variable denominada "coordenadas" y que va a combinar las variables x e y para que aparezcan en una parte de la pantalla (he cambiado el relleno fill a negro para que pueda leerse el texto sobre fondo blanco):
//Declaramos variables
String texto;
int x=0;
int y=0;
void setup(){
//Construimos pantalla y consignamos el rellenado en negro
size(800,600);
fill(0,0,0);
}
void draw(){
background(255,255,255);
//La variable 'texto' se construye concatenando x e y con parentesis y coma
texto="("+x+","+y+")";
//Usamos variables de entorno para situar el texto
text(texto,width/2,height/4);
ellipse(x,y,50,50);
x=x+1;
y=y+1;
}Y el resultado (pincha en el script para reiniciarlo):
Introducción a las sentencias de control de flujo
Las sentencias, también denominadas estructuras de control de flujo, vienen a ser modos de organizar las órdenes que damos al programa para que éste cumpla una serie de órdenes de manera organizada, pero sólo en las condiciones que especifiquemos. Un ejemplo: supongamos que estamos escribiendo un videojuego en el que el personaje del jugador intenta pasar a una discoteca. Si el personaje tiene un carnet de identidad que le describa como mayor de edad, el portero le permitirá pasar, la chica del guardarropa le saludará y le ofrecerá guardarle la chaqueta, y la banda sonora del juego pasará a emitir "perreo". Pero si no se cumple esa condición ("Tengo un carnet de adulto"), esas instrucciones simplemente se obviarán. No se cumplirán.
No estamos en condiciones de hacer algo tan complicado. Sin embargo, sí que podemos empezar a trabajar con la estructura if--else, para lograr que al menos nuestra pelota rebote cuando llegue al extremo de la ventana.
Estructura if (condicion)--else
Con distintas sintaxis en cada lenguaje, pero esta posibilidad se ofrece en casi todos. La idea es fijar una condición que el programa pueda comprobar si se ha cumplido. Si la respuesta es afirmativa, se concreta un conjunto de instrucciones a cumplir si no se cumple la petición especificada. Else es optativo, no es obligatorio ponerlo; sólo lo hacemos cuando queremos fijar una respuesta a cuando la condición no se cumpla. En el ejemplo del videojuego:
if (tengoCarnet){
abrePuerta();
chicaGuardarropaSaluda();
cambiaMP3();
} else {
print ("No puedes pasar");
}
¿Cómo deberíamos complementar nuestro código para que la pelota rebote por la ventana?. Pues vamos a crear dos variables nuevas, vx y vy, para que luego podamos jugar con las velocidades horizontal y vertical, además de acelerar el movimiento (cambio de 1 a 5 píxeles cada bucle). La pelota se me puede escapar por cuatro sitios:
- Por la derecha (se cumpliría la condición x>width)
- Por la izquierda (se cumpliría la condición x<0)
- Por abajo (se cumpliría la condición y>height)
- Por arriba (se cumpliría la condición y<0)
Así que voy a incluir cuatro condiciones en el código, de tipo:
if (condicion de salida horizontal){
Cambia signo de velocidad vx;
}
if (condicion de salida vertical){
Cambia signo de velocidad vy;
}
Y éste es el código para conseguir que rebote la pelota. Es aún un poco largo, porque no hemos entrado en las operaciones lógicas, que combinan posibilidades, pero verás que funciona:
//Declaramos variables de coordenada y de velocidad
int x=0;
int y=0;
int vx=5;
int vy=5;
void setup(){
size(800,600);
}
void draw(){
//Fondo azul claro, que me gusta mucho
background(0,100,255);
ellipse(x,y,50,50);
//Me salgo por la derecha
if (x>width){
vx=-vx;
}
//Me salgo por la izquierda
if (x<0){
vx=-vx;
}
//Me salgo por abajo
if (y>height){
vy=-vy;
}
//Me salgo por arriba
if (y<0){
vy=-vy;
}
//Cambio a las nuevas coordenadas
x=x+vx;
y=y+vy;
}
¡Y ahora te toca hacer los deberes!
Hemos visto cómo utilizar variables (de momento, sólo tipo int y float) para hacer un programa muy sencillo, pero ya muy completo. Hemos explicado para qué hay que declararlas, hemos pasado (muy por encima, sí) por el concepto de constante, y hemos conocido la primera, más básica, pero muy importante, sentencia de control: la if-then. Yo creo que no está mal. Ahora te propongo tareítas: a ver cómo mejoras este código, de modo que a cada rebote, la pelota cambie de color. Una idea de partida (no necesariamente la más ingeniosa) sería volver a utilizar variables (por ejemplo, rojo, azul y verde) y asignárselas a un comando fill cuando se cumpla la función de rebote.
¡Apa!. ¡Pues eso es todo!. ¡Hasta la próxima, estudiantes!. ¡Ah!, ¡por cierto!, se me olvidaba dejaros aquí un videotutorial que recoge lo que he explicado, y lo enriquece con algunos conceptos más. Podéis echarle un vistazo, si creéis que puede seros de utilidad...
¡Y ahora sí que me despido!. ¡Hasta la próxima!. ¡Sed felices!. ¡Siempre construyendo!. ¡Siempre aprendiendo!. ¡Cultura maker!