INTRODUCCIN A

PROCESSING
Romina Cofr Mondaca
Coordinadora Escuela de Programacin UCM

Encuentro Regional de Software Libre

Universidad Catlica del Maule
2015

Instalacin

Processing
Antecesor: Design by numbers
Creado para que gente de diversas reas
pueda programar.
Interactivo

Artistas

Educacin

Multimedia Arduino

Individuos Transdisciplinarios

Diseadores Visuales
Romina Cofr

Introduccin a Processing

Matemtica

Twitter

Instalacin

Pginas de inters
Processing es de cdigo abierto:
https://github.com/processing
Comunidad:
http://www.openprocessing.org/

Romina Cofr

Introduccin a Processing

Instalacin

Instalacin
Descargamos simplemente un ejecutable
en:
https://processing.org/download/
Descomprimimos en algn lugar de
nuestro disco.
Romina Cofr

Introduccin a Processing

Instalacin

Instalacin
Dentro de la carpeta existe un ejecutable
llamado processing. Doble click!
Y ya tenemos listo! el entorno de
desarrollo para processing.

Romina Cofr

Introduccin a Processing

Instalacin

Versin

Processing 2
Romina Cofr

Processing 3
Introduccin a Processing

Figuras 2D

Manos a la obra

Romina Cofr

Introduccin a Processing

Figuras 2D

Hola mundo
Consola de depuracin
print(Hola mundo);
println(Hola mundo);
print(Hola mundo);
Para ejecutar presiona el botn
Romina Cofr

Introduccin a Processing

o CTRL+R
8

Figuras 2D

Notas
No olvidar el punto y coma final.
Processing es sensible a las maysculas o
minsculas.
Los comentarios se pueden hacer con:
//esto es un comentario
/*
Esto es un comentario grande
*/
Romina Cofr

Introduccin a Processing

Figuras 2D

Algunas funciones
predefinidas que
podramos usar

Romina Cofr

Introduccin a Processing

10

Figuras 2D

size
size(640,480);

Romina Cofr

Introduccin a Processing

11

Figuras 2D

Point
point(20, 20);
point(30, 30);
point(40, 40);
point(50, 50);
point(60, 60);
Podramos dibujar una lnea?
Romina Cofr

Introduccin a Processing

12

Figuras 2D

line
line(45, 90, 180, 60);
line(70, 12, 142, 90);
line(85, 30, 118, 36);

Romina Cofr

Introduccin a Processing

13

Figuras 2D

ellipse
ellipse(40, 40, 60, 60); // crculo grande
ellipse(75, 75, 32, 32); // crculo pequeo

Romina Cofr

Introduccin a Processing

14

Figuras 2D

rect
rect(15, 15, 40, 40); // cuadrado grande
rect(55, 55, 25, 25); // cuadrado pequeo

Romina Cofr

Introduccin a Processing

15

Figuras 2D

background
background(102);
background(102, 0.5);
background(255, 204, 0);
background(255, 204, 0, 0.5);

Romina Cofr

Introduccin a Processing

16

Figuras 2D

Colores
RGB

(255, 0, 0)

Romina Cofr

(0, 255, 0)

Introduccin a Processing

(0, 0, 255)

17

Figuras 2D

Rellenos y bordes
Borde
stroke(0,255,0);
noStroke();
Relleno
fill(255,0,0);
noFill();
Romina Cofr

Introduccin a Processing

18

Figuras 2D

loadImage
PImage img;
img = loadImage(foto01.jpg);
background(img);
Recordar que la imagen debe ser del
tamao de la ventana.
Romina Cofr

Introduccin a Processing

19

Trasformacin

tanslate
translate(50, 40);

* Recomiendo utilizar esta funcin antes de una rotacin por ejemplo.

Romina Cofr

Introduccin a Processing

20

Trasformacin

rotate
rotate(50, 40);

* Recomiendo utilizar esta funcin antes de una rotacin por ejemplo.

Romina Cofr

Introduccin a Processing

21

Referencia

Muchas funciones ms
Referencia:
https://processing.org/reference/

Romina Cofr

Introduccin a Processing

22

Prctica

Romina Cofr

Introduccin a Processing

23

Eventos

Fractal, mandalas, patrones

Romina Cofr

Introduccin a Processing

24

Figuras 2D

Animacin

Romina Cofr

Introduccin a Processing

25

Figuras en movimiento

Estructura de un programa
void setup(){
}
void draw(){ //Ejecucin continua
}

Romina Cofr

Introduccin a Processing

26

Figuras en movimiento

Cursor y Mouse
Coordenadas del mouse:
mouseX
mouseY
Cursor:
cursor(HAND);
noCursor();
Romina Cofr

Introduccin a Processing

27

Figuras en movimiento

Rastro Mouse
void draw(){
ellipse(mouseX, mouseY, 5,5);
}
reference: frameRate()
Romina Cofr

Introduccin a Processing

28

Figuras en movimiento

Pendiente de una recta

Romina Cofr

Introduccin a Processing

29

Figuras en movimiento

Pendiente de una recta

float pendiente;
void setup(){
size(800,600);
strokeWeight(2); //Grosor de lnea
textSize(16);
//Tamao fuente
textAlign(LEFT); //Alineacin texto
noCursor();
//Ocultar Puntero
}
void draw(){
background(0,200,50);
text("0,0", 400,600);
line(400,600,mouseX, mouseY); //Hacer lnea desde origen hasta el puntero
if (mouseY != 0){
pendiente = (mouseY - 600. )/( mouseX - 400.);
}
pendiente = pendiente*-1;
text("X:"+(mouseX-400)+" "+"Y:"+(mouseY), mouseX+20, mouseY-10);
//Dibujar texto
text("Pendiente:"+pendiente, mouseX+20, mouseY-30);
}
Romina Cofr

Introduccin a Processing

30

Prctica

Pelota rebotando

Romina Cofr

Introduccin a Processing

31

Eventos

mousePressed()
Ejemplo Funcin
if (mousePressed == true){
mover = 1;
}
Ejemplo Evento
void mousePressed(){
//cdigo
}
Romina Cofr

Introduccin a Processing

32

Gracias
Contacto
http://www.openprocessing.
org/user/54146
escprogram@spock.ucm.cl

Romina Cofr

Introduccin a Processing

33