taller processing - encuentro regional de software libre ucm 2015
Post on 04-Dec-2015
39 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
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é
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é
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é
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é
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
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é
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
top related