Processing - Linee, forme geometriche, colori, trasparenza,....

Incominciamo a creare il nostro primo programma con Processing, e dato che è stato ideato per semplificare la creazione di interfacce grafiche, il nostro primo passo riguarderà proprio questo aspetto, vedendo i comandi per la realizzazione di forme geometriche varie, colorate, con un contorno e con anche una determinata trasparenza.

Il nostro programma inizia con la definizione della dimensione (in pixel) della finestra nella quale compariranno i nostri oggetti, il comando per definirla è:

size(larghezza, altezza);

Poi possiamo decidere il colore dello sfondo con il comando:

background( colore );

(se non viene specificato alcun colore per lo sfondo verrà impostato di default il nero) il codice del colore è possibile recuperarlo in "TOOL" >> "COLOR SELECTOR".

Abbiamo la possibilità di definire un contorno, con il suo relativo spessore, alle varie figure che andremo ad inserire attraverso il comando:

strokeWeight( grandezza del contorno );

se vogliamo che tutte le forme abbiano lo stesso spessore, questo comando è da inserire all'inizio dopo i comandi "size" e "background", mentre se vogliamo soltanto determinate forme con lo spessore il comando "strokeWeight" è da aggiungere prima del comando della forma geometrica desiderata.

Il colore delle varie forme geometriche è possibile impostarlo tramite il comando:

fill( colore );

come per il comando "background" il codice del colore lo possiamo andare a recuperare da "TOOL" >> "COLOR SELECTOR"; con l'aggiunta di una virgola dopo il codice del colore scelto, possiamo impostare anche la trasparenza dell'oggetto, il comando, quindi, diventerà:

fill( colore, trasparenza);

Il colore, oltre essere definito da un codice specifico, può essere anche identificato dalla quantità di rosso (R), verde (G) e blu (B) (i tre colori primari), attraverso un valore che ha come minimo 0 fino ad un massimo di 255. Il comando "fill", con questa opzione nell’identificazione del colore, il comando diventa:

fill( R, G, B );

fill( R, G, B, trasparenza);

Dopo aver visto i comandi principali per la formattazione della finestra (dimensione e colore), dei comandi per l’eventuale contorno dei vari oggetti che inseriremo e del loro colore (e trasparenza), iniziamo ora a vedere i vari comandi per le varie forme geometriche, iniziamo con una linea, il cui comando è:

line(X1, Y1, X2, Y2);

la linea è definita dal suo punto di partenza individuato dalle coordinate (X1;Y1) e dal suo punto di fine (X2;Y2).

RICORDARSI che l'origine delle coordinate è l'angolo in alto a sinistra della finestra creata, le coordinate X aumentano andando verso destra e le coordinate Y andando verso il basso. Tutte queste coordinate sono espresse in pixel.

(0;0) X -----> (n, 0)

  Y    

   |    

   |    

  \/    

      (0, n)             

es. di rappresentazione delle coordinate 

Un triangolo:

triangle (X1, Y1, X2, Y2, X3, Y3);

come per la linea il comando "triangle" disegna un triangolo a partire dalle coordinate dei suoi tre vertici.

Un quadrilatero:

quad(X1, Y1, X2, Y2, X3, Y3, X4, Y4);

come per la linea ed il triangolo anche il quadrilatero è definito tramite le coordinate dei suoi quattro vertici.

Un rettangolo:

rect(X, Y, larghezza, altezza);

a differenza del comando per disegnare un quadrilatero qualsiasi, il comando "rect" deve essere definito da un punto di partenza, il suo spigolo in alto a sinistra definito dalle coordinate X e Y, la sua larghezza e la sua altezza, se queste ultime due sono uguali il risultato che otterremo sarà un quadrato.

Un ellisse:

ellipse(X, Y, larghezza, altezza);

le coordinate X e Y identificano il suo centro, mentre larghezza e altezza rappresentano le dimensioni dei suoi assi (larghezza identifica l’asse orizzontale mentre altezza quello verticale), se questi ultimi due sono uguali il risultato che otterremo sarà un cerchio.

Un arco:

arc( X, Y, larghezza, altezza, ang. inizio, ang. fine);

le coordinate X, Y indicano il punto di origine del nostro arco, la larghezza e altezza in

questo comando hanno la stessa funzioni delle omonime variabili del comando "ellipse", in aggiunta abbiamo l'angolo d'inizio e quello di fine, tutti e due da esprimere in radianti (HALF_PI = 90° ; PI = 180° ; PI+PI_HALF = 270°).

Dopo aver elencato e descritto i comandi principali con la quale potremo disegnare linee e forme varie di tutti i colori possibili con o senza contorni, adiamo a stilare il nostro primo programma nel quale saranno presenti tutti i comandi sopra

elencati con le loro varianti.

Il nostro programma in Processing prevederà una finestra di dimensioni 260, 400 pixel avente lo sfondi di colore grigio (codice colore 205), con uno spessore del tratto dei contorni pari a 2. Andremo a disegnare:

• una linea con punto di partenza (60;60) e punto di arrivo (200;20)
• un triangolo rosso con vertici: V1 = (200;60) / V2 = (200;100) / V3 = (60;100)
•  un quadrilatero verde con vertici: V1 = (100;120) / V2 = (180;140) / V3 = (160;160) / V4 = (60;160)
• un rettangolo blu con spigolo di coordinate (80;200) avente larghezza 100 e altezza 40
• un cerchio colorato avente centro C=(120;280) e raggio 50.
• un arco avente stesso colore del cerchio ma con trasparenza 100, il suo centro sarà in coordinate (120;350), raggio 70 e con un angolo totale di 270°.

(N.B. tutte le coordinate sono definite in pixle)

PROGRAMMA:

size(260, 400);  //grandezza della finestra

background(205);  //colore di sfondo 205 (grigio)

strokeWeight(2);  //spessore dei contorni

line(60, 60, 200, 20); //comando linea punto di partenza (60;60) punto di arrivo (200;20)

fill(255, 0, 0); //colore rosso (R = 255, G = 0, B = 0) 

triangle(200, 60, 200, 100, 60, 100);  //comando triangolo con vertici V1 = (200;60) / V2 = (200;100)                                                                / V3 = (60;100)

fill(0, 255, 0);  //colore verde (R = 0, G = 255, B = 0) 

quad(100, 120, 180, 140, 160, 160, 60, 160);   //comando quadrilatero con vertici V1 = (100;120) /                                                                                V2 = (180;140) / V3 = (160;160) / V4 = (60;160)

fill(0, 0, 255);  //colore blu (R = 0, G = 0, B = 255) 

rect(80, 200, 100, 40);  //comando rettangolo con coordinate (80;200), con larghezza 100 e altezza 40

fill(#D30FB3); //colore viola

ellipse(120, 280, 50, 50);  //comando ellisse con centro (120;180) e con larghezza e altezza 50

fill(#D30FB3, 100);  //colore viola con trasparenza 100

arc(120, 350, 70, 70, 0, PI+HALF_PI);  //comando arco con  centro (120;350), larghezza e altezza 70                                                                  con angolo di inizio 0 e di fine di 270° 

Il risultato ottenuto è:

Ora che abbiamo preso confidenza con le varie forme possiamo spingerci più in avanti, il prossimo comando che vedremo ci sarà utile per l'interazione con il mouse.

<<Pagina precedente                                                          Pagina successiva>>