INTRODUCCIÓN A PROCESSING

Romina Cofré MondacaCoordinadora Escuela de Programación UCM

Encuentro Regional de Software LibreUniversidad Católica del Maule

2015

Introducción a ProcessingRomina Cofré

Processing

★ Antecesor: Design by numbers★ Creado para que gente de diversas áreas

pueda programar.

Artistas

Diseñadores Visuales Individuos Transdisciplinarios

Educación Multimedia

Interactivo

2

Instalación

Matemática

Arduino

Twitter

Introducción a ProcessingRomina Cofré

Páginas de interés

Processing es de código abierto:https://github.com/processing

Comunidad:http://www.openprocessing.org/

3

Instalación

Introducción a ProcessingRomina Cofré

Instalación

Descargamos simplemente un ejecutable en: https://processing.org/download/

Descomprimimos en algún lugar de nuestro disco.

4

Instalación

Introducción a ProcessingRomina Cofré

Instalación

Dentro de la carpeta existe un ejecutable llamado processing. Doble click!

Y ya tenemos listo! el entorno de desarrollo para processing.

5

Instalación

Introducción a ProcessingRomina Cofré

Versión

Processing 2 Processing 3

6

Instalación

Introducción a ProcessingRomina Cofré

Manos a la obra

7

Figuras 2D

Introducción a ProcessingRomina Cofré

Hola mundoConsola de depuración

print(“Hola mundo”);

println(“Hola mundo”);

print(“Hola mundo”);

Para ejecutar presiona el botón o CTRL+R

8

Figuras 2D

Introducción a ProcessingRomina Cofré

Notas

★ No olvidar el punto y coma final.★ Processing es sensible a las mayúsculas o

minúsculas.★ Los comentarios se pueden hacer con:

//esto es un comentario/*Esto es un comentario grande*/

9

Figuras 2D

Introducción a ProcessingRomina Cofré

Algunas funciones predefinidas que podríamos usar

10

Figuras 2D

Introducción a ProcessingRomina Cofré

size

size(640,480);

11

Figuras 2D

Introducción a ProcessingRomina Cofré

Pointpoint(20, 20);point(30, 30);point(40, 40);point(50, 50);point(60, 60);

¿Podríamos dibujar una línea?

12

Figuras 2D

Introducción a ProcessingRomina Cofré

line

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

13

Figuras 2D

Introducción a ProcessingRomina Cofré

ellipse

ellipse(40, 40, 60, 60); // círculo grandeellipse(75, 75, 32, 32); // círculo pequeño

14

Figuras 2D

Introducción a ProcessingRomina Cofré

rect

rect(15, 15, 40, 40); // cuadrado granderect(55, 55, 25, 25); // cuadrado pequeño

15

Figuras 2D

Introducción a ProcessingRomina Cofré

background

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

16

Figuras 2D

Introducción a ProcessingRomina Cofré

Colores

(255, 0, 0) (0, 255, 0) (0, 0, 255)

17

RGB

Figuras 2D

Introducción a ProcessingRomina Cofré

Rellenos y bordes

18

Figuras 2D

Bordestroke(0,255,0);noStroke();

Rellenofill(255,0,0);noFill();

Introducción a ProcessingRomina Cofré

loadImage

PImage img;img = loadImage(“foto01.jpg”);background(img);

Recordar que la imagen debe ser del tamaño de la ventana.

19

Figuras 2D

Introducción a ProcessingRomina Cofré

tanslate

translate(50, 40);

* Recomiendo utilizar esta función antes de una rotación por ejemplo.

20

Trasformación

Introducción a ProcessingRomina Cofré

rotate

rotate(50, 40);

* Recomiendo utilizar esta función antes de una rotación por ejemplo.

21

Trasformación

Introducción a ProcessingRomina Cofré

Muchas funciones más

Referencia:https://processing.org/reference/

22

Referencia

Introducción a ProcessingRomina Cofré 23

Práctica

Introducción a ProcessingRomina Cofré

Fractal, mandalas, patrones

24

Eventos

Introducción a ProcessingRomina Cofré

Animación

25

Figuras 2D

Introducción a ProcessingRomina Cofré

Estructura de un programa

void setup(){}

void draw(){ //Ejecución continua

}

26

Figuras en movimiento

Introducción a ProcessingRomina Cofré

Cursor y Mouse

Coordenadas del mouse: mouseXmouseY

Cursor:cursor(HAND);noCursor();

27

Figuras en movimiento

Introducción a ProcessingRomina Cofré

Rastro Mouse

void draw(){ ellipse(mouseX, mouseY, 5,5);}

28

reference: frameRate()

Figuras en movimiento

Introducción a ProcessingRomina Cofré

Pendiente de una recta

29

Figuras en movimiento

Introducción a ProcessingRomina Cofré

Pendiente de una recta

30

float pendiente;void setup(){

size(800,600); strokeWeight(2); //Grosor de línea textSize(16); //Tamaño fuente textAlign(LEFT); //Alineación texto noCursor(); //Ocultar Puntero

}void draw(){

background(0,200,50); text("0,0", 400,600); line(400,600,mouseX, mouseY); //Hacer línea 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);

}

Figuras en movimiento

Introducción a ProcessingRomina Cofré

Pelota rebotando

31

Práctica

Introducción a ProcessingRomina Cofré

mousePressed()

32

Ejemplo Funciónif (mousePressed == true){ mover = 1; }

Ejemplo Eventovoid mousePressed(){

//código}

Eventos

Introducción a ProcessingRomina Cofré

Contactohttp://www.openprocessing.

org/user/54146escprogram@spock.ucm.cl

Gracias

33