Processing - Rosso, Verde, Blu

Con questo programma scritto tramite Processing, "Rosso, Verde, Blu", ho voluto mettermi alla prova per vedere a che livello di programmazione fossi arrivato con questo linguaggio. Il programma di per se è molto semplice, attraverso tre barre, una rossa, una verde ed una blu, è possibile variare il valore del relativo colore da un minimo di 0 ad un massimo di 255 (il valore impostato è visualizzabile attraverso un numero posto all'interno delle barre), visualizzando il risultato tramite un cerchio posto alla destra delle tre barre. In più sono presenti due pulsanti per colore, uno con il testo "min", posto al di sotto, per riportare a zero il valore del colore, e l’altro con il testo "MAX", posto sopra, per portare al massimo il valore del colore, ovvero 255.

Processing - Impariamo a scrivere

Ora vediamo come introdurre del testo nei nostri programmi  Prosessing, basta pochissimo. I comandi necessari sono essenzialmente tre, di cui due vanno inseriti in void setup(); il primo riguarda il "font" che vogliamo utilizzare (il font è il tipo di carattere, ad esempio Verdana, Times New Roman, Comics, ...) con la sua relativa grandezza:

textFont(createFont("nome del carattere", grandezza del carattere);

Altro comando che possiamo inserire nella prima parte del nostro programma, non è obbligatorio inserirlo, è:

textAlign(LEFT/CENTER/RIGHT);

questo comando ci permette di decidere la formattazione del testo se lo vogliamo a sinistra, a destra oppure al centro rispetto al punto che andremo ad inserire per la posizione del testo; LEFT allinea il testo sinistra, CENTER posiziona il testo centrato rispetto al punto e RIGHT allinea il testo a destra.

Nella parte di programma void draw() per inserire il testo vero e proprio dobbiamo scrivere il comando:

text("testo", X, Y);

X e Y sono le coordinate rispetto alle quali il programma posizionerà il testo; ricordarsi che il testo è sempre tra doppie virgolette.

Andiamo a creare un semplice programma per vedere come funziona il tutto, creiamo una finestra 200x100, vogliamo che venga visualizzato il testo "Hello world!" con il carattere Verdana e con una grandezza di carattere 20. Posizionare il testo con le coordinate che corrispondono al punto centrale della finestra (100;50) e scrivere anche le varie formattazioni del testo tramite il comando "textAlign".

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 è:

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>>

Processing - Primi passi nell'ambiente di sviluppo

Dopo aver scaricato sul nostro computer Processing (link per il download), apriamo il file compresso e adiamo a vedere com'è l'ambiente di sviluppo:

come potete notare l'interfaccia di programmazione, per chi ha già provato a programmare con Arduino, è identica all'IDE della scheda Open Source, se non una piccola diversità da punto di vista dei colori.

Nella parte in alto a sinistra abbiamo, FILE, se cliccato sopra ci uscirà una finestrella con i comandi salvataggio, di stampa, apertura di un nuovo file e anche degli esempi che ci potranno essere sempre utili per andare a ricercare strutture di codice che non ci ricordiamo oppure di utilizzare nuove funzioni e vogliamo vedere come esse funzionano.

EDIT raccoglie tutti i comandi di copia, incolla, ritaglia, etc etc. SKETCH per la compilazione del programma. TOOLS racchiude gli strumenti come il

selezionatore di colore, il quale fornisce il codice da inserire nel programma per ottenere il colore scelto, poi è presente anche la selezione del tipo di carattere di testo. In fine il comando HELP per darti una mano.

Sotto di questi troviamo (da sinistra verso destra) varie scorciatoie:

•         RUN – avvia il programma

•         STOP – termina il programma

•        NEW – apertura di un nuovo file

•         OPEN – apre un file precedentemente compilato

•         SAVE – salva le modifiche apportate al programma

•         EXPORT APPLICATION – permette di esportare il programma creato in modo tale da poterlo aprire senza entrare prima nell'ambiente di sviluppo (il programma può essere esportato per Windows (32/64 bit), Linux e Macintosh)

Abbiamo visto come si presenta l’ambiente di sviluppo, il prossimo passo sarà la visione dei comandi per la compilazione di semplici programmi che riguarderanno il disegno di forme geometriche (linee, triangoli, quadrilateri, etc etc) per poi passare all'interazione con mouse e tastiera fino ad arrivare ad interfacciare Arduino e PC tramite un’interfaccia grafica realizzata con Processing.

<<Pagina precedente                                                                  Pagina successiva>>

Processing - Presentazione

Internet è un calderone di conoscenza all'interno del quale si può trovare qualsiasi cosa; fonte di conoscenza dalla quale ci si può informare e imparare una miriade di cose. Navigando su internet tra siti e video su YouTube sono venuto a conoscenza di metodi per l'interfaccia tra Arduino e il PC. Il primo metodo che ho trovato è stato quello di utilizzare LabWiew, programma di National Intruments, l'ho trovato molto interessante guardando video di progetti e tutorial. C'è solamente un unico inconveniente, il programma è a pagamento, per questo ho continuato la ricerca di un'altra possibilità.Continuando la ricerca ho trovato PROCESSING (sito http://processing.org). Mi ha subito intrigato la possibilità di creare interfacce grafiche e animazioni senza avere una conoscenza approfondita nel codice, cosa che richiedono altri linguaggi di programmazione ( es. C, C++, Java); altro aspetto che mi ha colpito e che cercavo è la possibilità di creare programmi che permetto di interfacciarsi, dal nostro PC, con Arduino. Insomma, quello che cercavo! Tutto ciò mi ha spinto ad informarmi sempre di più su forum, siti dedicati a progetti e video tutorial fino ad arrivare al punto di scaricare l'ambiente di programmazione e iniziare a lavorarci un po’.



Ma prima un pochino di storia...Processing è stato creato da Casey Reas e Ben Fry, sviluppato con il precisoscopo di rendere molto semplice l'interazione con elementi grafici (realizzazioni diimmagini, animazioni ed interazioni) che con altri linguaggi di programmazione, come C++ e Java, diventa tutto molto complesso richiedendo al programmatore un alto livello di conoscenza dell'ambiente di sviluppo. Altro obbiettivo che Casey e Ben si erano prefissati era quello di creare un linguaggio per insegnare agli studenti di arte e di design come programmare e fornire agli studenti di scuole tecniche un modo semplice per lavorare con la grafica.Il software in fase alpha è stato rilasciato nell'agosto del 2002 fino all'aprile del 2005, e poi in beta pubblico fino al novembre del 2008. Durante questo lasso di tempo Prosessing è stato utilizzato in classi di studenti e da migliaia di persone nel mondo. I due creatori hanno sviluppato anche un sistema di estensione del software chiamato LIBRERIE (proprio come per Arduino) permettendo così alle persone di espandere questo novo linguaggio di programmazione. Il 29 novembre 2008 uscì la versione 1.0 del software.

Se conoscete già Arduino e come si programma troverete molte famigliarità tra l'ambiente di programmazione di Processing e di quello della più famosa scheda di prototipazione rapida. Per chi invece non avesse dimestichezza o non sapesse neanche cosa sia Arduino, non vi preoccupate, il linguaggio di programmazione di Processing è molto semplice ed intuitivo.

Pagina successiva>>