Processing

Manual de ayuda de Processing
Juan María Sarrió García
MUA_Workshop
1
Nota del autor:
Este manual no es una traducción directa del libro en español, sino que, apoyándome en
los sketches que se encuentran disponibles en:
http://www.processing.org/learning/books/
y en la información recogida en el I WORKSHOP INTERACTION NEW MEDIA,
celebrado en el MUA (nov 2008, Alicante) he realizado unaintroducción a los
conceptos y funciones de Processing.
Sobre todo, lo que más me ha interesado es qué puede hacer un estudiante, sin mucha
base de programación, con este programa.
Espero que alguien se anime, y haga algo similar con otros programas como PureData o
Arduino.
Ejemplo 0-04:
int x = 0; //
int y = 55; //
void setup() {
size(100, 100);
}
void draw() {
background(204);line(x, y, x+20, y-40); // línea izquierda
line(x+10, y, x+30, y-40); // línea central
line(x+20, y, x+40, y-40); // línea derecha
x = x + 1; // súmale 1 al valor de la X cada vez que se hace
el bucle
if (x > 100) { // Si el valor de X supera el valor 100 (ancho
pantalla), entonces…
x = -40; // …asigna el valor –40 al valor de X
}
}
Manual de ayuda de Processing
Juan María Sarrió GarcíaMUA_Workshop
2
En este ejemplo, se usa un condicional (if), si el valor de X, pasa del valor 100
(que en este caso, es el límite de anchura de la pantalla), entonces, se le asigna el valor
X= - 40, de esta forma, las líneas se vuelven a dibujar al principio de la pantalla.
También se puede ver como al final de dibujar las líneas, al valor X se le suma 1,
de esta forma, se van dibujando laslíneas a lo largo del eje X, ya que el draw() lo lee
constantemente el programa.
Ejemplo 0-05:
void setup() {
size(100, 100);
}
void draw() {
background(204);
float x = mouseX; // Asigno la coordenada X del ratón a la variable X
float y = mouseY; // Asigno la coordenada Y del ratón a la variable Y
line(x, y, x+20, y-40);
line(x+10, y, x+30, y-40);
line(x+20, y, x+40, y-40);
}
En esteejemplo, defino la variable (float = decimal) dentro del draw ( ) para que
constantemente se vaya redefiniendo dentro del bucle que hace el programa. Si estas
variables las hubiera definido en el setup ( ), el programa las identificaría con la
posición del ratón en el primer instante de arrancar el programa y las líneas no se
moverían.
Ejemplo 0-06:
void setup() {
size(100, 100);
noLoop(); //con esta orden, el draw no se redibujará en bucle constantemente
} // si coloco la orden loop( ) o redraw ( ) en el draw, se volverá a dibujar el bucle
void draw() {
diagonals(40, 90);
diagonals(60, 62);
diagonals(20, 40);
}
void diagonals(int x, int y) {
line(x, y, x+20, y-40);
line(x+10, y, x+30, y-40);
line(x+20, y, x+40, y-40);
}
Cuando usamos la orden noLoop ( ), no podemosutilizar las ordenes de
mousePressed( ) o keyPressed( ) directamente . Ver ayuda de Processing de esta
orden.
Manual de ayuda de Processing
Juan María Sarrió García
MUA_Workshop
3
En este ejemplo, podemos ver como al principio del draw( ), define unas
diagonales con unas variables int (entre paréntesis). Diagonals no es una función de
Processing, si no que es una función que estamos definiendonosotros mismos, es por
ello que luego necesitamos decirle al programa qué hacer cuando lee el comando de
diagonals. Por esto, lo definimos con el void diagonals ( ) en el que se dibujan unas
líneas (esta ya si que es una orden interna de Processing). Para ejecutar el comando de
line, el programa necesita 4 parámetros, los dos primeros son las coordenadas iniciales
de la línea en el eje X e Yrespectivamente y los dos últimos, son las coordenadas
finales de la línea en el eje X e Y respectivamente.
Ejemplo 0-07 :
int num = 20;
int[] dx = new int[num]; // declaramos una array de las coordenadas X
int[] dy = new int[num]; // declaramos una array de las coordenadas Y
void setup() {
size(100, 100);
for (int i=0; i de 100, entonces...
dx[i] = -100; // ... redimensiona el valor...