Este documento introduce Processing y sus principales funciones para crear gráficos y animaciones interactivas. Explica cómo configurar el tamaño de la pantalla, utilizar colores, dibujar formas, líneas y texto. También cubre el uso de variables, condicionales, posición del ratón, carga de imágenes y sonido. El objetivo es proporcionar una guía básica de Processing para que los estudiantes aprendan a crear sus propios proyectos interactivos.

1. Processing
Introducción
a
Processing
José
Pujol
IES
Vicente
Aleixandre

2. Entorno
de
Desarrollo

3. Pantalla
size(width,height);
Pixeles: px
width
height

4. Colores
Escala grises
0
255
RGB
R 0-255
G 0-255
B 0-255

5. Selector
de
colores

6. Pantalla
size(500,400);
background(125);
background(grey);
background(0-255);
background(r,g,b);
background(0-255,0-255,0-255);

7. Línea
line(x1,y1,x2,y2);
line(0,0,100,100);

8. Color
y
grosor
Línea
stroke(R,G,B);
strokeWeight(px);
stroke(255,0,0);
strokeWeight (10);
line(0,0,100,100);

9. Formas
rect(x,y,ancho,alto);
ellipse(x,y,ancho,alto);

10. Propiedades
de
la
Forma
size(300,300);
background(255);
stroke(0);
strokeWeight(5);
fill(0,100,250);
ellipse(width/2,height/2,200,200);
stroke(r,g,b);
noStroke();
fill(r,g,b);
noFill();

11. Ejercicio
q Dibuja
la
cara
de
un
animal:
• Ordena
el
código
por
partes:
cara,
ojos,
boca,
nariz...
• Empieza
por
lo
más
importante
y
luego
centrate
en
los
detalles
• UJliza
fondo,
elipse,
color
y
ancho
de
línea,
color
de
relleno...

12. Ejercicio

13. void
set
up
y
draw
void setup(){
// se ejecuta una sola vez
}
void draw(){
// se ejecuta de forma infinita
}

14. Posición
del
ratón
mouseX
mouseY

15. Ejercicio
q Modifica
el
color
de
la
línea
según
su
posición
q Haz
que
solo
se
dibuje
la
úlJma
línea

16. Ejercicio
q Crea
un
péndulo
que
siga
la
posición
del
ratón

17. Condicionales
if (test){
// statement
}
if (test){
// statement A
}
else {
// statement B
}
if (test){
// statement A
}
else if (test){
// statement B
}
else {
// statement C
}

18. Variables
int posx = 0;
int variable de tipo entero
posx nombre
0 valor
float velocidad = 1.1;
float variable de tipo coma flotante
velocidad nombre
1.1 valor

19. Ejercicio
q Crea
un
cubo
que
avance
y
rebote
en
las
paredes
int posx=width/2; // variable posicion x cuadrado
int vx=1; // variable velocidad cuadrado

20. KeyPressed
void keyPressed() {
if (key=='s') {
velocidadx=velocidadx+2;
}
}

21. Texto
text ("texto", x, y);
text (variable, x, y);

22. Atributos
Texto
textAlign (CENTER);
textSize (px);
textWidth (px);
fill(R,G,B);

23. Ejercicio
q Crea
un
programa
que
cuente
el
número
de
segundos,
que
pasan
desde
que
este
se
inicia
Prueba
usando
la
función
millis();

24. Imagen
PImage im; // variable im de tipo PImage
void setup() {
// cargamos la imagen
im=loadImage ("foto.jpg");
}
void draw() {
// dibujamos la imagen im en coordenadas (0,0)
image(im, 0, 0);
}

25. Vector
con
Imágenes
// declaración de un array dos imagenes
PImage im[]=new Pimage[2];
void setup() {
im[0]=loadImage ("foto1.jpg");
im[1]=loadImage ("foto2.png");
}
void draw() {
image(im[i], 0, 0);
}

26. Carpeta
datos
Juego
data
Juego.pde
foto1.jpg
foto2.png
01.mp3

27. Música
import ddf.minim.*; // importamos la librería
// Declaramos objeto musica de tipo Minim
Minim musica;
// Declaramos la cancion de tipo Audioplayer
AudioPlayer cancion;
void setup() {
// creamos el objeto musica de tipo Minim
musica = new Minim(this);
// cargamos el archivo de musica
cancion = musica.loadFile("01.mp3");
cancion.loop(); // reproducimos la cancion en bucle
}
void draw() {
}

28. Música
Otras funciones de Audioplayer
cancion.play(); // reproduce la cancion
cancion.pause(); // pausa la cancion
cancion.stop(); // para la cancion
cancion.rewind(); // rebovina la cancion