El teclado y la ventana

Facebooktwittergoogle_pluslinkedinmailFacebooktwittergoogle_pluslinkedinmail

En este artículo vamos a asomarnos a dos aspectos de Processing que necesitaremos conocer en varios sketchs, dado que se usan muy a menudo. No vamos a verlos a fondo, dado que, para ello, necesitaríamos varios artículos. El objetivo de este post es familiarizarnos un poco con estos dos elementos, de modo que, cuando, en otros sketches, profundicemos más, nos resulte más fácil.

Los dos aspectos que nos interesan ahora son:

  • El teclado: cómo reacciona Processing cuando se pulsa una tecla, cómo la identifica, y cómo puede programarse una respuesta a este evento.
  • La ventana de ejecución: ya sabemos que podemos establecer su tamaño, así cómo su color de fondo. Ahora aprenderemos a cambiar su tamaño dinámicamente. Recuerda que el método size(), que usamos para determinar el tamaño inicial de la ventana, sólo puede ejecutarse una vez, al principio del sketch (nunca en la sección draw()) y con valores numéricos fijos, no con variables.

EL SKETCH

Vamos a incluir un listado de un sketch, que hace lo siguiente:

  • Crea una ventana de ejecución de 200 x 200 píxeles, de fondo negro.
  • Hace que la ventana pueda reescalarse usando el ratón, cómo cualquier ventana del sistema operativo.
  • Nos permite reescalar suavemente la ventana, dentro de unos límites que establecemos, con las teclas de flechas (las teclas de cursor). Es necesario que esté enfocada la zona de ejecución (el lienzo de trabajo) de la ventana en la que se ejecuta el sketch (vamos, que hagas clic en la zona negra, para entendernos).

El listado es el siguiente:

La operativa del sketch es bastante intuitiva, una vez que ya vamos estando familiarizados con Processing. No obstante, vamos a centrarnos en los puntos clave que necesitamos conocer.

La instrucción siguiente es la que permite que la ventana sea reescalable con el ratón:

surface.setResizable(true);

El valor false haría que la ventana no fuera reescalable. Es el valor por defecto.

La función keyPressed() es un capturador de eventos (este, en concreto, captura la pulsación de una tecla). Una vez que ha capturado el evento lleva a cabo una función cómo respuesta. Ya tuvimos una toma de contacto con capturadores de eventos en forma de funciones en un artículo anterior sobre el ratón.

La variable keyCode es propia de Processing (no es una variable que pueda definir el usuario), del mismo modo que width y height, que ya conocemos de este artículo. Esta variable (keyCode) contiene un código relativo a la última tecla que se ha pulsado. Normalmente es un código que se identifica por un valor numérico de ASCII (por ejemplo, si pulsas la tecla A obtienes 65). La variable keyCode no distingue las mayúsculas de las minúsculas, así que obtienes 65 tanto si pulsas A cómo si pulsas a.

No obstante, determinadas teclas pueden reconocerse mediante unas constantes propias del lenguaje:

UP identifica la tecla de flecha arriba.

DOWN identifica la tecla de flecha abajo.

RIGHT identifica la tecla de flecha derecha.

LEFT identifica la tecla de flecha izquierda.

En la referencia de Processing puedes encontrar más constantes predefinidas que se refieren a ciertas teclas, así cómo más detalles acerca del uso del teclado. Pulsa este enlace.

     

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *