Las variables de sistema son aquellas que nos proporcionan información importante de nuestra ventana, con ellas podemos obtener valores como la posición del mouse, si un boton del mouse o una tecla se encuentra presionada y cual de ellas es. Toda esta información nos sera útil para hacer mas interactivos nuestros programas.

En el core (nucleo) de Processing existen muchas variables del sistema, a continuación se listan las mas importantes o en mi caso las que mas he utilizado.

  • width: Ancho de la ventana en pixeles definida previamente con size()
  • height: Altura de la ventana en pixeles definida previamente con size()
  • frameCount: Devuelve el numero de cuadro que se encuentra desde la ejecución de lo programa
  • frameRate: El numero de cuadros por segundo al que se encuentra trabajando el programa
  • key: Devuelve el valor ascii de la ultima tecla presionada
  • keyCode: Regresa el código de una tecla especial la cual esta codificada, su valor puede ser UP, DOWN, LEFT, RIGHT, ALT, CONTROL, SHIFT
  • keyPressed: Nos indica con verdadero o falso si una tecla se encuentra presionada
  • mousePressed: Nos indica con verdadero o falso si un boton del mouse se encuentra presionado
  • mouseButton: Nos indica que boton del mouse esta presionado sus valores pueden ser LEFT, RIGHT, CENTER
  • mouseX: Devuelve la posición x del raton en el sistema de coordenadas
  • mouseY: Devuelve la posición y del raton en el sistema de coordenadas

Ahora veremos un pequeño ejemplo utilizando algunas de estas variables:

int s=50;

void setup() {
  size( 600, 400 );
  frameRate(60);
  smooth();

  rectMode(CENTER);
}

void draw() {
  println(frameCount);
  background(map(mouseX, 0, width, 0, 255));
  fill(map(mouseY, 0, height, 0, 255));

  if (mousePressed) {
    if (mouseX>=width/2) {
      ellipse(mouseX, mouseY, s, s);
    }
    else {
      rect(mouseX, mouseY, s, s);
    }
  }

  if (keyPressed) {
    if (key=='p' || key=='P') {
      s++;
    }
    else if (key=='l' || key=='L') {
      s--;
    }
  }
}

Como verán es un programa muy sencillo, su funcionamiento es simple, creamos una variable s que nos indicara el tamaño de las figuras a dibujar; dentro del setup() definimos el tamaño de nuestra ventana, el numero de cuadros por segundo y definimos que los rectángulos los dibujara desde el centro; en el draw() imprima el numero del cuadro actual, y se define el color de fondo en base a la posición del mouse en X con respecto al ancho de ventana, se usa la función map() para mantener el rango dentro de un byte, el color de fondo de las figuras se define igual que el del fondo de ventana solo que con respecto a la posición Y del mouse. Después se verifica si se encuentra presionado algún boton del mouse con la variable mousePressed dentro de un if, si es así, dibujará un rectángulo en la posición actual del mouse si este se encuentra en la mitad derecha de la ventana, en caso contrario dibujara un circulo. Por ultimo verificamos si una tecla es presionada con keyPressed dentro de un if, cambiaremos el tamaño de la figura dependiendo la tecla presionada ya sea P o L que verificamos comparando key.

Como pueden ver con este ejemplo, estas variables nos son de mucha ayuda, con ellas podemos modificar el comportamiento del programa en base a las acciones del usuario.

Para el proximo tutorial veremos lo que son los eventos y como usarlos en nuestros programas que cada ves se van haciendo mas complejos.

Entradas relacionadas: