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

Domotica - Controllo tenda

L’innalzamento e l’abbassamento della tenda è ottenuto tramite pulsanti fisici inoltre se la tenda è del tutto abbassata e si preme il pulsante per abbassarla, il programma non farà nulla; lo stesso avviene per la tenda del tutto avvolta.Sono presenti due sensori: un anemometro, che permette alla centralina di determinare la velocità del vento, e un pluviostato, speciale trasduttore che riesce a determinare se sta piovendo oppure no  grazie al variare della sua resistenza. Questi due sensori tengono sotto controllo le condizioni ambientali esterne, non appena uno dei due rileva un  valore che supera quello prefissato nel programma la tenda viene riavvolta automaticamente per evitare danni.

Programma Arduino

const int btSuTenda = 5;

const int SuTendaPin = 22;

int StTSu = 0;

const int btGiuTenda = 6;

const int GiuTendaPin = 52;

int StTGiu = 0;

int StTenda = 0;

void setup() {

pinMode (btSuTenda, INPUT);

pinMode (btGiuTenda, INPUT);

pinMode (SuTendaPin, OUTPUT);

pinMode (GiuTendaPin, OUTPUT);

pinMode (pluvPin, INPUT);

pinMode (AnPin, INPUT);

}

void loop() {

ce = 0;

  t = millis();

  for (se = 0; se < 10000; se++) {  

    state = digitalRead(AnPin);

    if (state != oldstate) {

      ce++;

      oldstate = state;

    }

  }

  t = millis() - t;

  ce = ce / 2;

  f = 1000 * ce / t;

Questo ciclo for all'interno del programma rappresenta il contatore della frequenza di un treno di impulsi (segnali ottenuti dal pluviostato) in ingresso in una entrata digitale. Quest'azione viene ripetuta sempre durando 10000 cicli. Durante questo tempo il programma conta gli impulsi in ingresso e tramite opportuni calcoli matematici li trasforma in frequenza. 

  StTGiu = digitalRead(btGiuTenda);

  StTSu = digitalRead (btSuTenda);

  if ((StTGiu == HIGH) && (StTenda == 0)) {

    digitalWrite(GiuTendaPin, HIGH);

    delay(9500);

    digitalWrite(GiuTendaPin, LOW);

    StTenda = 1;

    delay(50);

  }

Parte di programma che abbassa la tenda non appena si pigia il pulsante, L'azione viene completata solamente se la tenda è alzata (stato definito dalla variabile StTenda, variabile a 0 la tenda è alzata mentre se la variabile è a 1 la tenda è abbassata).

  if ((StTSu == HIGH) && (StTenda == 1)) {

    digitalWrite(SuTendaPin, HIGH);

    delay(9500);

    digitalWrite(SuTendaPin, LOW);

    StTenda = 0;

  }

Parte di programma che alza la tenda non appena si pigia il pulsante, L'azione viene completata solamente se la tenda è abbassata (stato definito dalla variabile StTenda, variabile a 0 la tenda è alzata mentre se la variabile è a 1 la tenda è abbassata).

  if ((StTenda == 1) && ((analogRead(pluvPin) < 500) || (f >= 4))) {

    digitalWrite(SuTendaPin, HIGH);

    delay(9500);

    digitalWrite(SuTendaPin, LOW);

    StTenda = 0;

  }

}

Parte in cui se il programma riconosce che la tenda è abbassata e se la lettura del pluviostato è al di sotto di un determinato valore (fissato da noi per far riconoscere al programma che sta piovendo) oppure se la frequenza in ingresso dall'anemometro è troppo alta la centralina alzerà automaticamente la tenda per evitare danni.