E1. Illusioni in movimento

 

Richard L. Gregory e Priscilla Heard (primi a notare l'effetto), Café Wall Illusion, 1979

Obiettivo

Animare un’illusione ottica geometrica composta da elementi ripetuti, facendo in modo che il movimento ne conservi l’effetto percettivo oppure lo annulli e lo ripristini a intervalli.

Modalità

L’esercitazione si svolge con l’assistenza di OpenCode, senza una fase di scrittura manuale del codice: il lavoro principale è capire la regola che produce l’effetto, 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: il file “sketch.js” serve già nella prima fase, perché le informazioni sull’illusione scelta vanno annotate nel suo commento iniziale, secondo lo schema riportato nei vincoli.

Fase 1: analisi dell’illusione

• scegliere un’illusione ottica geometrica in bianco e nero, composta da molti elementi uguali ripetuti secondo una regola (file, colonne, cerchi concentrici…): sono escluse quelle formate da due sole figure, come le frecce di Müller-Lyer;
• annotarne il nome, se si conosce, e l’indirizzo della pagina in cui è stata trovata (non quello dell’immagine);
• descrivere con parole proprie la regola che genera l’immagine (quali sono gli elementi, come si ripetono, che cosa cambia dall’uno all’altro): non è un vincolo, ma rende molto più semplici le fasi successive, e OpenCode, se interpellato, aiuta con delle domande invece di scriverla;
• individuare i parametri critici, cioè i valori da cui dipende l’effetto, come lo sfasamento delle file di mattoni nell’illusione della copertina.

Fase 2: riproduzione statica

• chiedere a OpenCode di costruire la regola, non l’immagine: prima un singolo elemento, poi la sua ripetizione;
• trovare, cambiando a mano i valori dei parametri critici, quelli per cui l’effetto è più evidente e quelli per cui scompare, e annotarli nel commento iniziale.

Fase 3: movimento

Far variare nel tempo la posizione degli elementi o i valori dei parametri critici, scegliendo uno dei due comportamenti:

• un movimento che conserva l’effetto, ad esempio file che scorrono mantenendo lo sfasamento reciproco;
• un’alternanza fra effetto presente e assente, ad esempio uno sfasamento che oscilla fra i valori annotati.

Vincoli

• solo bianco, nero e grigi, indicati in background(), fill() e stroke() con un solo valore (più l’eventuale trasparenza);
• elementi ripetuti generati con cicli for, non disegnati uno per uno;
• parametri numerici in variabili dichiarate all’inizio del file, compresi quelli critici;
• commento iniziale con il nome dell’illusione, l’indirizzo della pagina e i valori dei parametri critici;
• movimento in draw(), applicato agli elementi o ai parametri critici: ruotare o spostare l’intera immagine non basta;
• anteprima “preview.png” con un fotogramma in cui l’effetto è visibile.

Lo schema del commento iniziale:

  // Illusione: nome dell'illusione
// Fonte: indirizzo della pagina in cui è stata trovata
// Regola (consigliata): quali elementi, come si ripetono, che cosa cambia dall'uno all'altro
// Parametri critici: per ciascuno, il nome della variabile
//   effetto più evidente con ..., nessun effetto con ...

Consigli

Le illusioni ottiche si possono trovare molto facilmente con Google Immagini usando parole come “geometric optical illusions”.

Se non si trova subito il nome dell’illusione, si possono usare siti che permettono di cercare altre pagine contenenti la stessa immagine, come TinEye o, ancora, Google Immagini. In alternativa i nomi si possono cercare in alcuni siti che si occupano proprio di illusioni ottiche, come quello di Michael Bach, quello di Akiyoshi Kitaoka o Optical Illusion and Focuses.

Per i riferimenti artistici, la ripetizione e il movimento percepito sono il tema stesso delle opere Op Art di Bridget Riley e Victor Vasarely.

Le ripetizioni su righe e colonne si ottengono con i cicli for, spiegati nel capitolo 7 della guida già seguita nell’esercitazione 0 e, per le griglie, nella slide sull’uso di for annidati. Per spostare o ruotare i singoli elementi servono le trasformazioni geometriche della lezione 1, che nello stesso capitolo vengono ripetute con i cicli for e animate con frameCount.

Con alcune illusioni ottiche si può semplificare il codice impostando subito il colore giusto dello sfondo. L’istruzione background() va comunque messa all’inizio di draw(), senza intervenire sul valore alfa: cancella il fotogramma precedente ed evita parti semitrasparenti nell’anteprima.

In altri casi può essere utile cambiare la modalità di fusione, ad esempio con blendMode(DIFFERENCE), per ottenere effetti che richiederebbero il disegno di più forme.

Per trovare i valori dei parametri critici, può essere utile collegarli per qualche prova alla posizione del mouse, ad esempio con map(mouseX, 0, width, minimo, massimo), e tornare poi a valori fissi.

Il movimento si ottiene con frameCount, come nel capitolo 5 della stessa guida e nelle ultime slide della lezione 1. I movimenti lenti conservano meglio l’effetto: la velocità si regola moltiplicando o dividendo frameCount per un valore costante.

Nell’alternanza, la funzione sin() applicata a frameCount produce un passaggio graduale fra due valori (oscillazione sinusoidale), mentre l’operatore % produce valori che ripartono da capo a intervalli regolari, utili per un passaggio a scatti (frameCount con l’operatore %).

Consegna