Introducción a la programación para artistas y principiantes

Variables propias

En la lección anterior introducimos las variables, el concepto más importante de la programación, ya que gracias a ellas podemos almacenar valores que cambian a lo largo del tiempo y conseguir así crear programas dinámicos.

Vimos cómo utilizar dos variables internas de p5 que nos dicen las coordenadas del cursor: mouseX y mouseY, pero el verdadero potencial de las variables no se limita a usar las que ya están creadas sino a que podemos crear nuestras propias variables.

Ciclo de vida de las variables

Una variable es un espacio en la memoria del dispositivo donde podemos almacenar información en forma de datos, como por ejemplo números y textos. Para facilitar el acceso a ese espacio le damos un nombre y ese es ni más ni menos que el nombre de la variable, cuyo proceso de creación se denomina declaración.

La forma más sencilla de declarar una variable en JavaScript es haciendo uso de la instrucción var. Veamos un ejemplo creando dos variables para substituir la posición donde dibujamos una figura en el lienzo. Podemos declararlas al principio de un sketch:

06 - Variables propias/sketch.js

var circuloX;  // circulo_x
var circuloY;  // circulo_y

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  fill(200, 0, 0)
  ellipse(mouseX, mouseY, 50, 50)
}

Recordad que no podemos darle cualquier nombre a una variable, hay una serie de palabras reservadas que no podemos utilizar, si utilizáis alguna os dará un error de tipo SyntaxError: Unexpected token al ejecutar el código. Además no pueden contener espacios en los nombres, por eso suelen separarse las palabras con mayúsculas al principio de cada una menos la primera, esto se conoce como notación camelCase. Otra práctica común es separar las palabras con barras bajas haciendo uso de la notación snake_case.

Sea como sea ya tenemos nuestras variables declaradas pero todavía no tienen ningún valor, tenemos que asignarles algún dato para poder utilizarlas y este proceso se denomina inicialización.

Podríamos darle las posiciones del centro del lienzo:

var circuloX = 200;
var circuloY = 200;

Ya tenemos las variables declaradas e inicializadas, sólo no falta hacer uso de ellas. ¿Os imagináis cómo? Pues está claro, substituyéndolas por los variables internas mouseX y mouseY:

function draw() {
  background(220);
  fill(200, 0, 0)
  ellipse(circuloX, circuloY, 50, 50)
}

Ahora viene la parte divertida y es que por defecto nuestras variables tienen un valor que no cambia, pero nosotros podemos modificarlo de muchas formas. Por ejemplo, podemos sumar una cantidad a circuloX cada vez que detectemos un evento de clic haciendo referencia:

function mousePressed() {
  circuloX = circuloX + 5;
}

¿Interesante verdad? ¿Y si este incremento lo hacemos dentro de la función draw que se ejecuta varias veces qué creéis que pasará?

function draw() {
  background(220);
  fill(200, 0, 0)
  ellipse(circuloX, circuloY, 50, 50)
  circuloX = circuloX + 5;
}

¡Pues hemos creado una animación que mueve la figura! Dependiendo de cómo ajustemos estos valores podemos crear diferentes efectos, por ejemplo una diagonal hacia abajo a la derecha partiendo desde la esquina superior izquierda:

var circuloX = 0;
var circuloY = 0;

function draw() {
  background(220);
  fill(200, 0, 0)
  ellipse(circuloX, circuloY, 50, 50)
  circuloX = circuloX + 1;
  circuloY= circuloY + 1;
}

Como véis las variables son la clave para añadir dinamismo a un programa y en nuestro caso sirven para generar el efecto de movimiento de la figura, sin duda un ejemplo muy ilustrativo de su importancia.