Setup i Draw

Els tipus de programes que hem fet fins ara són els anomenats programes estàtics. Això significa que mai canvien. S’executen una sola vegada i, quan arriben a l’última línia del codi, s’aturen. Si volem que un programa sigui interactiu, hem d’habilitar l’entrada continua de dades mentre el programa s’executa. Això només és possible si l’execució és contínua.

Amb Processing pots crear programes que s’executin contínuament utilitzant la funció draw(). Aquesta funció repetirà el bloc de codi una vegada i una altra fins que el programa s’aturi. Tanmateix, no tot el codi escrit necessita ser repetit contínuament. Per al codi que només necessita ser executat una única vegada, has d’utilitzar la funció anomenada setup().

Escriguem de nou un programa que dibuixi una línia, però aquesta vegada utilitzant les noves funcions:

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

void draw() {
line(0 ,0, width, height);
}
  • setup(): El codi entre parèntesi s’executa una única vegada quan el programa comença. Només necessitem establir la mida de la finestra una vegada, al principi del programa.
  • draw(): El codi entre parèntesi s’executa un cop rere un altre. S’executa línia per línia, de dalt a baix fins a l’última línia, on torna a començar des del principi.

Aquest programa estableix la mida de finestra a 300 x 300 píxels i després dibuixa una línia sobre tota la finestra una vegada i una altra. En aquest moment, encara no es pot apreciar que això està passant un cop rere un altre, així que escriguem un altre programa per fer-ho més visible.

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

void draw() {
line(0, 0, mouseX, mouseY);
}
  • mouseX: La coordenada X del cursor del ratolí.
  • mouseY: La coordenada Y del cursor del ratolí.

Aquest programa et permet interactuar amb la pantalla mentre mous el ratolí, com mostra la següent imatge. Això succeeix perquè cada vegada que el codi dins de draw() s’executa, una nova línia es dibuixa. El segon punt de la línia canvia segons la posició del cursor del ratolí.

Com pots veure, estàs deixant un rastre de línies quan mous el ratolí. Això és perquè mai s’elimina cap línia dibuixada ni res la sobreescriu. Què creus que passarà quan executis el següent programa?

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

void draw() {
background(255);
line(0, 0, mouseX, mouseY);
}