Come lo scorso venerdi, fuori piove ed io inizio ad aggiorare il mio blog. Oggi (data di pubblicazione dell’articolo) è venerdi una settimana dopo e fuori NEVICA :))); introduciamo cosi l’argomento del giorno ovvero i cicli.
Prendiamo in esame la frequenza di aggiornamento che purtroppo non posso per ora rendere regolare, ma se ipotizzando una frequenza regolare settimanale, potremmo descrivere il ciclo così: IO, AGGIORNO il blog OGNI SETTIMANA per N settimane utopicamente all’infinito o per un numero n finito di volte. Il ciclo non è nient’altro che fare una cosa, per n volte. Immaginate il ciclo di una donna… non in quel senso (che skifo…) ma inteso appunto una cosa che avviene ciclicamente, oppure al Motociclo o alla (bi)cicletta, chiamati in questo modo per il moto ciclico della ruota.
Tornando a noi, Wikipedia “dice che“:
“In informatica, un ciclo è una struttura di controllo che permette di eseguire ripetutamente un certo insieme di istruzioni”
Detto questo riflettiamo e immaginiamo a tutte le applicazioni che potremmo fare con l’aiuto dei cicli… Chissà le cose che vi sono venute in mente… prendiamo ad esempio il classico effetto che invade le HomePage nel periodo di natale: i fiocchi di neve, che qui continuano a cadere incessantemente.
Ho avuto anch’io tale incubo e risolvevo tutto con Flash, una timeline… due timeline… tre timeline… n timeline… Un’attimo… ma il Calculateur, non doveva aiutarci ad evitarci tanti sbattimenti?!?!? Infatti, proprio la scoperta e la comprensione di tali cicli, mi ha introdotto e mi ha fatto capire l’importanza e la potenza nel disegnare con il codice (gli amici programmatori o [CODER] si faranno 4 risate leggendo questo articolo :)).
Ho cominciato a capire il codice con Flash, ma Processing è a mio parere molto più semplice per capire concetti base di programmazione generativa. Quindi, per prima cosa downloadatevi Processing (completamente gratuito) e installatelo sul vostro computer (c’è per qualsiasi tipo di OS).
Una volta aperto il programma, noteremmo (sempre noi designer) che non c’è un cazzo di tool per disegnare!!! Ne una timeline!!! Ma che è? Incollate il seguente codice all’interno del pannello:
[cc lang="javascript"]
size(500,500);
fill(255);
stroke(0);
ellipse(250,250,150,150);
[/cc]
Mandate in “Run” il programma (per MacUser cmd+R – PcUser ctrl+R) e dovreste visualizare un cerchio bianco con la traccia nera, di 250 px di diametro posizionato al centro dello stage grigio.
Rapido sguardo al codice (Andando avanti cercherò di spiegarvi sempre di più)
[cc lang="javascript"]
//Setto la grandezza del mio stage
size(500,500);
//Dico al programma, che tutto quello che verrà disegnato
//avrà il riempimento bianco
fill(255);
//Dico al programma, che tutto quello che verrà disegnato
//avrà il bordo nero
stroke(0);
//Disegnamo l’ellisse con i seguenti parametri
//(x , y , larghezza , altezza)
ellipse(250,250,150,150);
[/cc]
Vi rimando alla reference guide di Processing, molto chiara e correlata di esempi pratici. Vi rimando in particolare agli strumenti di disegno “2D Primitives” , “Curves” e “Colors”, per prendere un po’ di dimistichezza con gli oggetti e i parametri di costruzione.
Dovendo disegnare più cerchi come posso fare? Tempo fa avrei fatto l’operazione sopra descritta (in Flash, un clip, diverse timeline), allo stesso modo potrei fare con processing ovvero:
[cc lang="javascript"]
//Setto la grandezza del mio stage
size(500,500);
//Dico al programma, che tutto quello che verrà disegnato
//avrà il riempimento bianco
fill(255);
//Dico al programma, che tutto quello che verrà disegnato
//avrà il bordo nero
stroke(0);
//Disegno il primo cerchio, con coordinate random
float randomX1 = random(500);
float randomY1 = random(500);
ellipse(randomX1,randomY1,50,50);
//Disegno il secondo cerchio, con coordinate random
float randomX2 = random(500);
float randomY2 = random(500);
ellipse(randomX2,randomY2,50,50);
//Disegno il terzo cerchio, con coordinate random
float randomX3 = random(500);
float randomY3 = random(500);
ellipse(randomX3,randomY3,50,50);
//Disegno il quarto cerchio, con coordinate random
float randomX4 = random(500);
float randomY4 = random(500);
ellipse(randomX4,randomY4,50,50);
[/cc]
Che Palle!!!
Analizziamo comunque il codice, di modo che, step by step introdurremo gli oggetti ed i metodi di scrittura che utilizza Processing.Il codice è fondamentalmente java ed è molto semplice!
Cominciamo con queste tre righe:
float randomX1 = random(500);
float randomY1 = random(500);
ellipse(randomX1,randomY1,50,50);
Notere che come tutti gli editor di script, il codice viene evidenziato diversamente a seconda ciò che si scrive. In questo caso i “comandi” vengono evidenziati in arancione (mi riferisco alla visualizzazione nel pannello text del programma).
float
Il comando float ci restituisce un numero non intero, ciò significa che all’interno della variabile (ad esempio randomX1 ovvero la prima mia variabile random) i valori possono avere sia numeri interi che naturali (se si lavora con numeri interi si usa int, ma avremo modo di esaminarlo più avanti). Costruiremo le nostre variabili (ovvero le nostre x e y in questo caso) con un’altro oggetto, ovvero random.
random
Il programma usa diversi comandi random, quello che ci interessa per ora è questo. La sintassi è semplicissima: se vogliamo un numero random compreso tra 0 e un valore n (anche non intero) basterà scrivere: random(n); dove n è il mio valore massimo che voglio imporre alla variabile, in questo caso 500, che è anche la larghezza dello “stage” = all’altezza “stage” = 500 px.
ellipse
Dal nome si intuisce che parliamo di ellissi :). I parametri per creare questo oggetto sono x, y, width, height e nel nostro caso:
x = randomX1 = random(500)
dove “randomX1” è la mia variabile custom, potrei scrivere anche “X1″, oppure “laMiaVariabileX1″, posso chiamarla un po’ come cazzo mi pare, il valore di tale variabile sarà un numero float (a virgola mobile) compreso tra 0 e 500, infatti se rigeneriamo il nostro disegno ci accorgiamo che i cerchietti avranno altre coordinate, sempre diverse ogni volta che mandiamo in runtime il programma. Stesso vale per le coordinate y:
y = randomY1 = random(500)
Inoltre vogliamo disegnare un cerchio, quindi la largezza e l’altezza dell’ellisse dovrà essere uguale, infatti:
width = 50 = height = 50
Chiaro no?
Basta ripetere per 100, 200, 500 volte il procedimento e cambiare di volta in volta i nomi delle variabili per assegnarle agli altri cerchi da costruire… Che straPalle…
Provate a copiare e incollare il codice seguente nel text editor di Processing
[cc lang="javascript"]
size(500,500);
fill(255, 0, 0);
stroke(255);
for (int i = 0; i <; 400; i = i+1) {
float randomX = random(0,500);
float randomY = random(0,500);
ellipse(randomX,randomY,50,50);
}
[/cc]
Dovreste visualizzare una cosa del genere:
La riga che moltiplica i cerchi è la seguente:
for (int i = 0; i < 400; i = i+1) {
}
Il ciclo for ripete un blocco di istruzioni finché la condizione specificata è vera.
for(istruzione_di_inizializzazione_delle_variabili; espressione; istruzione_di_modifica_delle_variabili)
{
istruzione1;
istruzione2;
istruzioneN;
}
L’istruzione di inizializzazione permette di impostare un valore iniziale alle variabili che verranno utilizzate nel ciclo;
l’istruzione di modifica delle variabili permette di incrementare (o decrementare) la variabile utilizzata nel ciclo.
In poche parole la i (istruzione_di_modifica_delle_variabili), si inrementa per ogni passaggio, la quale è controllata dall’espressione : i<400 che appunto verifica che la condizione i(+1*n volte) sia minore di 400. Tutte le volte che si avvera l’espressione, manderà in play le istruzioni al suo interno contenute. Sempre nel nostro caso, l’espressione i<400, si avvererà per 400 volte, visto che partiamo con un valore i=0 e, per ogni passaggio la variabile i viene incrementa di 1.
Na figata eh?!?!? Altro che la mongolfiera…
Divertitevi adesso a modificare i parametri e a prendere confidenza con Processing, ricordatevi di sbirciare sempre la reference guide!!!
La prossima volta approfondiremo il concetto di ciclo.
Stay tuned!!!
Leave a Reply