Prontuario De Processing

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 Formación del Profesorado de Castilla-La Mancha y Fundación Telefónica.
2.-Este documento ha sido elaborado por profesores del Departamento de Tecnologíadel I.E.S. “Sta. Mª de
Alarcos” de Ciudad Real, España, especialmente dirigido a profesores y alumnos de Enseñanza
Secundaria.
3.-Puedes acceder a la página del proyecto pulsando sobre el logotipo de la cabecera y a la referencia
completa, desde el la aplicación Help -> Reference.

Plantilla de Processing
// Estos símbolos permiten escribir comentarios de una línea
// Declaración de variablesglobales (para todo el programa)
void setup() {
// Este bloque sólo se ejecuta al cargar el programa
}
void draw() {
// Este bloque se ejecuta repetidamente
// Declaración de variables locales (de la función)
}

Tabla de funciones
Función
GRAFICOS

Descripción

Ejemplo

Coordenadas cartesianas: (X,Y)
●
X: horizontal
●
Y: vertical
●
(0,0) -> esquina Sup. Izqda.

// Coordenada absoluta
(10,10)
// indicala posición de ratón
(mouseX,mouseY)

size(tamañoX,tamañoY);

Tamaño de la pantalla:
● tamañoX: horizontal
● tamañoY: 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 números de 0-255, siendo:
● 0 -> Nada de intensidad
● 255 -> Intensidad máxima

// Dibujo en rojo
stroke(255,0,0);

Dibujo de líneade (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 Tecnología I.E.S. “Sta. Mª de Alarcos”

// Dibujo en amarillo
stroke(255,255,0);

Página 1

Función
fill(R,G,B);

Descripción

Ejemplo

Relleno de color RGB:
● R: rojo(Red)
● G: verde (Green)
● B: azul (Blue)
Los números de 0-255, siendo:
● 0 -> Nada de intensidad
● 255 -> Intensidad máxima

// Relleno verde
fill(0,255,0);

ellipse(centroX,centroY,
tamañoX,tamañoY);

Dibuja círculos y elipses:
● centroX: horizontal del centro
● centroY: vertical del centro
● tamañoX: semieje horizontal
● tamañoY: semieje vertical
si tamañoX=tamañoY ->círculo

// Dibujo círculoradio=10 en
// (20,20)
ellipse(20,20,10,10);

arc(cX,cY,tX,tY,angi,angf);

Dibuja arcos circulares, elípticos y círculos:
● cX->X del centro
● cY->Y del centro
● tX ->anchura
● tY ->altura
● angi->ángulo inicial (en radianes)
● angf->ángulo final (en radianes)

//Dibujo círculo como anterior
arc(20,20,10,10,0,2*PI);

rect(Xi,Yi,Xf,Yf);

Dibuja rectángulos:
● Xi->horizontal inicial
● Yi->verticalinicial
● 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 triángulos:
● Coordenadas x,y de cada vértice 1,
2y3

// triángulo tipo escuadra de lado
// 20en (30,10)
triangle(30,10,30,30,50,30);

// Hay que utilizar las 3
PTimage nvar;
nvar=loadImage(“im.jpg”);
image(X,Y,nvar);

Carga de imágenes:
Para que se pueda cargar una imagen, esta
debe estar en la carpeta “Data” del
programa.
● nvar -> nombre de la variable
● im.jpg -> nombre del fichero
● X,Y -> coordenada sup izda de la
foto en la pantalla

// Carga una imagen
PImage imagen;
void setup(){imagen =
loadImage("logoard.jpg");
}
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 número a caracteres
debo emplear:
● String.valueOf(numero)

// Escribo “Hola” en (10,10)
String palabra = “Hola”;
text(palabra,...