Introducción a Processing
-
Upload
jose-pujol-perez -
Category
Education
-
view
8.878 -
download
0
Transcript of Introducción a Processing
![Page 1: Introducción a Processing](https://reader031.fdocument.pub/reader031/viewer/2022021506/587559a21a28ab00528b5f91/html5/thumbnails/1.jpg)
Processing Introducción a Processing
José Pujol IES Vicente Aleixandre
![Page 2: Introducción a Processing](https://reader031.fdocument.pub/reader031/viewer/2022021506/587559a21a28ab00528b5f91/html5/thumbnails/2.jpg)
Entorno de Desarrollo
![Page 3: Introducción a Processing](https://reader031.fdocument.pub/reader031/viewer/2022021506/587559a21a28ab00528b5f91/html5/thumbnails/3.jpg)
Pantalla
size(width,height);Pixeles: pxwidthheight
![Page 4: Introducción a Processing](https://reader031.fdocument.pub/reader031/viewer/2022021506/587559a21a28ab00528b5f91/html5/thumbnails/4.jpg)
Colores
Escala grises
0
255
RGB
R 0-255
G 0-255
B 0-255
![Page 5: Introducción a Processing](https://reader031.fdocument.pub/reader031/viewer/2022021506/587559a21a28ab00528b5f91/html5/thumbnails/5.jpg)
Selector de colores
![Page 6: Introducción a Processing](https://reader031.fdocument.pub/reader031/viewer/2022021506/587559a21a28ab00528b5f91/html5/thumbnails/6.jpg)
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](https://reader031.fdocument.pub/reader031/viewer/2022021506/587559a21a28ab00528b5f91/html5/thumbnails/7.jpg)
Línea
line(x1,y1,x2,y2);
line(0,0,100,100);
![Page 8: Introducción a Processing](https://reader031.fdocument.pub/reader031/viewer/2022021506/587559a21a28ab00528b5f91/html5/thumbnails/8.jpg)
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](https://reader031.fdocument.pub/reader031/viewer/2022021506/587559a21a28ab00528b5f91/html5/thumbnails/9.jpg)
Formas
rect(x,y,ancho,alto);
ellipse(x,y,ancho,alto);
![Page 10: Introducción a Processing](https://reader031.fdocument.pub/reader031/viewer/2022021506/587559a21a28ab00528b5f91/html5/thumbnails/10.jpg)
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](https://reader031.fdocument.pub/reader031/viewer/2022021506/587559a21a28ab00528b5f91/html5/thumbnails/11.jpg)
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](https://reader031.fdocument.pub/reader031/viewer/2022021506/587559a21a28ab00528b5f91/html5/thumbnails/12.jpg)
Ejercicio
![Page 13: Introducción a Processing](https://reader031.fdocument.pub/reader031/viewer/2022021506/587559a21a28ab00528b5f91/html5/thumbnails/13.jpg)
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](https://reader031.fdocument.pub/reader031/viewer/2022021506/587559a21a28ab00528b5f91/html5/thumbnails/14.jpg)
Posición del ratón
mouseXmouseY
![Page 15: Introducción a Processing](https://reader031.fdocument.pub/reader031/viewer/2022021506/587559a21a28ab00528b5f91/html5/thumbnails/15.jpg)
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](https://reader031.fdocument.pub/reader031/viewer/2022021506/587559a21a28ab00528b5f91/html5/thumbnails/16.jpg)
Ejercicio
q Crea un péndulo que siga la posición del ratón
![Page 17: Introducción a Processing](https://reader031.fdocument.pub/reader031/viewer/2022021506/587559a21a28ab00528b5f91/html5/thumbnails/17.jpg)
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](https://reader031.fdocument.pub/reader031/viewer/2022021506/587559a21a28ab00528b5f91/html5/thumbnails/18.jpg)
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](https://reader031.fdocument.pub/reader031/viewer/2022021506/587559a21a28ab00528b5f91/html5/thumbnails/19.jpg)
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](https://reader031.fdocument.pub/reader031/viewer/2022021506/587559a21a28ab00528b5f91/html5/thumbnails/20.jpg)
KeyPressed
void keyPressed() {if (key=='s') { velocidadx=velocidadx+2;}
}
![Page 21: Introducción a Processing](https://reader031.fdocument.pub/reader031/viewer/2022021506/587559a21a28ab00528b5f91/html5/thumbnails/21.jpg)
Texto
text ("texto", x, y);text (variable, x, y);
![Page 22: Introducción a Processing](https://reader031.fdocument.pub/reader031/viewer/2022021506/587559a21a28ab00528b5f91/html5/thumbnails/22.jpg)
Atributos Texto
textAlign (CENTER);textSize (px);textWidth (px);fill(R,G,B);
![Page 23: Introducción a Processing](https://reader031.fdocument.pub/reader031/viewer/2022021506/587559a21a28ab00528b5f91/html5/thumbnails/23.jpg)
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](https://reader031.fdocument.pub/reader031/viewer/2022021506/587559a21a28ab00528b5f91/html5/thumbnails/24.jpg)
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](https://reader031.fdocument.pub/reader031/viewer/2022021506/587559a21a28ab00528b5f91/html5/thumbnails/25.jpg)
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](https://reader031.fdocument.pub/reader031/viewer/2022021506/587559a21a28ab00528b5f91/html5/thumbnails/26.jpg)
Carpeta datos
Juego
data
Juego.pde
foto1.jpg
foto2.png
01.mp3
![Page 27: Introducción a Processing](https://reader031.fdocument.pub/reader031/viewer/2022021506/587559a21a28ab00528b5f91/html5/thumbnails/27.jpg)
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](https://reader031.fdocument.pub/reader031/viewer/2022021506/587559a21a28ab00528b5f91/html5/thumbnails/28.jpg)
Música
Otras funciones de Audioplayercancion.play(); // reproduce la cancioncancion.pause(); // pausa la cancioncancion.stop(); // para la cancioncancion.rewind();// rebovina la cancion