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

Variables internas

En esta lección vamos a introducir uno de los conceptos fundamentales de la programación: las variables. Pero antes de definir lo que es una variable, pensemos en lo que hemos estado haciendo y qué nos falta.

Hasta ahora hemos dibujado diferentes figuras en un lienzo utilizando las funciones de p5. Estas figuras son estáticas, aparecen en el lienzo tal como las definimos y no cambian a no ser que modifiquemos el código y lo volvamos a ejecutar.

Sin embargo los programas no suelen funcionar de esa forma, normalmente en ellos realizamos un conjunto de acciones que empieza por abrir el programa y esperar a que carguen los componentes gráficos para interactuar con ellos. Luego ya nos ponemos a presionar botones y hacer clic en diferentes lugares para que el programa haga lo que necesitamos.

Todas estas acciones componen lo que se conoce como el flujo del programa y ese flujo no existiría si no fuera por algo vital: el tiempo.

El tiempo es dinámico

Así es, lo que no estamos teniendo en cuenta en nuestros ejemplos es que el tiempo fluye y esa es la clave para entender la necesidad de las variables y su capacidad para añadir dinamismo en los programas.

Volvamos a dibujar alguna forma en el lienzo para entender esta idea:

05 - Variables sistema/sketch.js

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

function draw() {
  background(220);
  fill(220, 0, 0);
  ellipse(200, 200, 100, 100);
}

Igual que hemos venido haciendo hasta ahora, al ejecutar el código tendremos nuestro lienzo con una figura, todo muy estático y lógico, pues hemos imaginado que somos pintores dibujando sobre un lienzo. Primero preparamos el lienzo y luego dibujamos en él las formas que queremos, incluso podemos ajustar préviamente colores para los rellenos y bordes de las figuras.

Sin embargo recordad que nos falta algo que no hemos tenido en cuenta: el tiempo.

¿Y si os dijera que este lienzo no se dibuja únicamente una vez?

Vamos a hacer uso por un momento de aquella instrucción que muestra mensajes en la pantalla y vamos a utilizarla en la función draw (dibujar) donde tenemos las instrucciones que crean la figura:

function setup() {
  print("Voy a crear el canvas")
  createCanvas(400, 400);
}

function draw() {
  print("Voy a dibujar en el canvas")
  background(220);
  fill(220, 0, 0);
  ellipse(200, 200, 100, 100);
}

Si ejecutamos este código, veremos como aparece una sola vez el texto "Voy a crear el canvas" pero innumerables veces "Voy a dibujar en el canvas".

Efectivamente, la función draw() y todo su contenido no es algo estático como la preparación del lienzo, sino que es dinámico y se ejecuta a lo largo del tiempo, concretamente unas 30 veces por segundo. Esta cantidad se conoce como fotogramas por segundo.

¿Pero si draw() es dinámica por qué percibimos su resultado como algo estático? Pues porque ese resultado nunca cambia, estamos dibujando las figuras en posiciones y colores constantes que no varían.

En otras palabras, si conseguimos alterar el contenido de draw para que su resultado cambie, entonces conseguiremos captar su dinamismo. ¿Cómo? Pues por ejemplo modificando las posiciones y colores de las figuras a lo largo del tiempo. ¿Y eso cómo se consigue? Pues ni más ni menos que utilizando valores variables, ahí tenemos nuestra respuesta.

Variables mouseX y mouseY

La biblioteca p5 cuenta con algunas variables internas que podemos utilizar para conseguir información, dos de las más interesantes son mouseX y mouseY. Estas variables contienen las coordenadas X e Y donde se encuentra el puntero del ratón sobre el lienzo respecto al punto de origen (0, 0).

Si en lugar de mostrar por pantalla el texto "Voy a dibujar el canvas" mostramos esas variables veremos sus valores:

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

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

El hecho de que estos dos valores vayan cambiando su valor es la prueba de que son valores variables.

Si en lugar de dibujar nuestra redonda en el punto estático (200, 200) lo hiciéramos en las coordenadas del ratón, ¿qué creéis que ocurriría? Vamos a intentarlo:

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

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

¡Pues ahí lo tenemos! Una redonda dinámica dibujándose bajo nuestro ratón, cuya posición es variable porque sus cooredenadas son valores variables.

Dibujando el lienzo

Antes de acabar esta reveladora lección, quiero experimentar un poco más con vosotros.

Hasta ahora lo primero que hemos hecho al dibujar sobre el lienzo es empezar llenando el fondo de color gris usando la función background, pero ¿qué ocurriría si no lo rellenamos? Vamos a pintar una redonda muy pequeña sobre el lienzo pero pintando el fondo sola una vez durante su preparación:

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

function draw() {
  fill(0);
  ellipse(mouseX, mouseY, 15, 15);
}

Al hacer esto lo que hemos conseguido es que en cada fotograma se dibuja una pequeña redonda, pero como no pintamos de nuevo el fondo para vaciar su contenido, se conservan los dibujos de los anteriores fotogramas generando el efecto de que dibujamos con el ratón.

El problema es que muy rápidamente llenamos todo el lienzo y es imposible seguir dibujando, así que no voy a desaprovechar la oportunidad de explicaros lo que es un evento y cómo podemos utilizarlo para vaciar nuestro lienzo.

Definiendo un evento

Ya sabemos que los programas informáticos se ejecutan indefinidamente en el tiempo y eso es lo que les añade dinamismo. Una de las formas de manejar el dinamismo es a través de variables que cambian su valor, pero hay otras formas y una de ellas son los eventos.

Imaginémonos un evento como una interacción que sudece mientras el programa está en marcha, por ejemplo cuando se presiona un botón.

Presionar un botón es un evento interactivo que realiza el usuario y es otra forma de añadir dinamismo. Como programadores podemos capturar esos eventos y ejecutar instrucciones para realizar diferentes tareas.

El ejemplo más sencillo para ilustrar esto es capturar el evento clic del ratón y dibujar el fondo del lienzo para simular que vaciamos su contenido, eso se haría así:

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

function draw() {
  fill(0);
  ellipse(mouseX, mouseY, 15, 15);
}

function mousePressed() {
  background(220);
}

Como siempre todas estas funcionalidades y variables internas las encontráréis perfectamente documentadas en la referencia de p5.