Joan Soler-Adillon || Tutorial de Processing

Despatx 52.803 (Campus de la comunicació, UPF) || 93 542 1238
mail

----------------------------------------------------------------
----------------------------------------------------------------

TUTORIAL DE PROCESSING || Secció 4: Setup i Draw


1.- Setup y Draw: Processing en moviment

Si hi ha una cosa molt específica de Processing (i que posa especialment nerviosos els programadors de veritat) són el void setup() i el void draw().

Podeu ignorar de moment el void i els parèntesi en blanc (és un tema de funcions).

L’important és que setup i draw són les dues funcions principals de Processing. Les que s’executen sempre. Primer setup, una vegada, i després draw repetidament. Això és el que trenca la linealitat esticta en la lectura del codi i el que ens permet fer coses molt més interessants que simples dibuixos.

Fins ara les hem ignorat perquè el codi que fèiem servir s’executava una sola vegada de dalt a baix. Ara, tot allò que posem dins draw es repetirà, també de dalt a baix, fins que tanquem el programa (també es pot aturar amb codi però ara no ve al cas).

Amb aquests dos exemples ho veureu molt clar. Mireu el codi i després executeu-lo per veure si es compleixen les vostres previsions:

int numero;

void setup(){
numero = 13;
}

void draw(){
numero = numero + 1;
println(numero);
}

i

float pos;

void setup(){
size(400,100);
pos = 13;
}

void draw(){
pos = pos + 0.1;
ellipse(pos,50,20,20);
}

int sz = 30;

void setup(){
size(200,200);
}

void draw(){
ellipse(mouseX,mouseY,sz,sz);
}

I finalment, afegint una linia, esborrem en cada fotograma (frame) el dibuix anterior per crear sensació de moviment:

int sz = 30;

void setup(){
size(200,200);
}

void draw(){
background(0);
ellipse(mouseX,mouseY,sz,sz);
}


...i com sempre, la referència de Processing:

setup

draw


 

---------------------------------------------------------------------------------------

Your browser does not support the canvas tag.