Processing: Diseño de Interfaces
Processing: Diseño de Interfaces
Qué es Processing?
Comenzando con Processing
Mostrando Texto
Eventos del Mouse y del Teclado
Comunicando Galileo con Processing
Comunicando Processing con Galileo
Qué es
Processing?
Descarga gratuita ya que es un
1 Programa de Código Abierto.
Processing: Se puede ejecutar en Linux,Mac OS X
2 y Windows.
Es un lenguaje de programación y un entorno
de desarrollo de software con una curva de Mas de 100 bibliotecas que extienden
aprendizaje rápida, con el que se pueden
3 las capacidades del software.
diseñar interfaces gráficas para monitorear y
controlar distintas tareas. Es un buen Se puede combinar programación de
complemento para la tarjeta de desarrollo
4 Processing con Java puro.
Galileo.
Ejecutar Parar Nuevo Abrir Guardar Exportar
Processing
IDE Nombre del proyecto (sketch)
Código
Selección de otros Lenguajes
de programación
Número
de Línea
Área de
mensajes Área de texto
y depuración
Comenzando
con Processing
El entorno de programación de
Processing permite la creación de Funciones Básicas
imágenes, animaciones y medios de
interacción.
Figuras Básicas
Comenzaremos con algunos conceptos
básicos y figuras simples que mas Agregando color
adelante nos permitirán diseñar
interfaces mas complejas.
Descarga: http://processing.org/
Funciones
Básicas
Processing, al igual que Arduino tiene dos funciones básicas:
• setup( )
• draw( )
La función «setup( )» se ejecuta una sola vez al inicio del programa.
La función «draw( )» hace las veces de la función «loop( )» de Arduino,
la cual se ejecuta repetitivamente mientras el programa se encuentre
ejecutándose.
Otras dos funciones básicas que necesitaremos son:
• size( )
• background( )
size( )
background( )
size( )
background( )
Define la dimensión de la ventana
de la interfaz en pixeles. Esta Establece el color usado para el fondo
función debe ser la primer línea de de la ventana de la interfaz. El fondo
código dentro de la función setup( predeterminado es de color gris claro.
)
Sintaxis:
Sintaxis:
background(grayscale)
size(w, h) background(R,G,B)
background(rgb) rgb -> Codificación hexadecimal
w -> ancho de la ventana (int)
#FFFFFF -> Blanco
h -> alto de la ventana (int)
!
Orige
n (0,0)
Código
base.pde
void setup(){
size(500,500);
}
Crea una ventana de void draw(){
500x500 pixeles }
Código
base2.pde
Crea una ventana de
500x500 pixeles
void setup(){
size(500,500);
background(#0071c5);
}
void draw(){
Fondo de la ventana }
Color: Azul “Intel”
RGB: 0, 113, 197
Figuras
Básicas
En Processing podemos comenzar nuestros dibujos con formas muy
básicas como líneas, elipses y cuadriláteros con las siguientes funciones::
line( ) rect( ) ellipse( )
Dibuja una línea en la pantalla Dibuja un rectángulo en la pantalla. Dibuja una elipse en la pantalla.
entre dos puntos indicados. La Las primeras dos coordenadas Las primeras dos coordenadas
línea dibujada tiene un grosor de corresponden a la esquina superior corresponden al centro de la
1 pixel y color negro por defecto izquierda, la tercera es el ancho y la elipse, la tercera y la cuarta al
cuarta la altura. ancho y la altura respectivamente.
Sintaxis:
Sintaxis: Sintaxis:
line(x1,y1,x2,y2)
rect(x1,y1,w,h) ellipse(x,y,w,h)
Código
shapes.pde
void setup(){
size(500,500);
background(#0071c5);
}
void draw(){
line(50,50,200,200);
rect(300,200,100,100);
ellipse(100,400,100,100);
}
Processing
Language
Reference
El lenguaje Processing es diseñado con la finalidad de proporcionar
una forma rápida para el diseño de prototipos de software, con el
cual podemos crear desde formas muy básicas, hasta estructuras
visuales muy sofisticadas.
Al igual que Arduino, Processing nos proporciona un amplio
compendio de Referencia de su lenguaje, donde podemos encontrar
la explicación, sintaxis y ejemplos de todas las funciones
implementadas nativamente en su IDE y de algunas bibliotecas que
también vienen incorporadas en él.
https://www.processing.org/reference/
noFill() Agregando
noStroke()
Color
Podemos especificar el color del relleno de las figuras y de su contorno, así
como el grosor de éste:
fill( ) stroke( ) strokeWeight( )
Configura el color del relleno de Configura el color de las líneas y de Configura el grosor de las líneas y
las figuras. El color por default de los contornos de las figuras. de los contornos de las figuras. El
las figuras es el blanco. valor es expresado en pixeles.
Sintaxis:
Sintaxis: Sintaxis:
stroke(grayscale)
fill(grayscale) stroke(R,G,B) strokeWeight(weight)
fill(R,G,B) stroke(rgb)
fill(rgb)
Codificación hexadecimal
Código
color.pde
void setup(){
size(500,500);
background(#0071c5);
}
void draw(){
fill(255,0,0);
stroke(0,255,0);
strokeWeight(3);
line(50,50,200,200);
stroke(255,255,255);
rect(300,200,100,100);
fill(#009383);
ellipse(100,400,100,100);
}
Reto:
Figuras
processing
Formas
Vertex
Podemos agregar figuras si conocemos sus vértices y processing unirá cada
punto con líneas.
beginShape( ) vertex() endShape()
Subrutina para inicio de figura Vértices de la figura, no hay limites. Fin de subrutina de figura
Sintaxis: Sintaxis: Sintaxis:
beginShape(); vertex(X,Y); endShape();
void setup(){
size(400,400);
background(0,0,0); if(i<255){
Código
smooth(); fill(0,0,i);
i++;
vertex.pde
}
void draw(){ }
fill(100,10,10); else
beginShape(); i=0;
vertex(70,30); triangle(100,70,100,90,130,90);
vertex(110,50); triangle(180,70,150,90,180,90);
vertex(170,50); fill(25,25,25);
vertex(210,30); beginShape();
endShape();
vertex(200, 60); vertex(110,120);
fill(255,255,255);
vertex(190, 130); vertex(170,120);
line(120,120,120,160);
vertex(160, 170); vertex(170,140);
line(130,120,130,160);
vertex(120, 170); vertex(160,160);
line(140,120,140,160);
vertex(90,130); vertex(120, 160);
line(150,120,150,160);
vertex(80,60); vertex(110, 140);
line(160,120,160,160);
endShape(); vertex(110, 120);
}
Código
vertex.pde
Mostrando
Texto
Además de crear figuras, también podemos agregar texto a nuestras interfaces, lo cual nos
permitirá agregar leyendas, instrucciones, sugerencias, comentarios, etc.
Igualmente podemos darle formato a este texto, como por ejemplo, modificar el tamaño, el
color, su posición, la fuente tipográfica, entre otros atributos.
text()
textSize()
fill()
textAlign()
text() textSize() textAlign()
Despliega texto en la pantalla. Configura el tamaño de la fuente. Configura la alineación del texto
Se expresa en pixeles. mostrado en relación con los
Sintaxis: valores de las coordenadas
Sintaxis: indicadas en la función text(): x, y.
text(texto,x,y)
text(num,x,y) textSize(tamaño) Sintaxis:
x,y -> coordenadas de la esquina textAlign(alignX)
inferior izquierda del texto.
num -> int o float: número a mostrar alignX -> LEFT, CENTER, RIGHT
Código
texto1.pde
void setup(){
size(500,500);
background(0,113,197);
text("Este es mi primer texto",0,500);
}
void draw(){
}
Código
texto2.pde
void setup(){
size(500,500);
background(0,113,197);
text("Este es mi primer texto",100,100);
textSize(30);
text("Ahora el tamaño es de 30",20,150);
fill(255,255,0);
text("Y ahora con color",50,200);
textAlign(CENTER);
text("Este texto esta centrado",width/2,width/2);
}
void draw(){
}
Eventos
del Mouse
Processing nos proporciona algunas funciones para poder acceder a distintos eventos del
mouse, además de proporcionarnos información sobre la posición del puntero como su
posición en X y Y en ciertas variables predefinidas. Con estas funciones y variables podemos
controlar un sinfín de aplicaciones, como por ejemplo, dibujar algo cuando demos un click
en cierto lugar de la ventana.
Acciones
del Mouse
Es importante definir que acciones del mouse puede detectar Processing:
Acción Descripción
Clicked Un botón del mouse es presionado y luego soltado
Pressed Un botón del mouse es presionado y se mantiene así
Released Un botón del mouse fue presionado, pero ahora se suelta
Moved El mouse es movido sin que ningún botón sea presionado
Dragged El mouse es movido con un botón presionado
Variables
Relacionadas
Tenemos a nuestra disposición dos variables que Processing nos proporciona en cualquier momento que
las necesitemos a lo largo de nuestro programa y dentro de cualquier función, las cuales nos
proporcionan mas información acerca de que es lo que el mouse está haciendo dentro de nuestro
programa.
• mouseX Nos proporciona la posición X del mouse en la ventana
• mouseY Nos proporciona la posición Y del mouse en la ventana
• mousePressed Variable booleana, TRUE / FALSE
• mouseButton Botón presionado, LEFT, RIGHT, CENTER
Código
mouse.pde
void setup(){
size(500,500);
background(0,0,0);
}
void draw(){
line(0,0,mouseX,mouseY);
stroke(0,255,0);
}
Funciones
del Mouse
Las acciones del mouse puede llamar las siguientes funciones y ejecutar el código que nosotros definamos dentro de ellas:
void mouseClicked() {
}
void mousePressed() {
}
void mouseReleased() {
}
void mouseMoved() {
}
void mouseDragged(){
}
Código
int i=250;
void setup(){ mouse.pde
size(400,400);
background(50,50,50);
smooth();
}
void draw(){
noStroke();
fill(0,i,i);
ellipse(100,100,200,200);
}
void mouseClicked(){
if(mouseButton == LEFT&&mouseX>0&&mouseX<200&&mouseY>0&&mouseY<200){
i=80;
}
else
i=250;
}
void setup() {
size(500, 500);
background(0);
textAlign(CENTER);
Código
textSize(24);
fill(255);
mouse.pde
text("El mouse no está haciendo nada",
width/2, height/2);
} void mouseReleased() {
background(100, 0, 100);
void draw() { text("el botón fue soltado",
} width/2, height/2);
}
void mousePressed() {
background(100, 100, 0); void mouseMoved() {
text("El mouse fue presionado", background(150, 10, 70);
width/2, height/2); text("El mouse fue movido",
if ( mouseButton == LEFT) { width/2, height/2);
text("y fue el botón izquierdo", }
width/2, height/2 + 40);
} void mouseDragged() {
if (mouseButton == RIGHT) { background(10, 70, 100);
text("y fue el boton derecho", text("Se está arrastrando el mouse",
width/2, height/2 + 40); width/2, height/2);
} }
}
Reto:
Al dar click derecho
Al soltar
el botón
Al soltar
el botón
Al dar click
izquierdo
Eventos
del Teclado
Al igual que los eventos de mouse, es posible también detectar distintos eventos del teclado,
lo que nos puede permitir tener mayor interacción con la tarjeta Galileo. Algunos de las
acciones o eventos que podemos detectar es la presión de alguna tecla, determinar la tecla
presionada, discriminar entre letras mayúsculas o minúsculas, entre otras cosas.
Tecla
Presionada
Processing nos proporciona una función que es llamada cada vez que una
tecla es presionada:
void keyPressed(){
}
Dentro de esta función podemos colocar todo el código que queremos que
se ejecute cada vez cualquier tecla sea presionada, sin embargo aún no
distinguimos específicamente cuál tecla se presionó.
Código
anykey.pde
int r,g,b;
void setup(){
size(600,600);
r = 0;
g = 0;
b = 0;
}
void draw(){
background(r,g,b);
}
void keyPressed(){
r = int(random(256));
g = int(random(256));
b = int(random(256));
}
Detectando
la Tecla
Presionada
Como ya vimos, cada que presionamos una tecla, la función keyPressed() es llamada. Además, la
información acerca de ´cuál es la tecla presionada es almacenada en una variable llamada «key».
void setup(){
}
void draw(){
}
void keyPressed(){
println(key);
}
int r,g,b; Código
void setup(){
size(600,600); void keyPressed(){
rgbkey.pde
r = 0; switch (key){
g = 0; case 'r':
b = 0; r=255;
} g=0;
b=0;
void draw(){ break;
background(r,g,b); case 'g':
} r=0;
g=255;
b=0;
break;
case 'b':
r=0;
g=0;
b=255;
break;
default:
break;
}
}
Detectando
otras Teclas
En el primer ejemplo de esta sección, pudimos darnos cuenta que hay algunas teclas que no pudimos
identificar, y simplemente se imprime un signo ?. Ahora, en el segundo ejemplo imaginemos que
queremos detectar cuando las flechas sean presionadas, ¿cómo podemos escribir una tecla de estas
dentro de las comillas?
Para esto, Processing también tiene a nuestra disposición la variable «keyCode» la cual almacena el
número ASCII asociado a cada una de estas teclas:
38
37
void keyPressed(){
println(keyCode);
}
39
40
int r,g,b; Código
void setup(){
size(600,600); void keyPressed(){
arrows.pde
r = 0; switch (keyCode){
g = 0; case 37:
b = 0; r=255;
} g=0; Reemplaza con: LEFT
b=255;
void draw(){ break;
background(r,g,b); case 38:
} r=255;
g=255; Reemplaza con UP
b=0;
break;
case 39:
r=0;
g=255; Reemplaza con RIGHT
b=255;
break;
default:
break;
}
}
Comunicando
Galileo con
Processing
Para esta primer interacción entre ambas plataformas Hardware/Software, enviaremos datos utilizando
comunicación serial, desde la tarjeta Galileo hasta la interfaz de Processing, es decir, realizaremos en
tipo de “hola mundo”.
Lo primero que necesitamos sabes es cómo leer información del puerto serial.
Cómo leer
Datos Seriales
Lo primero es importar la biblioteca “serial” para tener acceso al
puerto serial de la computadora para enviar y transmitir datos entre
Processing y hardware externo:
Código
SerialRead.pde
import processing.serial.*;
Serial miPuerto;
!
void setup(){
miPuerto = new Serial(this,"COM5",9600);
}
void draw(){
if (miPuerto.available() > 0){
int dato = miPuerto.read();
println(dato);
}
} void draw(){
}
void serialEvent(Serial miPuerto){
int dato = miPuerto.read();
println(dato);
}
Comunicando
Galileo con
Processing
Para este primer ejemplo lo que haremos será enviar la información del estado de un push
button conectado a la tarjeta Galileo, a una interfaz diseñada en Processing:
Esquemático
NOTA: Aunque este es el diagrama de
conexión para este ejercicio, usaremos el
botón A del Joystick:
Galileo Código
OneLed.ino
void setup() {
pinMode(2, INPUT); // Configuración del pin 2 como entrada
Serial.begin(9600); //Inicialización de comunicación serial a 9600 baudios
}
void loop() {
// Transfiere a través del puerto serial el estado digital del pin 2
Serial.print(digitalRead(2));
delay(100); //retardo de 100 milisegundos
}
Reto:
Para visitar un tutorial completo sobre este ejercicio da click aquí:
Tutorial: Comunicando Galileo con Processing - PARTE 1
Comunicando
Processing
con Galileo
Ahora enviaremos datos a la tarjeta Galileo desde una interfaz diseñada en Processing para controlar
una tarea, que para este caso se controlará el encendido y apagado de un LED.
Para este ejercicio necesitamos saber cómo escribir al puerto serial, para que los datos sean
transmitidos hacía la Galileo.
Processing Código
LED_on_off.ino
import processing.serial.*;
Serial port; // Create object from Serial class
int i=0;
void setup() {
size(700, 700);
smooth();
void keyPressed(){
port = new Serial(this,"COM6", 9600);
switch (key){
background(250);
case 'A':
fill(0);
port.write('A');
rect(0,0,400,300);
break;
}
case 'B':
void draw() {
port.write('B');
break;
if (port.available() > 0){
default:
int dato = port.read();
break;
println(dato);
}
}
}
}
Galileo Código
LED_on_off.ino
int byteRecibido=0; //Variable que almacenará el byte recibido
const int led = 13; //Pin al que se conectará el LED
void setup(){
Serial.begin(9600); //Inicialización del puerto serial a 9600 baudios
pinMode(led, OUTPUT); //Se declara el pin 13 como salida
digitalWrite(led, LOW);//Apagar el LED inicialmente
}
void loop(){
//Se comprueba si hay algún dato por leer en el buffer del puerto serial
if (Serial.available() > 0){
byteRecibido=Serial.read(); //Lectura del dato recibido
if (byteRecibido==‘A’) //Comprobar que el dato recibido sea una "A"
digitalWrite(led, HIGH); //Encender el LED
else if (byteRecibido==‘B’)
digitalWrite(led, LOW); //Apagar el LED
}
}
Comunicando
Processing con
Galileo
La interfaz de Processing contará con un botón virtual, el cual al dar click derecho sobre éste,
transmitirá serialmente un dato que le informará a la tarjeta Galileo que deberá de encender un LED
y si se da click izquierdo, deberá apagarlo:
Reto:
Al dar click derecho
Al soltar
el botón
Al soltar
el botón
Al dar click
izquierdo
Para visitar un tutorial completo
sobre este ejercicio da click aquí:
Tutorial: Comunicando Galileo con
Processing - PARTE 2
Galileo Código
LED_on_off.ino
int dato; //Variable que almacenará el CAD
void setup(){
Serial.begin(9600); //Inicialización del puerto serial a 9600 baudios
pinMode(led, OUTPUT); //Se declara el pin 13 como salida
digitalWrite(led, LOW);//Apagar el LED inicialmente
}
void loop(){
dato=digitalRead(0); //lectura del CAD
Serial.println(dato); //envió de dato
delay(100);
}
}
Código
SerialRead.pde
import processing.serial.*;
Serial port;
!
void setup(){
port = new Serial(this,"COM5",9600);
port.bufferUntil('\n');
Leer hasta enter
}
void draw(){
background(0,dato,0);
}
void draw(){
}
void serialEvent(Serial port){
dato=float(port.readStringUntil('\n'))/4;
}
Galileo Código
LED_on_off.ino
float dato;
int i=0;
void setup() {
size(440, 440);
smooth();
port = new Serial(this,"COM6", 9600);
port.bufferUntil('\n');
background(250);
}
void draw() {
line(i,0,i,dato);
}
void serialEvent(Serial port){
dato=float(port.readStringUntil('\n'))/4;
if(i<440)
i++;
else
i=0;
}
Este tutorial es liberado bajo la licencia:
! Parte de su contenido fue obtenido de sparkfun.com
