Accademia Albertina, Torino, Scuola NTA
Corso DAPL08 - Corso DASL08
Insegnamenti ABTEC40, docente Chiari
a.a.2024-2025.

Modulo A - 60h - per LM, 1T + PM, 3T - Getting Started (Processing)

Il corso è dedicato a Processing, come strumento didatticamente utile per introdurre ai primi elementi della pratica della programmazione informatica, in un contesto di esempi orientato alla grafica e alla animazione digitali.

Su Processing

• Teniamo presente, esploriamo le numerose sezioni e consultiamo il sito ufficiale processing.org;
• Una one-page presentazione da parte degli autori scritta al tempo della prima progettazione di Processing, vent'anni fa;
• Testo di riferimento, e di studio, il libro di Casey Reas + Ben Fry; se volete ultima edizione da comprare on line, altrimenti prima edizione. Familiarizzatevi intanto con sommario e indice analitico;
• Il testo introduttivo degli autori di Processing, Casey Reas + Ben Fry Getting started;
• Per i curiosi di storia, un predecessore di Processing: Design by Numbers, di John Maeda (wiki bio);
• Forum, per eventuali domande: discourse.processing.org;
• Esempi, talvolta banali, in genere semplici e qualcuno virtuoso, ma in genere sempre interessanti a Open Processing (se volete potete aprire un vostro account gratuito e esporre i vostri sketch);
• per la versione per pagine web (JS), vedi p5.js;
• uno dei principali evangelisti di Processing: Daniel Shiffman (anche a TISCH, NYU), vedi il suo libro introduttivo Learning Processing, con web di supporto a http://learningprocessing.com/, e poi anche qui, qui e qui (sample) e il suo libro The nature of code, assai interessante.
• Un libro interessante, pieno di idee Generative Art (copia locale);
• Cercate in rete bio, scritti, opere, siti, collocazione lavorativa, presenze di Reas, Fry, Meade e Shiffman (e magari di altri nomi che che trovate collegati a questi e che vi sembrono interessanti) per capire che tipo di operatori essi siano: artisti? informatici? smanettoni? divulgatori? didatti? creativi? Per esempio io trovo il sito web di Programmed, una esposizione piuttosto interessante del 2019 al Whitney di NYC, e una recente intervista a Reas;
• un utile post comparativo di diversi tool: Max/MSP vs. PureData vs. Processing vs. openFrameworks vs. JUCE. (Se trovate altri post similari con giudizi comparativi, grato se me li segnalate);

Getting started di Casey Reas + Ben Fry

1. Capitoli Hello e Starting the code: Conoscenza preliminare con Processing. Installazione di Processing sulla vostra macchina. Breve storia, e presentazione del linguaggio. Intro generale all'uso dell'IDE. Come scrivere e salvare uno sketch (schizzo) nella finestra Sketch; Come seguire (compilare) e visualizzarne l'output nella finestra Display. Come esportare e creare un eseguibile (per le diverse piattaforme/OS).
• Extra: Se interessa, aprite un account su openprocessing.org. Vi serve riformulare i vostri Script in p5js, la versione JS di Processing (dovrete capire la differenza tra Processing e p5js, e per tradurre da un linguaggio in un altro vedi qui);
2. Progetto: Il testo di Casey Reas + Ben Fry propone di scrivere il codice per la realizzazione di una serie di grafiche con uno stesso soggetto -un Robot stilizzato-, via via più complesse, sia come grafica, via via leggermente animata, sia come codice sottostante. Alla fine di ogni capitoletto è presentato il codice per il Robot, ogni volta con un nozione di programmazione nuova e più avanzata.
   IL TUO PROGETTO è realizzare una similare sequenza di scripts, e di grafiche, ideando un tuo personaggio, e poi sviluppandolo come suggerito da Casey Reas + Ben Fry. Alla fine dovrai avere tanti sketch, uno per ogni stadio illustrato nel libro, ma ovviamente con il tuo personaggio. Richiedo inoltre che lo sfondo delle vostra animazione sia riempito da effetti grafici ispirati all'arte cinetica: grafiche astratte con elementi ripetuti in movimento;
3. Capitolo Draw: essendo Processing un linguaggio orientato al disegno di figure è stato dotato di istruzioni di base utili per disegnare le figure geometriche di base: segmenti, triangoli, rettangoli, cerchi, ecc.. Devi capire il sistema di coordinate per situare le figure nella finestra di display, vedete/studiate questa figura esplicativa:
   Clicca qui; Nota: lo (0,0) è in alto a sinistra. Da vedere anche la scelta dei colori, spessore 'matita', shapes, ecc.. Eseguire i primi esempi di scripts. Realizzare grafiche geometriche di base, componendo figure geometriche di base.
   Primo stadio grafica (corrispondente a Robot 1);
   • Figure elementari: point(x, y), line(x1, y1, x2, y2), triangle(x1, y1, x2, y2, x3, y3), quad(x1, y1, x2, y2, x3, y3, x4, y4), rect(x, y, width, height), ellipse(x, y, width, height).
     Esercitatevi a combinare le figure in programmi molto semplici.
   • Colori: familiarizzatevi con le nozioni di base per ottenere i colori al video (vedete il capitolo di Reas+Fry): nozione di colori additivi; codifica colori RGB (Red, Green, Blue), provate (0,0,0), (255,255,255), (255,0,0), (0,255,0), (0,0,255); Ricorda che il PDE ha un tool per scegliere i colori. Considerate anche HSB, la modalità alternativa di codificare i colori in termini di Hue tonalità, Saturation saturazione, e Brightness lucentezza. Nota: studia le definizione di colorMode
   • Stilizzazione grafica: background(value1, value2, value3), fill(value1, value2, value3), stroke(value1, value2, value3, alpha), strokeWeight(value), strokeJoin(PARAMETERS) 
     Combinate i comandi grafici in semplici programmi, per disegnare figure elementari, con colori distinti, e diversi spessori del 'segno'.
4. Capitolo Variables: Introduzione alla importante nozione di variabile. Il capitolo introduce anche al comando per un ciclo for (vedi sezione Repetion). Per capire i cicli, devi capire in che senso si può programmare di verificare una condizione (o espressione). Vedi come con i cicli si possono ottenere effetti di iterazione di uno stesso elemento grafico.
   Secondo stadio grafica (corrispondente a Robot 2).
   Inoltre, e MOLTO IMPORTANTE: leggi e comprendi il ruolo particolare di

   setup()

   e

   draw()

   , in particolare come vengono eseguite la prima una sola volta, la seconda ripetutamente, e come questo permetta di programmare delle animazioni;
5. Capitolo Response: Primi elementi di interattività, in particolare come usare la cattura della posizione del mouse, per effetti anche semplici, ma molto efficaci
   • riproduci, capisci e personalizza, esempi da 5-4 a 5-10
   • capisci come funziona map
   • (wrap up) Realizza questa grafica animata in Processing e in P5js (quest'ultima inseriscila nel tuo Step_11) personalizzando, per esempio creando anche un elemento verticale. Questa grafica richiede solo gli elementi di programmazione visti nei primi capitoli qui sopra.
     (ripresa da qui).
   • sezione Click Come catturare la pressione del Mouse, esempi da 5-12 a 5-14. Attenzione: in questa occasione Casey Reas + Ben Fry spiegano il costrutto di programmazione, FONDAMENTALE, if .... else ...., if(...){...}else{...}, if( espressione ){ istruzione }else{ istruzione alternativa };
   • sezione Location. Ok, non difficile
   Terzo stadio grafica (corrispondente a Robot 3. Vedi come ottiene l'effetto di allungamento del collo al premere del mouse, e riproduci qualcosa di simile nella tua grafica, ora leggermente animata, e animata interattivamente con l'osservatore/visitatore);
6. Capitolo Media: In questo capitolo si spiega come caricare una immagine (file grafico), per esempio per avere uno sfondo. Anche rivedete nel capitolo precedente come inserire lettere alfanumeriche, e far apparire delle scritte, e qui come modificare le font delle scritte. Non difficile, lo lascio alla vostra comprensione. Qualche attenzione ci vuole per capire cosa si intenda per shape DA FINIRE.
   Quarto stadio grafica (corrispondente a Robot 4. Inserisci anche tu uno sfondo, e ottieni più copie della tua grafica, in differenti scale. Potresti anche inserire delle scritte, e forse dei fumetti);
7. Capitolo Motion: QUESTO È UN CAPITOLO IMPORTANTE PER GLI EFFETTI DI ANIMAZIONE. In generale, ricorda che programmi la produzione di successivi fotogrammi, in ognuno dei quali il disegno è posizionato in posizione leggermente diversa dalla precedente, e che quando i 'fotogrammi' sono visti in rapida successione producono la percezione del movimento della figura (tecnica tipica ovviamente dell'animazione, e in effetti di tutto il cinema). Processing è tale che la funzione draw() viene eseguita ogni 1/60 di secondo, e questo permette di rendere l'effetto movimento, se in ogni esecuzione alcuni valori dei parametri presenti nelle istruzione di cosa disegnare (di posizione di questo o quel elemento grafico) sono mutati. Cerca di capire come questo avviene, per ciascuno degli esempi di questo capitolo. Per ognuna delle seguenti nozioni, riproduci e personalizza degli esempi:
   • Studia la frameRate()
   • Esempio da 7-3 a 7-5. Riproducili, possibilmente con diversa figura
   • Tweening Riproduci l'effetto di spostamento da un punto a un altro, possibilmente con diversa figura
   • Utilizza (a scatola chiusa) i due meccanismi di avere un valore a caso random, e di orologio timer
   • Considera come ottenere movimenti circolari, e come programmare un punto ch si muove disegnando una spirale, di diverse colori, ampiezze e velocità
   • IMPORTANTE: Sezione Translate, Rotate, Scale. Utilizza queste funzionalità per realizzare movimenti.
   Quinto stadio grafica (corrispondente a Robot 5.)
8. Capitolo Functions: IMPORTANTE: Nozione di Funzione. Come si possa scrivere un blocco di codice che realizza una qualche funzionalità, nominarlo con un identificativo unico definendo una funzione, e poi riutilizzarlo più invocando la funzione. Anche parametrizzando la funzione, potendo invocarla con specifici valori piuttosto che altri. Riproducete gli esempi da 8-3 a 8-7 (gufetto/owl), capendo bene le successive differenze di codice (e possibilmente anche con una diversa figura). FATE QUESTA PARTE CON ATTENZIONE.
   Sesto stadio grafica (corrispondente a Robot 6. La grafica potrà essere la stessa, ma il codice no, deve essere molto più definendo le istruzioni che disegnano la vostra grafica in una funzione, che poi invocat più con parametri diversi, o -come si dice - passando valori diversi per gli argomenti previsti dalla definizione della funzione)
9. Capitoli Objects e Arrays: Vedremo se ci arriviamo.