4.2 Usando una variable

Aunque pueda parecer inicialmente más complicado tener que usar palabras en lugar de los números, las variables nos hacen la vida más fácil y más interesante.

Vamos a ver un ejemplo sencillo de un programa que dibuja tres eclipses en pantalla:

size(720, 400);

ellipse(160, 200, 100, 100);

ellipse(360, 200, 100, 100);

ellipse(560, 200, 100, 100);

Uno de los usos que tienen las variables es evitar repetirnos en el código. Podemos crear variables en cualquier parte de nuestro código, pero para evitar problemas, de momento, todas nuestras variables las crearemos en la parte superior de nuestro código. Creamos una variable de números enteros llamada “diametro” y le damos un valor de 150. Acto seguido usamos la variable como parámetro de ancho y alto de nuestras elipses.

int diametro = 150;

size(720, 400);

ellipse(160, 200, diametro, diametro);

ellipse(360, 200, diametro, diametro);

ellipse(560, 200, diametro, diametro);

De esta manera, modificando el valor de la variable diámetro, podemos modificar el diámetro de las tres elipses a la vez sin tener que modificar el parámetro en seis ocasiones.

int diametro = 150;

int circleY = 200;

size(720, 400);

ellipse(160, circleY, diametro, diametro);

ellipse(360, circleY, diametro, diametro);

ellipse(560, circleY, diametro, diametro);

La ejecución de este código, se logra el mismo resultado que en el primer ejemplo. Aparecen tres círculos en el centro de nuestra ventana de reproducción, pero a estas alturas de nuestro código, podemos realizar cambios en la representación de nuestras elipses, modificando la altura y el tamaño de las mismas con solo modificar dos parteros en lugar de nueve.

Vamos a incluir dos variables más. Si te fijas en el código, la elipse central tiene una posición en “x” de 360 px. La de la izquierda tiene una posición en “x” de 150 px, exactamente 200 px menos que la central. Y por último la elipse de la derecha, tiene una posición “x” de 560, que son 200 pieles más que la elipse central.

int diametro = 150;

int circleY = 200;

int circleX = 360;

int offset = 200; 

size(720, 400);

ellipse(circleX - offset, circleY, diametro, diametro);

ellipse(circleX, circleY, diametro, diametro);

ellipse(circleX + offset, circleY, diametro, diametro);

De esta manera, nuestras tres elipses se dibujarán teniendo como parámetros variables o cálculos con dichas variables. Para modificar su posición o dimensión, nos centraremos en modificar solo los valores de dichas variables sin volver a tocar os parámetros dentro de las funciones ellipse().

Veamos otro ejemplo:

void setup(){

size(800, 800);

}

void draw(){

background(255);

stroke(0);

fill(175);

ellipse(400, 400, 200, 200);

}

Aunque aun no hemos estudiado esta estructura, vemos que existen dos partes bien diferenciadas por un lado setup() y por otro draw(). Esto le indica a Processing que queremos que nuestro sketch sea interactivo. Ponemos aquí este programa para probar cómo nuestras variables pueden hacer que nuestras formas se muevan por la pantalla.

No hay una regla de oro de cuándo usar una variable. Sin embargo, si te encuentras en tu código un montón de números, revisa el código y cambia estos valores por variables.

Algunos programadores dicen que si parece un número tres o más veces, debe ser una variable. En lo personal, yo diría que si un número aparece una vez, utiliza un variable. Utiliza siempre variables.

int circleX = 100;

int circleY = 100;

void setup(){

size(800, 800);

}

void draw(){

background(255);

stroke(0);

fill(175);

ellipse(circleX, circleY, 400, 200, 200);

}

La ejecución de este código, logra el mismo resultado que el primer ejemplo: aparece un círculo en el centro de la pantalla. Sin embargo debemos recordar que una variable no es simplemente un marcador de posición para un valor constante. Lo llamamos variable, ya que varía. Para cambiar su valor, escribiremos una operación de asignación, que asigna un nuevo valor. Hasta ahora, cada línea de código que hemos escrito llamaba a una función. Las variables introducen operaciones de asignación a la mezcla. Esto es lo que parece (que se realiza de la misma forma que inicializar una variable, solamente que no se necesita declarar la variable.

Nombre de variable = expresión

x = 5;

x = a + b;

x = y - 10 * 20;

x = x * 5;

Un ejemplo común es la incrementación. En el código anterior, circleX comienza con un valor de 100. Si queremos incrementar circleX por uno, decimos que circleX es igual a sí mismo más uno.

En código esto equivale a “circleX = circleX + 1;”

Vamos a intentar añadir esto a nuestro programa. Comenzaremos dando el valor de 0 a circleX.

Example 4-3: Variando variables

int circleX = 0;

int circleY = 100;

void setup(){

size(800, 800);

}

void draw(){

background(255);

stroke(0);

fill(175);

ellipse(circleX, circleY, 400, 200, 200);

circleX = circleX + 1;

}

Si ejecutamos este código, podemos observar que el círculo se mueve de izquierda a derecha, esto es porque draw() se repite una y otra vez, a la vez que conserva el valor de circleX en la memoria. Aprenderemos más sobre setup() y draw() en el siguiente capítulo, así como las bases del movimiento en Processing en el capítulo dedicado a ello.