Presentazione processing 21/10/2016

Processing E arte digitale

Daniele Barattieri di San Pietro

21/10/2016 Daniele Barattieri2

Bio - Daniele

● Studente di Ing Informatica● Sedicente Digital Artist● Programmatore● InfoSec wannabe● Presidente µHack● Lavoro


Processing WUT?!

● Nasce nel 2001 al MIT come libreria JAVA

● Nel 2012 prende vita propria grazie alla Processig Fundation

● Orientato a utenti alle prime armi grazie all’immediato feedback visivo

● Attualmente alla versione 3...per altro andate su Wikipedia


Download

● Sito ufficiale: https://processing.org/

● Scompattate e avviate...

https://processing.org/


Attenzione!

● Saranno date per scontate nozioni base di programmazione (variabili, funzioni, ecc)

● Se avete domande, fatele subito prima che non riusciate più a capire nulla

● Per eventuali approfondimenti, offritemi una birra e vi spiegherò tutto quello che vorrete


WARNING: MEMES


→ Such Processing!


Hello WORLD


Hello FUNCTIONS

● Setup()– Chiamata una sola

volta all’inizio– Come il nome, serve

per preparare variabili e ambiente di lavoro

● Draw()– Chiamata

ciclicamente– Corpo principale

dello sketch, mettiamo qui tutta la parte di disegno


Gimme size() – gimme life!

● Specifica la dimensione dello sketch– Da processing 3 non si

può modificare a runtime.. più o meno :D

– Va chiamata all’interno di setup()

– Vi si può specificare il motore grafico


Sistema di coordinate

● L’origine sta nell’angolo in alto a sinistra– Y invertita!

● Unita: pixel● Può disegnare

“offscreen”


Piccoli passi...

● Point(x,y)– Disegna un singolo

punto in X-Y

● Line(sx,sy,ex,ey)– Traccia una linea

partendo da SX-SY fino a EX-EY

● Circle(x,y,w,h)– Disegna un ellisse

inscritto nel rettangolo con angolo superione in X-Y, larghezza W e altezza H

● Rect(x,y,w,h)– Disegna un rettangolo,

ancolo superiore sinistro in X-Y, di larghezza W e altezza H


Remember… → → ; ← ←

● Il punto e virgola è importante!


First sketch


ESERCIZIO

1)Disegnare altre due faccine in altre due posizioni


...che sbatta


ENTER THE MATRIX!

● PushMatrix()– Da chiamare prima

per “salvare” l’attuale matrice di riferimento

● PopMatrix()– Da chiamare dopo

per ripristinare l’ultimo sistema di riferimento


Just translate and rotate..!

● Translate(x,y)– Sposta il sistema di

riferimento generale alle coordinate a X-Y

● Rotate(ß)– Ruota il sistema di

coordinate di ß radianti


Attenzione all’ordine!

● L’ordine con cui vengono chiamate queste funzioni è importante!


It’s Transform TIME!

1)PushMatrix

2)Translate/Rotate

3)Draw something

4)PopMatrix

5)...and repeat!


And now… COLORS!


Stroke() - Fill() - ColorMode()

● Stroke()– Imposta il colore dei

contorni

● Fill()– Imposta il colore di

riempimento

● ColorMode()– Seleziona che tipo di

riferimento a colore usare1)RGB - Red/Green/Blue

2)HSB - Hue/Saturation/Brightness


It’s something color


Tweak Mode

● Fighissima funzionalità di Processing 3!

– Consente la modifica di alcuni parametri dello sketch durante l’eseguzione dello stesso

Menu → Sketch → Tweak

OPPURE

CTRL + MAIUSC + T


TWEAKING BABY!


Mouse e tastiera

● Il mouse e la tastiera vengono costantemente monitorati – Processing mette a disposizione funzioni che

vengono automaticamente chiamate quando si verifica un determinate evento

– Esistono anche variabili globali costantemente aggiornate relative a mouse e tastiera


Mickey Mouse

– mouseX & mouseY– mousePressed– mouseButton– mousePressed()– mouseReleased()– mouseClicked()– mouseReleased()– mouseMoved()– mouseDragged()– mouseWheel()


...e ovviamente la tastiera!

– key– keyCode– keyPressed– keyPressed()


One try, one kill!


Background

● Background()– Funzione che

cancella tutto!– Accetta in ingresso

un colore


Cicli e condizioni

● I cicli ci permettono di eseguire più volte un pezzo di codice– Possiamo usare sia il ciclo principale “draw()”

oppure istruzioni come “for” e “while”

● I blocchi condizionali ci permettono di variare il flusso di eseguzione del codice– Blocchi “if..elseif...else” oppure “switch..case”


Cicli “for”

● Sintassi:

for(start;stop;step){

//codice//

}

● Il ciclo inizia stabilendo la condizione di “start”

● Ad ogni iterazione esegue “step” e controlla la condizione “stop”


Condizioni “if..elseif..else”

● Se la condizione è vero allora esegue il codice, altrimenti lo salta

● Sintassi:

if ( condizione ){//codice//

} else if (cond.){//altro codice//

} else {//altro ancora

codice//}


Attenzione alle condizioni!


Linee


...risultato?


Questo titolo è davvero lungo perché volevo scrivere qualcosa di più interessante ma non sapevo come dirlo...


Miglioriamo il codice

● Processing ha tante variabili globali molto utili– Width & height

dimensione attuale dello sketch

● Ricordatevi di commentare!– Aggiungendo “//”

potete inserire dei commenti al codice!


Cool stuff!

...si ma come? :/


Idee???


Soluzione


Get to the choppa!

● ...Ma non dimentichiamoci dell’interattività!

● Cerchiamo di mettere un po' di colore..


Codice completo


Un paio di cenni..

● Ci sono alcune funzioni molto interessanti:– Random(): restituisce numeri casuali– Sin() / Cos() / .. : per le funzioni trigonometriche– NoLoop(): per eseguire Draw() una sola volta– Fill() / noFill() / stroke() / noStroke(): da guardare– Millis(): restituisci i millisecondi dall’avvio– Text(): per disegnare una scritta– ...tantissimo altro…!

https://www.processing.org/reference/

https://www.processing.org/reference/


Ultimo argomento!

● Per salvare l’attuale output dello sketch usare la funzione saveFrame

● Le immagini sono salvate nella cartella dello sketch: “CTRL + K” per aprirla

● Sintassi:saveFrame(path)


Spazio alla fantasia!

● Ora non resta altro che immaginare!

Provate a modificare a piacere lo sketch, cercando di creare nuove forme…!


Consigli e link utili

● https://www.openprocessing.org/● https://www.processing.org/exhibition/

“Da piccoli bug derivano grandi opere..!”-cit. Daniele Barattieri

https://www.openprocessing.org/

https://www.processing.org/exhibition/


In the next episode..!

● Nella prossima lezione vedremo:– Programmazione più complessa– ...altri Memes! ←– Introduzione all’uso degli Oggetti– Librerie– ...altri Memes! ←– Ambiente 3D– Interazione con dispositivi– ...altri Memes! ←


Compiti per la prossima volta!

● Vogliamo ottenere un effetto simile alla testata del sito di Processing!


Domande?


Grazie

● Contatti– Mail: [email protected]– µHack: [email protected]

mailto:[email protected]

mailto:[email protected]


Bonus MEME

Presentazione processing 21/10/2016

Technology

Transcript of Presentazione processing 21/10/2016