Palabras clave: Variables globales, Animación, Interacción.

Preguntas de repaso

  • ¿Qué es una función?

  • ¿Qué es una variable?

  • Indica qué acciones están relacionadas con una función y cuáles lo están con una variable: declarar, asignar, definir.

No sigas si no conoces las respuestas.

1. Funciones de animación e interacción

Processing tiene varias funciones que son invocadas automáticamente por el lenguaje de programación sin que tengamos que hacer una invocación expresa.

Una de ellas es la función setup(), la función principal del programa. Esta función, si existe, es la primera en ser invocada. Nada hay que decirle a Processing. Buscará en el listado del programa y si existe esa función, entonces la ejecutará.

En Processing 3.x. la primera función en ejecutarse es settings(), si existe.

Recuerda: en Processing 2.x se admite la instrucción size(200, 200-100); pero no así en Processing 3.x. Si quieres que el tamaño de la ventana gráfica dependa del resultado de una expresión numérica tendrás que usar la función void settings() que será la primera función que se invoque dentro de setup().

Hay otras funciones que en el caso de existir Processing también las invocará. Los criterios de cuándo una función es invocada, si se han definido en el programa, es diferente. Se comentan las siguientes:

void draw()

Es una función que se invoca, por defecto, 60 veces por segundo. Se utiliza para hace animaciones.

void frameRate (numVeces)

Es una función que obligará a que se ejecute la función draw() tantas veces como se indice en numVeces.

void keyPressed()

Se ejecutará cada vez que pulsemos una tecla.

void keyReleased()

Se ejecutará cada vez que soltemos una tecla.

void mouseClicked()

Se llama cada vez que se pulsa y suelta un botón del ratón.

void mouseDragged()

Se invoca cada vez que se arrastra el ratón (se pulsa un botón del ratón y sin solar se mueve el ratón).

Las últimas 4 funciones no serán invocadas si no existe la función draw().

  • El significado de void indica que la función no retorna ningún resultado. Este aspecto se explicará con detenimiento más adelante.

  • Ninguna de las funciones indicadas requieren de argumentos.

2. Variables para la interacción

Ya se indicó que las variables width y height son variables que informan sobre el tamaño de la ventana gráfica. Processing también tiene otras variables que nos informan sobre el estado del teclado y del ratón.

boolean keyPressed

Es true si se ha pulsado una tecla.

char key

Indica la última tecla presionada o liberada.

int keyCode

Indica la última tecla presionada o liberada.

int mouseX, mouseY

Almacenan las coordenadas actuales del puntero del ratón.

int pmouseX, pmouseY

Almacenan las coordenadas previas del puntero del ratón justo antes del último movimiento.

Explica qué hace el siguiente programa. 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
void setup() {
  size(500, 500);
}

void draw() {
  line (0, 0, mouseX, mouseY);
}

void mouseDragged() {
  line (pmouseX, pmouseY, mouseX, mouseY);
}

void keyPressed() {
  background(255);
  print(key);print(" .... ");println(keyCode);
}

3. Un apunte sobre la interactividad en Processing

El objetivo final de estos materiales no es que hagas programas interactivos (p.e. juegos), sino que conozcas los fundamentos de la programación imperativa, estructurada y modular.

Las funciones y variables que se exponen en este tema no entra en ninguno de los paradigmas anteriores pues se corresponden al paradigma de la Programación Orientada a Eventos. Esto quiere decir que ante el movimiento del ratón o ante la pulsación de una tecla podemos hacer que el programa reaccione ante alguno de esos eventos.

Entonces te preguntarás, si no se va a estudiar programación orientada a eventos ¿por qué se explica? Hay dos motivos:

  1. No debes olvidar que estos materiales forman parte de un curso presencial y en clase se usará la función draw() y las variables width y height. También, ocasionalmente, se desarrollará alguna demostración interactiva.

  2. El código que debe completarse en cada una de las funciones indicadas - y que deberás implemantar tú - responde a los paradigmas de programación que estamos estudiando.

4. Repaso

  • Existen funciones y variables que permiten hacer programas interactivos.

  • La función que realmente usaremos será draw() y las variables globales width y height.