introducción a processing

28
Processing Introducción a Processing José Pujol IES Vicente Aleixandre

Upload: jose-pujol-perez

Post on 11-Jan-2017

8.881 views

Category:

Education


0 download

TRANSCRIPT

Page 1: Introducción a Processing

Processing  Introducción    a  Processing  

José  Pujol  IES  Vicente  Aleixandre  

Page 2: Introducción a Processing

Entorno  de  Desarrollo  

Page 3: Introducción a Processing

Pantalla  

size(width,height);Pixeles: pxwidthheight

Page 4: Introducción a Processing

Colores  

Escala grises

0

255

RGB

R 0-255

G 0-255

B 0-255

Page 5: Introducción a Processing

Selector  de  colores  

Page 6: Introducción a Processing

Pantalla  

size(500,400);background(125);

background(grey);background(0-255);background(r,g,b);background(0-255,0-255,0-255);

Page 7: Introducción a Processing

Línea  

line(x1,y1,x2,y2);

line(0,0,100,100);

Page 8: Introducción a Processing

Color  y  grosor  Línea  

stroke(R,G,B);strokeWeight(px);

stroke(255,0,0);strokeWeight (10);line(0,0,100,100);

Page 9: Introducción a Processing

Formas  

rect(x,y,ancho,alto);

ellipse(x,y,ancho,alto);

Page 10: Introducción a Processing

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();

Page 11: Introducción a Processing

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...  

Page 12: Introducción a Processing

Ejercicio  

Page 13: Introducción a Processing

void  set  up  y  draw  

void setup(){// se ejecuta una sola vez

}void draw(){

// se ejecuta de forma infinita}

Page 14: Introducción a Processing

Posición  del  ratón  

mouseXmouseY

Page 15: Introducción a Processing

Ejercicio  

 q Modifica  el  color  de  la  línea  según  su  posición      

q Haz  que  solo  se  dibuje  la  úlJma  línea  

Page 16: Introducción a Processing

Ejercicio  

q Crea  un  péndulo  que  siga  la  posición  del  ratón      

Page 17: Introducción a Processing

Condicionales  

if (test){// statement

}

if (test){// statement A

}else {// statement B

}

if (test){// statement A

}else if (test){// statement B

}else {// statement C

}

Page 18: Introducción a Processing

Variables  

int posx = 0;int variable de tipo enteroposx nombre0 valorfloat velocidad = 1.1;float variable de tipo coma flotantevelocidad nombre1.1 valor

Page 19: Introducción a Processing

Ejercicio  

q Crea  un  cubo  que  avance  y  rebote  en  las  paredes  

int posx=width/2; // variable posicion x cuadradoint vx=1; // variable velocidad cuadrado

Page 20: Introducción a Processing

KeyPressed  

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

}  

Page 21: Introducción a Processing

Texto  

text ("texto", x, y);text (variable, x, y);

Page 22: Introducción a Processing

Atributos  Texto  

textAlign (CENTER);textSize (px);textWidth (px);fill(R,G,B);

Page 23: Introducción a Processing

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();

Page 24: Introducción a Processing

Imagen  

PImage im; // variable im de tipo PImagevoid setup() {

// cargamos la imagenim=loadImage ("foto.jpg");

}void draw() {

// dibujamos la imagen im en coordenadas (0,0)image(im, 0, 0);

}

Page 25: Introducción a Processing

Vector  con  Imágenes  

// declaración de un array dos imagenesPImage im[]=new Pimage[2]; void setup() {im[0]=loadImage ("foto1.jpg");im[1]=loadImage ("foto2.png");

}void draw() {image(im[i], 0, 0);

}

Page 26: Introducción a Processing

Carpeta  datos  

Juego  

data  

Juego.pde  

foto1.jpg  

foto2.png  

01.mp3  

Page 27: Introducción a Processing

Música  

import ddf.minim.*; // importamos la librería// Declaramos objeto musica de tipo MinimMinim musica;// Declaramos la cancion de tipo AudioplayerAudioPlayer 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() {}

Page 28: Introducción a Processing

Música  

Otras funciones de Audioplayercancion.play(); // reproduce la cancioncancion.pause(); // pausa la cancioncancion.stop(); // para la cancioncancion.rewind();// rebovina la cancion