¿Qué es processing? Es un lenguaje de creación audiovisual. El código de processing es Java. Por tanto, es multiplataforma. Nos permite hacer animaciones con pequeñas cantidades de código. Tiene una curva de aprendizaje poco pronunciada. Ejemplos sencillos para aprender: http://processing.org/examples/ Ejemplos complejos: http://processing.org/exhibition/ Aprender processing paso a paso: http://funprogramming.org/ - Podemos ver la API con todas las primitivas que podemos dibujar yendo a http://processing.org/reference/ pablomonteserin.com © Processing.js Permite cargar el código fuente de processing (Java) como si fuese Javascript, para pintar en el canvas de HTML5. http://processingjs.org/ Ejemplos de dos juegos con proccessingjs: http://www.monocubed.com/2010/07/27/galactic-inbox/ http://mylifeaquatic.herokuapp.com/ pablomonteserin.com © Ejecutamos el editor de código de processing Notas: - A la hora de salvar nuestros ficheros, tener en cuenta que estos no podrán empezar por número. - Podemos acceder a la documentación de un método haciendo doble click sobre la palabra que lo identifica → botón derecho → find in reference. pablomonteserin.com © EJEMPLOS pablomonteserin.com © Mi primer programa <html> <head> <title></title> <script type="text/javascript" src="processing-1.4.1.min.js"> </script> </head> El canvas debe estar <body> inmediatamente después del <script type="application/processing"> script de processing. rect(10,10,50,50); </script> <canvas></canvas> </body> Descargar plantilla processing </html> pablomonteserin.com © Cambiar propiedades del lienzo size(500, 500); background(255); Verlo funcionando pablomonteserin.com © Dibujar formas geométricas rect(50,50,75,100); ellipse(200,200,70,57); line(90,150,500,500); Verlo funcionando pablomonteserin.com © Pintar stroke(255,0,0); rect(50,50,75,100); //Probar a descomentar la siguiente línea: //noStroke(); strokeWeight(10); fill(0,255,0); ellipse(200,200,70,57); stroke(117); line(90,150,500,500); Verlo funcionando pablomonteserin.com © Verlo funcionando Ejercicio 1 - Utilizando la función rect(x1, y1, ancho, alto) dibujar un rectángulo. 2 – Utilizando la función ellipse(centrox, centroy, ancho, alto) dibujar una elipse. 3 – Utilizando la función triangle(x1, y1, x2, y2, x3, y3) dibujar un triángulo. 4 - Utilizando la función fill(R, G,B) pintar el relleno del rectángulo 5 - Utilizando la función stroke(R , G, B) pintar el borde del rectángulo. 6 – Lograr que ambas figuas tengan diferente color de relleno y borde. 7 - Darle transparencia al color de relleno de las primitivas, pasando cuatro parámetros en lugar de 3 (R, G, B, A). A) Tener en cuenta que el valor del canal alfa va de 0 a 255. Notas: - R, G, B son los valores del rojo, verde y azul respectivamente. Dichos valores van de 0 a 255. pablomonteserin.com © Ejercicio – Dibujar cara Verlo funcionando pablomonteserin.com © Declaración de variables numéricas Verlo funcionando int circleX = 0; size(500,500); ellipse(circleX,100,50,50); pablomonteserin.com © Modo dinámico Utilizaremos las funciones setup() y draw(). Todo lo que esté dentro del método draw() se ejecutará en cada fotograma de la película. void setup(){ size(500, 500); frameRate(15); //por defecto, 60 background(255); } Verlo funcionando void draw(){ line(0, 0, mouseX, mouseY); } Nota: Si defino una función setup deberé definir también una función draw, o de lo contrario, obtendré el siguiente error: It looks like you're mixing “active” and “static” modes. pablomonteserin.com © Declaración de variables en estructura int circleX = 0; Verlo funcionando void setup() { size(500,500); } void draw() { ellipse(circleX,100,50,50); } pablomonteserin.com © Uso de variables int circleX = 0; void setup() { size(500,500); } Verlo funcionando void draw() { //para borrar la pantalla //background(255); ellipse(circleX,100,50,50); circleX = circleX + 1; } pablomonteserin.com © Ejercicio Verlo funcionando pablomonteserin.com © mouseX, mouseY Teniendo en cuenta que las variables mouseX y mouseY almacenan automáticamente y en cada instante la posición del ratón, hacer el ejercicio propuesto. Verlo funcionando pablomonteserin.com © Ejercicio - línea Verlo funcionando pablomonteserin.com © mousePressed Teniendo en cuenta que la función... void mousePressed() { ... } ...se llama automáticamente cada vez que hacemos click, hacer el ejercicio propuesto. Verlo funcionando pablomonteserin.com © función random Genera un número aleatorio entre 0 y 100. line(random(100), random(100), random(100), random(100)); Verlo funcionando pablomonteserin.com © Ejercicio – líneas centradas Verlo funcionando pablomonteserin.com © Ejercicio En cada paso de frame, cambiar el color de fondo de la pantalla. Usar frameRate(4); para que el cambio de color no sea muy rápido. Verlo funcionando pablomonteserin.com © Ejercicio - líneas verticales Verlo funcionando pablomonteserin.com © Ejercicio – líneas oblicuas I Verlo funcionando pablomonteserin.com © Ejercicio – líneas oblicuas II Verlo funcionando pablomonteserin.com © Ejercicio – random de elipses Nota: En el siguiente método: fill(r,g,b,a); El último parámetro es la opacidad. Verlo funcionando pablomonteserin.com © Estructuras de control - IF pablomonteserin.com © if(mouseX > 200){ background(255, 0, 0); }else{ background(0,255, 0); } Verlo funcionando pablomonteserin.com © Pelota que cae Verlo funcionando pablomonteserin.com © Ejercicio Cuando la pelota llegue al final de la pantalla, debe pararse Verlo funcionando pablomonteserin.com © Ejercicio Cuando la pelota pase por la mitad de la pantalla, aumentará su tamaño. Verlo funcionando pablomonteserin.com © Ejericico Hacer una pelota que cae y rebota para arriba. Pista: if (posY+diam/2>=height || posY-diam/2<=0) { velY *= -1; } Verlo funcionando pablomonteserin.com © Ejercicio – la pelota debe rebotar en las paredes Verlo funcionando pablomonteserin.com © Ejercicio – dos pelotas Verlo funcionando pablomonteserin.com © Ejercicio – las pelotas rebotan entre sí if(dist(posX, posY, posX2, posY2)<=diam/2+diam/2){ Verlo funcionando pablomonteserin.com © bucle for - I void setup() { size(500,500); background(255); } void draw() { for(int i=0; i<width; i++){ point(i,i); } } Verlo funcionando pablomonteserin.com © bucle for - II ... stroke(random(255)); point(i,i); Verlo funcionando pablomonteserin.com © bucle for - III Para que el navegador renderice correctamente la animación, el tamaño del lienzo debería ser de 50x50. for(int i=0; i<width; i++){ for(int j=0; j<height;j++){ stroke(random(255)); point(i,j); } } Verlo funcionando pablomonteserin.com © Ejercicio Utilizando el bucle for, pintar bolitas en la pantalla. Ahora los bucles avanzarán de 50 en 50 y pintaré elipses en lugar de puntos. Verlo funcionando pablomonteserin.com © Ejercicio Teniendo en cuenta que la función dist: distancia = dist(x1, y2 , x2, y2); Nos devuelve al distancia entre dos puntos, puedo utlizarla para calcular la distancia entre cualquier punto y el centro del lienzo. Multiplicando esta distancia por un coeficiente reductor podré hacer que las bolitas más alejadas del centro sean más grandes. Verlo funcionando pablomonteserin.com © Ejercicio El tamaño de los círculos deberá variar en tiempo real en función de la posición del ratón. Verlo funcionando pablomonteserin.com © Carga de fuentes tools -> create font -> filename -> defino un nombre de fuente que se salvará en la carpeta de trabajo PFont miFuente; Verlo funcionando void setup(){ background(0); size(900,200); miFuente=loadFont("miFuente.vlw"); textAlign(CENTER, CENTER); textFont(miFuente, 75); text("texto escrito", width/2, height/2); } void draw(){ } pablomonteserin.com © Bolas en diagonal pablomonteserin.com © Insertar la instancia de una bola Verlo funcionando Bola b; color color_fons= color(255, 255, 255); void setup() { size(500, 500); background(color_fons); b = new Bola(40, 90); } class Bola { int x; int y; color frente= color(125,125,125); void draw() { } //clase constructora Bola(int pX, int pY) { x= pX; y= pY; fill(frente); ellipse(x,y,50,50); } Cuando trabajemos con instancias, el fichero de inicio debe contener por fuerza los métodos setup() y draw(). } pablomonteserin.com © La bola se mueve Completar el código de la clase bola. Verlo funcionando void setup() { size(500, 500); background(color_fons); b = new Bola(40, 90); b.setVel(1, 1); } void draw() { background(color_fons); b.paint(); b.move(); } pablomonteserin.com © Añadimos la bola a un array ArrayList lista_bolas = new ArrayList(); … lista_bolas.add(b); … for(int i =0; i<lista_bolas.size();i++){ Bola temp = (Bola) lista_bolas.get(i); temp.paint(); temp.move(); } Verlo funcionando pablomonteserin.com © Ejercicio Colocamos la bola en escena en el punto dónde hagamos click. Verlo funcionando pablomonteserin.com © La pulsación de la tecla z elimina una bola del array void keyPressed(){ if (key == 'z' || key =='Z'){ lista_bolas.remove(lista_bolas.get(0)); } } Verlo funcionando pablomonteserin.com © BoxWrap2D http://www.jbox2d.org/processing/ Descargamos la librería y la descomprimimos en la ruta de la carpeta del sketchbook (file → preferences para ver cual es ). Luego, para utilizarla: Sketch → Import Library → boxwrap2d pablomonteserin.com © Physics physics; // The physics handler: we'll see more of this later void setup() { size(640,480); frameRate(60); initScene(); } void draw() { background(255); Primer ejemplo if (keyPressed) { //Reset everything physics.destroy(); initScene(); } } void initScene() { physics = new Physics(this, width, height); physics.setDensity(1.0); physics.createRect(300,200,340,300); } pablomonteserin.com ©
© Copyright 2024 ExpyDoc