PRONTUARIO DE PROCESSING
NOTAS: Este documento lo puedes descargar, copiar, imprimir y distribuir de forma libre.
1.-Arduino Castilla Education Project es iniciativa del Equipo Arduino, con David Cuartielles a la cabeza, el
Centro Regional de Formacin del Profesorado de Castilla-La Mancha y Fundacin Telefnica.
2.-Este documento ha sido elaborado por profesores del Departamento de Tecnologa del I.E.S. Sta. M de
Alarcos de Ciudad Real, Espaa, especialmente dirigido a profesores y alumnos de Enseanza
Secundaria.
3.-Puedes acceder a la pgina del proyecto pulsando sobre el logotipo de la cabecera y a la referencia
completa, desde el la aplicacin Help -> Reference.
Plantilla de Processing
// Estos smbolos permiten escribir comentarios de una lnea
// Declaracin de variables globales (para todo el programa)
void setup() {
// Este bloque slo se ejecuta al cargar el programa
}
void draw() {
// Este bloque se ejecuta repetidamente
// Declaracin de variables locales (de la funcin)
}
Tabla de funciones
Funcin
GRAFICOS
Descripcin
Ejemplo
Coordenadas cartesianas: (X,Y)
X: horizontal
Y: vertical
(0,0) -> esquina Sup. Izqda.
// Coordenada absoluta
(10,10)
// indica la posicin de ratn
(mouseX,mouseY)
size(tamaoX,tamaoY);
Tamao de la pantalla:
tamaoX: horizontal
tamaoY: vertical
// Pantalla de 300x300
size(300,300);
stroke(R,G,B);
Color para dibujar en RGB:
R: rojo (Red)
G: verde (Green)
B: azul (Blue)
Los nmeros de 0-255, siendo:
0 -> Nada de intensidad
255 -> Intensidad mxima
// Dibujo en rojo
stroke(255,0,0);
Dibujo de lnea de (Xi,Yi) a (Xf,Yf):
Xi: valor horizontal inicial
Yi: valor vertical inicial
Xf: valor horizontal final
Yf: valor vertical final
// horizontal (10,10)-> (30,10)
line(10,10,30,10);
line(Xi,Yi,Xf,Yi);
Departamento de Tecnologa I.E.S. Sta. M de Alarcos
// Dibujo en amarillo
stroke(255,255,0);
Pgina 1
Funcin
fill(R,G,B);
Descripcin
Ejemplo
Relleno de color RGB:
R: rojo (Red)
G: verde (Green)
B: azul (Blue)
Los nmeros de 0-255, siendo:
0 -> Nada de intensidad
255 -> Intensidad mxima
// Relleno verde
fill(0,255,0);
ellipse(centroX,centroY,
tamaoX,tamaoY);
Dibuja crculos y elipses:
centroX: horizontal del centro
centroY: vertical del centro
tamaoX: semieje horizontal
tamaoY: semieje vertical
si tamaoX=tamaoY ->crculo
// Dibujo crculo radio=10 en
// (20,20)
ellipse(20,20,10,10);
arc(cX,cY,tX,tY,angi,angf);
Dibuja arcos circulares, elpticos y crculos:
cX->X del centro
cY->Y del centro
tX ->anchura
tY ->altura
angi->ngulo inicial (en radianes)
angf->ngulo final (en radianes)
//Dibujo crculo como anterior
arc(20,20,10,10,0,2*PI);
rect(Xi,Yi,Xf,Yf);
Dibuja rectngulos:
Xi->horizontal inicial
Yi->vertical inicial
Xf->horizontal final
Yf->vertical final
radio-> radio de los bordes
Rai->radio esquina arriba izqda
Rai->radio esquina arriba dcha
Rai->radio esquina bajo izqda
Rai->radio esquina bajo dcha
// cuadrado de 10 de lado en
// (20,20)
rect(20,20,30,30);
triangle(x1,y1,x2,y2,x3,y3);
Dibuja tringulos:
Coordenadas x,y de cada vrtice 1,
2y3
// tringulo tipo escuadra de lado
// 20 en (30,10)
triangle(30,10,30,30,50,30);
// Hay que utilizar las 3
PTimage nvar;
nvar=loadImage([Link]);
image(X,Y,nvar);
Carga de imgenes:
Para que se pueda cargar una imagen, esta
debe estar en la carpeta Data del
programa.
nvar -> nombre de la variable
[Link] -> nombre del fichero
X,Y -> coordenada sup izda de la
foto en la pantalla
// Carga una imagen
PImage imagen;
void setup(){
imagen =
loadImage("[Link]");
}
void draw(){
image(imagen,0,0);
}
text(nvar,X,Y);
Escribe texto:
nvar: nombre de la variable con el
texto a visualizar. Hay que
declararla como String
X,Y: coordenadas iniciales de la
cadena de caracteres
Si quiero convertir un nmero a caracteres
debo emplear:
[Link](numero)
// Escribo Hola en (10,10)
String palabra = Hola;
text(palabra, 10,10):
Para animar se pinta un fondo de pantalla:
Gris -> 0 (negro)-255 (blanco)
transpar:
0 -> transparente
255 -> opaco
R: rojo (Red)
// Fondo blanco
background(255);
rect(Xi,Yi,Xf,Yf,radio);
rect(Xi,Yi,Xf,Yf,Rai,Rad,Rbi,Rb
d);
background(gris)
background(gris,transpar)
background(R,G,B,transpar)
Departamento de Tecnologa I.E.S. Sta. M de Alarcos
// Relleno morado
fill(255,0,255);
//Lo mismo de
bordes //redondeados radio 3
rect(20,20,30,30,3);
//Escribo el da del mes
int dia = day();
String tdia = [Link](dia);
text(tdia,10,10);
// Fondo gris con trazo de ratn
background(200,0.0001);
Pgina 2
G: verde (Green)
B: azul (Blue)
Los nmeros de 0-255, siendo:
0 -> Nada de intensidad
255 -> Intensidad mxima
Funcin
GESTIN DEL TIEMPO
int nvar=year();
int nvar=month();
int nvar=day();
int nvar=hour();
int nvar=minute();
int nvar=second();
int nvar=millis();
DECISIONES Y
CONDICIONES
Descripcin
Ejemplo
Con estas funciones podemos saber el ao,
mes, da, hora, minuto, segundo... As como
duracin, retrasos...
Carga en la variable nvar el ao
Carga en la variable nvar el mes
Carga en la variable nvar el da
Carga en la variable nvar la hora
Carga en la variable nvar el minuto
Carga en la variable nvar el segundo
Carga en la variable nvar el milisegundo
*ver text()
En determinadas condiciones hay que hacer
o dejar de hacer el ciclo normal de
repeticiones
if(condicion) {
// si se cumple
} else {
// si no se cumple
}
No es imprescindible else
Si se cumple la condicin,
entonces se hace lo que hay entre
las llaves de despus de if
si no se cumple, lo que se ponga
despus de else
Los operadores para la if:
== igual, != distinto
> mayor, < menor
>= mayor o igual, <= menor o igual
&& y, || o
// Si i=3 => escribe tonto
if(i==3) {
text(tonto, 10,10);
}
for( cond_ini; cond_d; modif) {
// repeticiones si cumple
}
Desde la condicin inicial cond_ini, hasta
condicin cond_d, se realiza lo que hay
entre las llaves modificando la variable segn
modif.
Operadores vlidos: =,>,<,>=,<=
// Escribe durante 10 segundos
for (i=1; i<=10;i=i+1) {
delay(1000); //espero 1s
background(255);
text([Link](i),10,10);
}
while(condicin) {
// si se cumple
}
Mientras se cumpla la condicin, se repite lo
que haya entre las llaves
// Escribe durante 10 segundos
int i=0;
for (i<11) {
delay(1000);
background(255);
text([Link](i),10,10);
i=i+1;
}
switch(variable) {
case valor1:
// Hacer si cierto
break;
case valor2:
// Hacer si cierto
break;
...
case valorn:
// Hacer si cierto
break;
default:
// Hacer si no cierto ninguna
Para la variable se hacen las sentencias
segn el valor, si no coincide ninguna, se
realiza lo que hay en default
switch(letra) {
case A:
text(es A,10,10);
break;
case B:
text(es B,10,10);
break;
case C:
text(es C,10,10);
break;
default:
text(?,10,10);
break;
Departamento de Tecnologa I.E.S. Sta. M de Alarcos
// Si j>4 => escribe apto
// si no => escribe suspenso
if (j>4) {
text(apto,10,10);
} else {
text(suspenso,10,10);
}
Pgina 3
break;
}
ENTRADAS
Teclado y ratn
keyPressed()
keyPressed
key
keyCode
Deteccin de teclas presionadas:
keyPressed(): funcin tipo void
keyPressed: deteccin de tecla
key: indica la tecla
keyCode: si son flechas, Ctr...
// Si pulsas tecla rellena de blanco
mousePressed()
mouseMoved()
mouseDragged()
mouseButton
Se pueden usar como funciones tipo void
mousePressed->activa cuando se
pulse un botn
mouseMoved->detecta el
movimiento del ratn
mouseDragged->detecta el arrastre
con el ratn
mouseButton->indica qu boton es
el pulsado
// cambia el valor del rectngulo
// al pulsar el botn izdo
void draw() {
if (mousePressed &&
(mouseButton == LEFT)) {
fill(0);
} else if (mousePressed &&
(mouseButton == RIGHT)) {
fill(255);
} else {
fill(126);
}
rect(25, 25, 50, 50);
}
if (keyPressed == true) {
fill(0);
} else {
fill(255);
}
rect(25, 25, 50, 50);
Tabla de colores RGB
RO JOS
COLOR
Red
R,G,B
255,0,0
VER DES
COLOR
Verde lima
AZU LES
R,G,B
0,255,0
COLOR
Azul
R,G,B
0,0,255
GRI SES
COLOR
R,G,B
Blanco
255,255,255
Blanco nieve
255,250,250
Rojo indio
205,92,92
Verde-amarill
173,255,47
Azul agua
255,255,0
Coral claro
240,128,128
Verde plido
152,251,152
Light Cyan
224,255,255
Gris claro
230,230,230
Salmon
250,128,114
Verde agua
46,139,87
Aguamarina
127,255,212
Gris Plata
192,192,192
Crimson
220,20,60
Verd-Bosque
34,139,34
Turquesa
64,224,208
Gris
128,128,128
Ladrillo
178,34,34
Aceituna
128,128,0
Azul metal
70,130,180
Gris oscuro
Rojo oscuro
139,0,0
Verde claro
RO SAS
COLOR
R,G,B
144,238,144
Azul marino
AMA RILLOS
COLOR
0,0,128
PURP URAS
R,G,B
COLOR
Rosa
255,192,203
Amarillo
255,255,0
Violeta
Rosa claro
255,182,193
Oro
255,215,0
Magenta
Rosa intenso
255,20,147
Amarillo claro
255,255,224
Prpura
Departamento de Tecnologa I.E.S. Sta. M de Alarcos
R,G,B
238,130,238
47,79,79
Negro
0,0,0
NARA NJAS
COLOR
R,G,B
Coral
255,127,80
255,0,255
Naranja
255,165,0
128,0,128
Naranja osc
255,140,0
Pgina 4
