giovedì 19 febbraio 2015

Processing - Interazione con il mouse

Dopo aver imparato a disegnare varie forme, con colori differenti, trasparenze e contorni, iniziamo adesso ad interagire con il programma tramite il mouse. I comandi che introdurremo sono semplicemente tre, due per conoscere la posizione X e Y del cursore e l'altro per sapere se un tasto del mouse è stato premuto oppure no.
Incominciamo con i comandi per conoscere la posizione del nostro cursore, i due comandi sono:

mouseX per l'ascissa e mouseY per l'ordinata

Andiamo subito a provare questi due nuovi comandi, scriviamo un programma con una
finestra 250x250 pixel e che per qualsiasi sia la posizione del cursore venga disegnato un cerchio colorato di raggio 25.
PROGRAMMA:



void setup(){
size(250, 250);  //grandezza della finestra
background(205);  //colore dello sfondo (205 = grigio)
}

void draw(){
  fill(#17D8FC);  //colore del cerchio
  ellipse(mouseX, mouseY, 25, 25);  //il programma stampa sulla finestra cerchi di raggio 25 su ogni                                                                nuova posizione del nostro cursore
}

Il risultato ottenuto è:


non appena andremo a spostare il mouse il programma stampa continuamente cerchi
della dimensione e del colore scelto.

A differenza del programma precedente, questo è stato diviso in due parti:

void setup() {.....}

parte di programma nella quale sono racchiuse tutte le informazioni che devono essere
eseguite una sola volta come ad esempio la dimensione dell'ambiente di lavoro, il colore dello sfondo, lo spessore dei contorni, etc etc

void draw() {.....}

i codici inseriti in questo parte vengono continuamente ripetuti fin quando il programma non viene terminato.
Abbiamo appena visto come disegnare una figura in base alla posizione del mouse, ora impostiamo il programma in modo tale che disegni cerchi solamente quando premiamo un tasto del mouse; il comando per far riconoscere al programma che abbiamo cliccato un tasto qualsiasi del mouse è:

mousePressed

questo comando è utilizzabile solamente in un algoritmo in cui è imposta una condizione (if, if/else), se il mouse è stato premuto allora il programma porrà vera la condizione è andrà avanti, se non è premuto il programma non esegue tale parte di programma.

Modifichiamo ora il programma precedente in modo tale che venga stampato lo stesso
cerchio ma solamente quando il mouse è premuto.

PROGRAMMA:



void setup(){
size(250, 250);
background(205);
}

void draw(){
  if(mousePressed){   //rispetto al programma precedente abbiamo aggiunto la condizione che se                                              clicchiamo con il mouse il programma stampa un cerchio
   fill(#17D8FC);
   ellipse(mouseX, mouseY, 25, 25);
 }

}

Potremo modificare ulteriormente il programma in modo tale che, una volta premuto un tasto del mouse, questo stampi sempre un cerchio ma con un colore casuale. Per ottenere colori casuali dobbiamo all'inizio del programma definire tre variabili, una per il colore rosso, una per il verde e una per il blu. Dopo aver definito le variabili dobbiamo fare in modo che il programma scelga autonomamente valori casuali, questo risultato lo otteniamo utilizzando il comando:

random(N);

questo comando sceglie in maniera casuale un numero da 0 ad N per ogni ciclo compiuto dal programma.

Modifichiamo il programma per ottenere il risultato descritto in precedenza:

PROGRAMMA:





float R = 0;  //dichiarazione variabile per il rosso
float G = 0;  //dichiarazione variabile per il verde
float B = 0;  //dichiarazione variabile per il blu

void setup(){
size(250, 250);  
background(205);
}

void draw(){
  R = random(255);  //scelta casuale del valore di rosso
  G = random(255);  //scelta casuale del valore di verde
  B = random(255);  //scelta casuale del valore di blu
  if(mousePressed){
   fill(R, G, B);
   ellipse(mouseX, mouseY, 25, 25);
 }
}

il risultato ottenuto:

<<Pagina precedente                                                                        Pagina successiva>>

Nessun commento:

Posta un commento