Presentazione processing 21/10/2016
0 likes230 views
Il documento presenta un'introduzione a Processing, un linguaggio di programmazione orientato alla grafica, creato nel 2001 al MIT e sviluppato per facilitare l'apprendimento della programmazione. Viene descritta la struttura di base di uno sketch in Processing, le funzioni principali per il disegno e l'interattività, e l'importanza dei cicli e delle condizioni. Infine, vengono forniti consigli su come esplorare la creatività utilizzando il framework e suggerimenti per ulteriori risorse.
Presentazione processing 21/10/2016
- 1. Processing E arte digitale Daniele Barattieri di San Pietro
- 2. 21/10/2016 Daniele Barattieri 2 Bio - Daniele ● Studente di Ing Informatica ● Sedicente Digital Artist ● Programmatore ● InfoSec wannabe ● Presidente µHack ● Lavoro
- 3. 21/10/2016 Daniele Barattieri 3 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
- 4. 21/10/2016 Daniele Barattieri 4 Download ● Sito ufficiale: https://processing.org/ ● Scompattate e avviate...
- 5. 21/10/2016 Daniele Barattieri 5 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
- 7. 21/10/2016 Daniele Barattieri 7 → Such Processing!
- 9. 21/10/2016 Daniele Barattieri 9 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
- 10. 21/10/2016 Daniele Barattieri 10 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
- 11. 21/10/2016 Daniele Barattieri 11 Sistema di coordinate ● L’origine sta nell’angolo in alto a sinistra – Y invertita! ● Unita: pixel ● Può disegnare “offscreen”
- 12. 21/10/2016 Daniele Barattieri 12 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
- 13. 21/10/2016 Daniele Barattieri 13 Remember… → → ; ← ← ● Il punto e virgola è importante!
- 14. 21/10/2016 Daniele Barattieri 14 First sketch
- 15. 21/10/2016 Daniele Barattieri 15 ESERCIZIO 1)Disegnare altre due faccine in altre due posizioni
- 17. 21/10/2016 Daniele Barattieri 17 ...che sbatta
- 18. 21/10/2016 Daniele Barattieri 18 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
- 19. 21/10/2016 Daniele Barattieri 19 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
- 20. 21/10/2016 Daniele Barattieri 20 Attenzione all’ordine! ● L’ordine con cui vengono chiamate queste funzioni è importante!
- 21. 21/10/2016 Daniele Barattieri 21 It’s Transform TIME! 1)PushMatrix 2)Translate/Rotate 3)Draw something 4)PopMatrix 5)...and repeat!
- 22. 21/10/2016 Daniele Barattieri 22 And now… COLORS!
- 23. 21/10/2016 Daniele Barattieri 23 Stroke() - Fill() - ColorMode() ● Stroke() – Imposta il colore dei contorni ● Fill() – Imposta il colore di riempimento ● ColorMode() – Seleziona che tipo di riferimento a colore usare 1)RGB - Red/Green/Blue 2)HSB - Hue/Saturation/Brightness
- 24. 21/10/2016 Daniele Barattieri 24 It’s something color
- 25. 21/10/2016 Daniele Barattieri 25 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
- 28. 21/10/2016 Daniele Barattieri 28 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
- 29. 21/10/2016 Daniele Barattieri 29 Mickey Mouse – mouseX & mouseY – mousePressed – mouseButton – mousePressed() – mouseReleased() – mouseClicked() – mouseReleased() – mouseMoved() – mouseDragged() – mouseWheel()
- 30. 21/10/2016 Daniele Barattieri 30 ...e ovviamente la tastiera! – key – keyCode – keyPressed – keyPressed()
- 31. 21/10/2016 Daniele Barattieri 31 One try, one kill!
- 32. 21/10/2016 Daniele Barattieri 32 Background ● Background() – Funzione che cancella tutto! – Accetta in ingresso un colore
- 33. 21/10/2016 Daniele Barattieri 33 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”
- 34. 21/10/2016 Daniele Barattieri 34 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”
- 35. 21/10/2016 Daniele Barattieri 35 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// }
- 36. 21/10/2016 Daniele Barattieri 36 Attenzione alle condizioni!
- 39. 21/10/2016 Daniele Barattieri 39 Questo titolo è davvero lungo perché volevo scrivere qualcosa di più interessante ma non sapevo come dirlo...
- 40. 21/10/2016 Daniele Barattieri 40 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!
- 41. 21/10/2016 Daniele Barattieri 41 Cool stuff! ...si ma come? :/
- 44. 21/10/2016 Daniele Barattieri 44 Get to the choppa! ● ...Ma non dimentichiamoci dell’interattività! ● Cerchiamo di mettere un po' di colore..
- 45. 21/10/2016 Daniele Barattieri 45 Codice completo
- 46. 21/10/2016 Daniele Barattieri 46 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/
- 47. 21/10/2016 Daniele Barattieri 47 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)
- 48. 21/10/2016 Daniele Barattieri 48 Spazio alla fantasia! ● Ora non resta altro che immaginare! Provate a modificare a piacere lo sketch, cercando di creare nuove forme…!
- 49. 21/10/2016 Daniele Barattieri 49 Consigli e link utili ● https://www.openprocessing.org/ ● https://www.processing.org/exhibition/ “Da piccoli bug derivano grandi opere..!” -cit. Daniele Barattieri
- 50. 21/10/2016 Daniele Barattieri 50 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! ←
- 51. 21/10/2016 Daniele Barattieri 51 Compiti per la prossima volta! ● Vogliamo ottenere un effetto simile alla testata del sito di Processing!
- 53. 21/10/2016 Daniele Barattieri 53 Grazie ● Contatti – Mail: danielebarattieri@gmail.com – µHack: info@muhack.org