E1. Ricombinare una fotografia

Kensuke Koike, One of them (particolare), 2019

Obiettivo

Scomporre una fotografia e ricomporla progressivamente, per intero o in modo parziale, ricombinando le singole parti fino a raggiungere un risultato inatteso, in cui la figura cambia di senso, si scioglie nelle sue componenti plastiche o riemerge dai frammenti.

Modalità

L’esercitazione si svolge con l’assistenza di OpenCode: il lavoro principale è decidere come scomporre e ricombinare la fotografia, da cui dipendono le richieste all’agente. I valori numerici conviene invece modificarli direttamente nel codice.

Per iniziare, creare la cartella con il comando /crea es1 e salvarci la fotografia scelta.

La fotografia, propria o libera da copyright, dovrà rappresentare un soggetto reale che suggerisca qualche operazione possibile con le istruzioni di p5.js. Il formato può prevedere la compressione a perdita di dati (ad esempio il JPEG) ma, se non è voluto, dovrà essere impostato a una qualità di almeno l'85% per non influire involontariamente sul risultato del procedimento.

Per lo sketch la fotografia è solo una griglia di colori in posizioni: ogni operazione agisce sul piano plastico, mentre la figura esiste per chi guarda. Conviene quindi osservare che cosa succede alla figura a ogni passaggio, fino al punto in cui cambia di senso, si dissolve o riemerge.

Possono essere applicati anche filtri o altre operazioni sui singoli pixel e può essere prevista una componente animata, ma dev’essere comunque presente una componente (ri)combinatoria.

I dati della foto scelta dovranno essere indicati nel commento iniziale del codice, secondo lo schema riportato nei vincoli seguenti.

Vincoli

• fotografia salvata nella cartella dello sketch e caricata con await loadImage() dentro async function setup(), senza preload(), che p5.js 2 non usa più;
• una parte ricombinatoria: porzioni della fotografia spostate in altre posizioni; filtri, reinterpretazioni dei colori e trasformazioni dell’intera immagine, da soli, non bastano;
• commento iniziale con l’indirizzo della pagina della fotografia, oppure “fotografia propria”, e il nome dell’autore, se la licenza lo richiede;
• anteprima “preview.png” con un fotogramma rappresentativo del risultato.

Lo schema del commento iniziale:

  // Fotografia: indirizzo della pagina, oppure "fotografia propria"
// Autore: nome del fotografo, se la licenza lo richiede
// Procedimento (consigliato): come viene scomposta e ricomposta la fotografia

Consigli

Reperimento immagini

Se non si usano fotografie proprie, è possibile trovare immagini gratuite su siti come Pexels, Pixabay e Unsplash, oppure con il motore di ricerca Openverse, che raccoglie immagini con licenze libere. È comunque sempre meglio fare attenzione alle singole licenze riportando, almeno come commento nel codice, il nome del fotografo.

È possibile far generare l’immagine “fotografica” da qualche sistema di IA ma l’obiettivo dell’esercitazione non è generare immagini ma lavorare con la ricombinazione, e il cambiamento di senso, di una foto esistente. La generazione può al limite essere utile se si ha già un’idea ben precisa e non si trova l’immagine adatta all’elaborazione che si ha intenzione di implementare.

Spunti per la ricombinazione

Gli spunti principali possono venire anche solo dai lavori del prolifico Kensuke Koike. Usa praticamente sempre procedimenti fisici, a volte molto originali, ma questi hanno spesso una componente “programmata”.

In alternativa può essere fatta una ricerca con le parole “generative photography”. Altri spunti, con gli esempi di codice semplificato, si trovano nella lezione 1, nei capitoli Dal figurativo al plastico e Dal plastico al figurativo.

In qualsiasi caso, è meglio tenere conto delle peculiarità dei nuovi media evitando di limitarsi a simulare tecniche più semplici da applicare alle fotografie fisiche.

Implementazione delle tecniche

Il caricamento della fotografia con p5.js 2 è mostrato nella slide Lettura e visualizzazione di una bitmap. Il codice di esempi che usano ancora preload() va adattato, e OpenCode lo fa se glielo si chiede. Per vedere lo sketch bisogna aprirlo con Live Server (pulsante “Go Live”) perché il browser non permette di caricare la fotografia se viene aperto direttamente dal file.

Per evitare di perdersi con istruzioni che fanno uso di molti parametri (come copy() e blend()) si consiglia di preferire l’uso delle istruzioni get(), per estrarre e memorizzare porzioni di immagini (che potrebbero essere usate più volte), e image(), che semplifica l’indicazione della sola posizione di visualizzazione (anche in questo caso, eventualmente ripetuta).

Per operazioni più complesse si può usare anche la classe p5.Graphics che permette di creare una sorta di livello invisibile in cui è possibile usare le stesse istruzioni di disegno del canvas ma decidendo se, quando e dove visualizzare il risultato.

Altre istruzioni che si potrebbero utilizzare per “bucare” il canvas o le immagini generate in un’istanza della classe p5.Graphics, sono erase() e noErase().

Consegna