Processing: Diseo de Interfaces
Processing: Diseo 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?
Processing:
Es un lenguaje de programacin y un entorno
de desarrollo de software con una curva de
aprendizaje rpida, con el que se pueden
disear interfaces grficas para monitorear y
controlar distintas tareas. Es un buen
complemento para la tarjeta de desarrollo
Galileo.
Descarga gratuita ya que es un
Programa de Cdigo Abierto.
Se puede ejecutar en Linux,Mac OS
X y Windows.
Mas de 100 bibliotecas que extienden
las capacidades del software.
Se puede combinar programacin de
Processing con Java puro.
IDE
Processing
Ejecutar
Parar
Nuevo
Abrir Guardar
Exportar
Nombre del proyecto (sketch)
Cdigo
Seleccin de otros Lenguajes
de programacin
Nmero
de Lnea
rea de
mensajes
rea de texto
y depuracin
Comenzando
con Processing
El entorno de programacin de
Processing permite la creacin de
imgenes, animaciones y medios de
interaccin.
Comenzaremos con algunos conceptos
bsicos y figuras simples que mas
adelante nos permitirn disear
interfaces mas complejas.
Funciones Bsicas
Figuras Bsicas
Agregando color
Descarga: [Link]
Funciones
Bsicas
Processing, al igual que Arduino tiene dos funciones bsicas:
setup( )
draw( )
La funcin setup( ) se ejecuta una sola vez al inicio del programa.
La funcin draw( ) hace las veces de la funcin loop( ) de Arduino,
la cual se ejecuta repetitivamente mientras el programa se encuentre
ejecutndose.
Otras dos funciones bsicas que necesitaremos son:
size( )
background( )
size( )
background( )
size( )
Define la dimensin de la ventana
de la interfaz en pixeles. Esta
funcin debe ser la primer lnea de
cdigo dentro de la funcin setup( )
Sintaxis:
size(w, h)
w -> ancho de la ventana (int)
h -> alto de la ventana (int)
background( )
Establece el color usado para el fondo
de la ventana de la interfaz. El fondo
predeterminado es de color gris claro.
Sintaxis:
background(grayscale)
background(R,G,B)
background(rgb)
rgb -> Codificacin hexadecimal
#FFFFFF -> Blanco
Cdigo
Origen
(0,0)
[Link]
void setup(){
size(500,500);
}
Crea una ventana de
500x500 pixeles
void draw(){
}
Cdigo
[Link]
Crea una ventana de
500x500 pixeles
Fondo de la ventana
Color: Azul Intel
RGB: 0, 113, 197
void setup(){
size(500,500);
background(#0071c5);
}
void draw(){
}
Figuras
Bsicas
En Processing podemos comenzar nuestros dibujos con formas muy
bsicas como lneas, elipses y cuadrilteros con las siguientes funciones::
line( )
rect( )
ellipse( )
Dibuja una lnea en la pantalla
entre dos puntos indicados. La
lnea dibujada tiene un grosor de
1 pixel y color negro por defecto
Dibuja un rectngulo en la pantalla.
Las primeras dos coordenadas
corresponden a la esquina superior
izquierda, la tercera es el ancho y la
cuarta la altura.
Dibuja una elipse en la pantalla.
Las primeras dos coordenadas
corresponden al centro de la
elipse, la tercera y la cuarta al
ancho y la altura respectivamente.
Sintaxis:
Sintaxis:
Sintaxis:
line(x1,y1,x2,y2)
rect(x1,y1,w,h)
ellipse(x,y,w,h)
Cdigo
[Link]
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 diseado con la finalidad de proporcionar
una forma rpida para el diseo de prototipos de software, con el
cual podemos crear desde formas muy bsicas, hasta estructuras
visuales muy sofisticadas.
Al igual que Arduino, Processing nos proporciona un amplio
compendio de Referencia de su lenguaje, donde podemos encontrar
la explicacin, sintaxis y ejemplos de todas las funciones
implementadas nativamente en su IDE y de algunas bibliotecas que
tambin vienen incorporadas en l.
[Link]
Agregando
Color
noFill()
noStroke()
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
las figuras. El color por default de
las figuras es el blanco.
Configura el color de las lneas y de
los contornos de las figuras.
Configura el grosor de las lneas y
de los contornos de las figuras. El
valor es expresado en pixeles.
Sintaxis:
Sintaxis:
Sintaxis:
stroke(grayscale)
stroke(R,G,B)
stroke(rgb)
fill(grayscale)
fill(R,G,B)
fill(rgb)
Codificacin hexadecimal
strokeWeight(weight)
Cdigo
[Link]
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:
Mostrando
Texto
Adems de crear figuras, tambin 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 tamao, el
color, su posicin, la fuente tipogrfica, entre otros atributos.
text()
textSize()
textAlign()
fill()
text()
textSize()
textAlign()
Despliega texto en la pantalla.
Configura el tamao de la fuente.
Se expresa en pixeles.
Configura la alineacin del texto
mostrado en relacin con los
valores de las coordenadas
indicadas en la funcin text(): x, y.
Sintaxis:
Sintaxis:
text(texto,x,y)
text(num,x,y)
x,y -> coordenadas de la esquina
inferior izquierda del texto.
num -> int o float: nmero a mostrar
textSize(tamao)
Sintaxis:
textAlign(alignX)
alignX -> LEFT, CENTER, RIGHT
Cdigo
[Link]
void setup(){
size(500,500);
background(0,113,197);
text("Este es mi primer texto",0,500);
}
void draw(){
}
Cdigo
[Link]
void setup(){
size(500,500);
background(0,113,197);
text("Este es mi primer texto",100,100);
textSize(30);
text("Ahora el tamao 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, adems de proporcionarnos informacin sobre la posicin del puntero como su
posicin en X y Y en ciertas variables predefinidas. Con estas funciones y variables
podemos controlar un sinfn 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:
Accin
Descripcin
Clicked
Un botn del mouse es presionado y luego soltado
Pressed
Un botn del mouse es presionado y se mantiene as
Released
Un botn del mouse fue presionado, pero ahora se suelta
Moved
El mouse es movido sin que ningn botn sea presionado
Dragged
El mouse es movido con un botn presionado
Funciones
del Mouse
Las acciones del mouse puede llamar las siguientes funciones y ejecutar el cdigo que nosotros definamos dentro de ellas:
void mouseClicked() {
}
void mousePressed() {
}
void mouseReleased() {
}
void mouseMoved() {
}
void mouseDragged(){
}
Variables
Relacionadas
Tenemos a nuestra disposicin dos variables que Processing nos proporciona en cualquier momento
que las necesitemos a lo largo de nuestro programa y dentro de cualquier funcin, las cuales nos
proporcionan mas informacin acerca de que es lo que el mouse est haciendo dentro de nuestro
programa.
mouseX
Nos proporciona la posicin X del mouse en la ventana
mouseY
Nos proporciona la posicin Y del mouse en la ventana
mousePressed
Variable booleana, TRUE / FALSE
mouseButton
Botn presionado, LEFT, RIGHT, CENTER
void setup() {
size(500, 500);
background(0);
textAlign(CENTER);
textSize(24);
fill(255);
text("El mouse no est haciendo nada",
width/2, height/2);
}
void draw() {
}
void mousePressed() {
background(100, 100, 0);
text("El mouse fue presionado",
width/2, height/2);
if ( mouseButton == LEFT) {
text("y fue el botn izquierdo",
width/2, height/2 + 40);
}
if (mouseButton == RIGHT) {
text("y fue el boton derecho",
width/2, height/2 + 40);
}
}
Cdigo
[Link]
void mouseReleased() {
background(100, 0, 100);
text("el botn fue soltado",
width/2, height/2);
}
void mouseMoved() {
background(150, 10, 70);
text("El mouse fue movido",
width/2, height/2);
}
void mouseDragged() {
background(10, 70, 100);
text("Se est arrastrando el mouse",
width/2, height/2);
}
Reto:
Al dar click derecho
Al soltar
el botn
Al soltar
el botn
Al dar click izquierdo
Eventos
del Teclado
Al igual que los eventos de mouse, es posible tambin detectar distintos eventos del teclado,
lo que nos puede permitir tener mayor interaccin con la tarjeta Galileo. Algunos de las
acciones o eventos que podemos detectar es la presin de alguna tecla, determinar la tecla
presionada, discriminar entre letras maysculas o minsculas, entre otras cosas.
Tecla
Presionada
Processing nos proporciona una funcin que es llamada cada vez que una
tecla es presionada:
void keyPressed(){
}
Dentro de esta funcin podemos colocar todo el cdigo que queremos que
se ejecute cada vez cualquier tecla sea presionada, sin embargo an no
distinguimos especficamente cul tecla se presion.
Cdigo
[Link]
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 funcin keyPressed() es llamada. Adems, la
informacin acerca de cul es la tecla presionada es almacenada en una variable llamada key.
void setup(){
}
void draw(){
}
void keyPressed(){
println(key);
}
Cdigo
int r,g,b;
void setup(){
size(600,600);
r = 0;
g = 0;
b = 0;
}
void draw(){
background(r,g,b);
}
void keyPressed(){
switch (key){
case 'r':
r=255;
g=0;
b=0;
break;
case 'g':
r=0;
g=255;
b=0;
break;
case 'b':
r=0;
g=0;
b=255;
break;
default:
break;
}
}
[Link]
Detectando
otras Teclas
En el primer ejemplo de esta seccin, 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, cmo podemos escribir una tecla de estas
dentro de las comillas?
Para esto, Processing tambin tiene a nuestra disposicin la variable keyCode la cual almacena el
nmero ASCII asociado a cada una de estas teclas:
38
void keyPressed(){
println(keyCode);
}
37
39
40
Cdigo
int r,g,b;
void setup(){
size(600,600);
r = 0;
g = 0;
b = 0;
}
void draw(){
background(r,g,b);
}
void keyPressed(){
switch (keyCode){
case 37:
r=255;
g=0;
Reemplaza con: LEFT
b=255;
break;
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;
}
}
[Link]
Comunicando
Galileo con
Processing
Para esta primer interaccin entre ambas plataformas Hardware/Software, enviaremos datos
utilizando comunicacin serial, desde la tarjeta Galileo hasta la interfaz de Processing, es decir,
realizaremos en tipo de hola mundo.
Lo primero que necesitamos sabes es cmo leer informacin del puerto serial.
Cmo 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:
Cdigo
[Link]
import [Link].*;
Serial miPuerto;
void setup(){
miPuerto = new Serial(this,"COM5",9600);
}
void draw(){
if ([Link]() > 0){
int dato = [Link]();
println(dato);
}
void draw(){
}
}
void serialEvent(Serial miPuerto){
int dato = [Link]();
println(dato);
}
Comunicando
Galileo con
Processing
Para este primer ejemplo lo que haremos ser enviar la informacin del estado de un push
button conectado a la tarjeta Galileo, a una interfaz diseada en Processing:
Esquemtico
NOTA: Aunque este es el diagrama de
conexin para este ejercicio, usaremos
el botn A del Joystick:
Galileo
Cdigo
[Link]
void setup() {
pinMode(2, INPUT); // Configuracin del pin 2 como entrada
[Link](9600); //Inicializacin de comunicacin serial a 9600 baudios
}
void loop() {
// Transfiere a travs del puerto serial el estado digital del pin 2
[Link](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 diseada en Processing para controlar
una tarea, que para este caso se controlar el encendido y apagado de un LED.
Para este ejercicio necesitamos saber cmo escribir al puerto serial, para que los datos sean
transmitidos haca la Galileo.
Comunicando
Processing
con Galileo
La interfaz de Processing contar con un botn 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:
Galileo
Cdigo
LED_on_off.ino
int byteRecibido=0;
const int led = 13;
//Variable que almacenar el byte recibido
//Pin al que se conectar el LED
void setup(){
[Link](9600);
//Inicializacin 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 algn dato por leer en el buffer del puerto serial
if ([Link]() > 0){
byteRecibido=[Link](); //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
}
}
Reto:
Al dar click derecho
Al soltar
el botn
Al soltar
el botn
Al dar click izquierdo
Para visitar un tutorial completo
sobre este ejercicio da click aqu:
Tutorial: Comunicando Galileo con
Processing - PARTE 2
Este tutorial es liberado bajo la licencia:
Parte de su contenido fue obtenido de [Link]
