Como hacer un Slider Button en Processing

Slider Button En Proccesing

Processing no cuenta de forma nativa con una instrucción que permita asignar de forma directa por medio del teclado un valor numérico a las variables que se estén empleando en un programa.

Processing esta enfocado a gráficos e interacción con ellos. En esta publicación se describe como hacer un botón deslizante para asignar variables numéricas a variables que se empleen en un programa.

Botón Deslizante Básico

En este primer ejemplo se muestra el fundamento de botón deslizante que depende de la posición de ratón en el eje X.

El botón es un rectángulo realizado por la instrucción rect(PosDes01,10,5,10) donde la posición en X esta dada por PosDes01.

La posición cambia cuando el ratón es presionado y la variable tomara el valor del ratón en X por medio de mouseX. Esto se hace con las siguientes instrucciones

 if (mousePressed) {

    PosDes01=mouseX;

  }

Código de ejemplo

int PosDes01;

void setup() {

  size(400, 100);

  PosDes01=0;

}

void draw() {

  background(255);

  if (mousePressed) {

    PosDes01=mouseX;

  }

  line(0, 15, 600, 15);

  fill(0);

  rect(PosDes01, 10, 5, 10);

  text("Posición = "+PosDes01,10, 50);

}

Boton deslizante y la funcion map

 

Con la funcion map() podemos adaptar el boton deslizante a un rango deseado, por ejemplo de 0 a 180 para simular la inclinacion de un objeto o de 0 a 5 para representar el valor de voltaje leido desde una tarjeta microcontrolada como Pinguino o Arduino.

Codigo de ejemplo 

int PosDes01;
float Voltaje, Angulo;
void setup() {
  size(400, 100);
  PosDes01=0;
}
void draw() {
  background(255);
  if (mousePressed) {
    if (mouseX<=0) {
      PosDes01=0;
    } else if (mouseX>=width) {
      PosDes01=width;
    } else {
      PosDes01=mouseX;
    }
  }
  line(0, 15, width, 15);
  fill(0);
  rect(PosDes01, 10, 5, 10);
  Angulo=map(PosDes01, 0, width, 0, 180);
  Voltaje=map(PosDes01, 0, width, 0, 5);
  text("Posición = "+PosDes01, 10, 50);
  text("Angulo = "+Angulo, 10, 70);
  text("Voltaje = "+Voltaje, 10, 90);
}