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

Descriverei come Arte Generativa, l’arte di trasformare i numeri in processi visivi.

Per fare arte generativa non si deve essere solo un designer, ma (purtroppo) si deve conoscere un po’ di matematica e un pizzico di programmazione. Vi premetto che non sono una cima in matematica ne tanto meno un programmatore, e sono convinto che chiunque, come me, con un po’ di curiosità, possa seguire questo blog.

L’arte Generativa è l’integrazione e la sintesi di vari processi matematici concepiti per generare eventi e valori. Con software specifici, è possibile generare diversi tipi di eventi, oggetti statici o animati, oppure oggetti interattivi. Avviare un programma generativo vuole dire fare partire un processo autonomo, che crea immagini grafiche sullo schermo, assolutamente imprevedibili e irrepetibili, ma andiamo per ordine.

Inizierei con darvi qualche riferimento concreto e visivo di ciò che andremo ad analizzare.
Buona visione.

Brownian motion with processing from Pedro M Cruz on Vimeo.

Lia_4_DHUB from Lia on Vimeo.

Decode Recode from Lia on Vimeo.

Construction 76 from Lia on Vimeo.

MOTOR / AMBIENT REEL from KU-SCHNEIDER on Vimeo.

Questi sono solo alcuni esempi di cosa si riesce a fare con software generativi. Ricordo una delle prime applicazioni che ho utilizzato, si chiamava Signwave Autoillustrator di Ward Adrian. Autoillustrator sembrava essere un piccolo illustrator ma con dei buffi tools, ad esempio c’era uno strumento chiamato BUGS il quale aggiungeva sul canvas (stage) dei veri e propri scarafaggi della grandezza di pochi pixel, che disegnavano le proprie traiettorie (delle linee rette) e cambiavano direzione (in modo radom) solo quando incontravano una traiettoria già tracciata da un’altro bug. Rimanevo a bocca aperta per ore davanti al monitor osservando quello che stavano disegnando gli scarafaggi… Una micro artificial intelligence! Che figata! In quegli anni (si parla del 1999…) circolavano molti altri software generativi, ma Auto Illustrator era un po’ come Adobe Dreamweaver per i designer: zero code ma con le proprie limitazioni, esattamente come Dreamweaver… (non ce l’ho con Dremweaver :) ).

In quegli anni seguivo molto  Joshua Davis, artista Digitale di NY, che con il suo P R A Y S T A T I O N .com, si beccava da me minimo 40 retuning visitor al giorno (e altrettante quelle di Alexander Frank, il mio compagno di giochi quando lavoravamo insieme ;)). Joshua Davis generava le proprie composizioni con Adobe Flash (all’epoca proprietà Macromedia), la cosa bella è che metteva anche a disposizione il proprio codice! Potevi scaricare il file sorgente e studiartelo, ma ahimè non ci capivo nu cazz…E’ è stato così per molto tempo, quindi mi limitavo a fare esperimenti con Auto Illustrator e con Adobe Illustrator.

Da qualche tempo sto apprezzando Processing, un software in grado di disegnare tramite codice e non solo.

“Processing is an open source programming language and environment for people who want to program images, animation, and interactions. It is used by students, artists, designers, researchers, and hobbyists for learning, prototyping, and production. It is created to teach fundamentals of computer programming within a visual context and to serve as a software sketchbook and professional production tool.“

La descrizione la dice lunga su quel “open source programming language” specialmente sul “programming“, che noi designer badiamo tenere a dovuta distanza… Una sola riga di codice potrebbe farci venire il mal di testa! Giusto, ma progettando e pensando da codice ha i suoi mooolti vantaggi!

Immaginate un sistema, un mondo generato da particelle (prendiamo ad esempio i soliti cerchietti che ci piacciono tanto :)) e immaginate di avere il controllo di tutte le singole proprietà legate tra di loro per posizionare randomicamente i replicanti, sempre rispettando vincoli da noi imposti ad esempio:

A colpo d’occhio i cerchietti sembrerebbero generati e posizionati in modo casuale, ma ci sono regole che non notiamo a colpo d’occhio. Il sistema infatti interpreta e segue delle condizioni, ad esempio tutti i cerchi sono generati intorno a delle coordinate x, y ben definite e la composizione non va oltre altre coordinate x1, y1 (sempre stabilite), identificheremo x, y e x1,y1 come variabili entro i quali il progetto dovrà esistere. Una volta stabiliti i parametri e  nel momento in cui mandiamo in esecuzione il programma (runtime), questo interpreterà il codice costruendo di volta in volta il nostro scenario. Con le variabili sempre fisse, avremo sempre lo stesso disegno, ma se cominciamo a giocarci, modificando i valori, o facendoli (ri)generare di volta in volta, la nostra composizione sarà sempre diversa. La nostra bravura sarà solo quella di “suggerire” al programma quale sono le cose da rispettare e quali non.

Nei prossimi articoli cercherò di alleviare le vorstre letture con altri (mano)scritti legati a concetti matematici base, esempi visivi, codice su cui ragionare e quant’altro legato al futuro della progettazione visiva.

Stay tuned ;)

PS. Potete commentare non vi mangia nessuno :)

By the way, navigando qua e la ho trovato una cosa che potrebbe far invidia al caro Steve Jobs, Un sistema molto simile a quello usato da Tom Cruise in Minority Report definito dai propri sviluppatori “The Sixt Sense”. Sarà il futuro?

Già qualche anno fa, Vodafone fece un’operazione di marketing online per mettere in mostra la propria tecnologia e quello che sarebbe (visione fantascientifica) riuscita a fornire ai propri clienti in una realtà futura apparentemente molto vicina. Il progetto si chiamava “Vodafone Future Vision“, il link purtroppo non è più attivo, ma ho reperito comunque degli screenshoot dai mitici North Kingdom (l’agenzia che ha curato la campagna online):

Il “Sesto Senso” potrebbe anche permettere l’accesso ad informazioni aggiuntive a supporto della realtà e della vita quotidiana, un concetto molto simile a quello dell’ augmented reality, le applicazioni potrebbero essere le più disparate.

Il senso che ci farà interagire con le macchine, sarà un bene? Non vi sembra un po’ quello che i fratelli Fratelli Wachowski avevano immaginato per l’inizio del loro Matrix? 
(rimando alla visione di Animatrix).

Cosa ci aspetterà il futuro?
Ahahahahahahahahahahahahahahahahahahahahahahahahahaha…

Buona visione :)

COP15 – Generative Identity Software

COP15 Generative Identity Software – Evolutions Light from okdeluxe on Vimeo.

COP15 Generative Identity Software – Logo Fade from okdeluxe on Vimeo.

COP15 Generative Identity Software – Evolutions Dark from okdeluxe on Vimeo.

In Processing possiamo catturare un video in tempo reale. In questo caso partiamo da un piano inizialmente scuro coperto di sabbia. Spostando la sabbia, la luce generata dal retro proiettore viene catturata dalla videocamera trasformandola in area destinata alla vita. Il software quindi genera particelle, in questo caso pesciolini e particelle, che vengono proiettate nell’area più luminosa. La vita sembra toccare i bordi del piccolo stagno, dando così un senso di intelligenza artificiale ai micro abitanti digitali. Tutta l’istallazione funziona proprio per questo, grazie alla manualità ed all’interazione uomo/macchina. Immaginate un sistema di particelle all’interno di un area ben specifica sullo schermo, per quanto il sistema particellare sia ultramegastrafico, l’area e così di conseguenza le variabili, saranno sempre definite dall’uomo (lo spaccaCodici di turno :)).

Ho utilizzato questa fattispecie per introdurre le potenzialità di Processing, software che citerò spesso su questo blog, e di quanto gli artisti/coder di arte generativa tendano a simulare, con algoritmi e funzioni matematiche, la natura ed eventi fisici. La natura è retta da formule matematiche perfette come la sezione aurea e il numero di fibonacci interpretate già in passato dal grandissimo Leonardo o più vicino a noi Le Corbusier, Mondrian.

Take a look.

OASIS from yunsil heo on Vimeo.

ROY LICHTENSTEIN

Roy Lichtenstein torna ad esporre in Europa con una grande mostra antologica che si preannuncia come uno degli eventi artistici più importanti del nuovo anno.
La mostra, a cura di Gianni Mercurio, si inaugurerà alla Triennale di Milano il 25 gennaio e, nel mese di luglio, sarà trasferita al Ludwig Museum di Colonia, dove rimarrà aperta al pubblico fino al 3 ottobre 2010.
Realizzata in collaborazione con The Roy Lichtenstein Foundation e prodotta dalla Triennale di Milano e da Alphaomega Art, in collaborazione con il Comune di Milano, l’esposizione include oltre cento opere, tele per lo più di grande formato, oltre a numerosi disegni, collages e sculture provenienti da prestigiose collezioni pubbliche e private internazionali, tra le quali il Ludwig Museum di Colonia, il Ludwig Forum di Aachen, il Louisiana Museum di Copenaghen, il Whitney Museum e il Gugghenheim Museum di New York, il Moderner Kunst Museum di Vienna, the Broad Art Foundation di Los Angeles.

triennale.it
lichtensteinfoundation.org