¿Qué es processing? - pablomonteserin.com

¿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
©

Download Report