Melissa Di Paoli – Generative Landscape

OBIETTIVO VISIVO:

L’obiettivo visivo per il mio progetto è stato quello di ricreare un ambiente di gioco in prospettiva che raffiguri un tavolo da ping pong. l’elemento centrale è l’interazione della pallina che, con la propria ombra, reagisce a gli input della tastiera rimbalzando sul piano.

SCOMPOSIZIONE LOGICA:

inizializzazione globale: dichiarazione delle variabili cromatiche e definizione della variabile “yPallina = 200” che in seguito sarà autile a determinare la posizione della pallina all’interno del canvas.

setup: inizializzazione dell’area di disegno (400×400 pixel). Ho impostato l’istruzione “ellipseMode(CENTER)” in quanto utile a modificare il punto di ancoraggio e le coordinate dell’ellisi al centro geometrico della forma anziché sull’angolo superiore sinistro.

draw:

1_ il background funge da piano orrizzontale, ovvere da tavolo alla composizione. Ho così aggiunto la prima variabile “colTavolo” che ne definisca il colore.

2_ per la parete ho creato un rettangolo che occupa l’intera larghezza (“Width”) e un quarto dell’altezza (“height/4”) del canvas. Tramite “noStroke()” elimino ogni bordo per ogni figura che verrà creata e, attraverso la seconda variabile “colParete”, viene dato il colore giallo.

3_ inserimento della linea di dettaglio inferiore per definire il bordo del tavolo attraverso il codice “rect()”. La terza variabile “colDettagli” permette di colorare ogni parte con la stessa variabile di bianco.

4_ la creazione del filetto centrale che permette l’illusione della prospettiva al tavolo è stato personalizzato attravero un poligono irregolare collegato da 4 punti specifici dichiarati all’interno di “beginShape()” e “endShape(CLOSE)”.

5_ per la costruzione dell’ombra ho creto una variabile locale per mappare la dimesione dell’ombra sulla posizione verticale dell’ellisse per gestire le proprozioni e rendere il codice più leggibile. Per evitare che “ellipseMode(CORNER)” influenzi gli altri elementi, ho isolato il blocco all’interno di “push()” e “pop()” e creato l’ellisse di colore nero collegando la dimensione al valore ombra in modo tale che, più la pallina scende, più l’ombra diventa grande e scura.

6_ la griglia della rete è generata tramite due cicli “for”: il primo per i segmenti delle linee verticali che si creano ogni 10 pixel lungo la larghezza e il secondo ciclo “for” per i segmenti orizzontali che si creano ogni 10 pixel lungo l’asse y, entrabi descritti da “line()” e “strokeWeight(1)” per dare spessore. In questo modo si evita la ridondanza di codice. Per difenziarla dalla sfondo ho aggiunto la sua variabile “colRete”. Il tutto è racchiuso all’interno di “push()” e “pop()” che isolano lo stile grafico dal resto del codice (ovvero lo spessore e il colore delle linee).

7_ due rettangoli bianchi rifiniscono la rete fungendo da delimitatori grafici superiori e inferiori.

8_ la simulazione del movimento è data dall’incremento della variabile yPallina di 6 pixel per ogni ciclo in modo tale che l’ellisse si sposti verso il basso.

9_ l’istruzione condizionale “if” blocca e funge da limite fisico alla coordinata y a un valore massimo di 200. Ciò simula l’impatto con la superficie del tavolo.

10_ costruzione dell’ellisse di diametro 112 pixel, centrata sull’asse x.

11_ al di fuori delle funzioni, attraverso l’istruzione “keyPressed()” è possibile rilevare la pressione di un tasto sottraendo 150 pixel alla variabile yPallina, proiettandola verso l’alto senza uscire dall’area e permettendole di ricominciare il ciclo di caduta.

USO AI:

ho usato l’intelligenza artificiale per capire come collegare la trasparenza dell’ombra all’interazione della pallina. Ho capito che nella funzione “fill(0, ombra/2)” inserendo la variabile “ombra” nel parametro dell’opacità, ho creato una dipendenza diretta tra la posizione verticale dell’oggetto e la densità cromatica dell’ombra. Quindi di conseguenza collegando yPallina con “keyPressed()” si collega anche la variabile “ombra” che reagisce determinando la trasparenza nel “fill()”. Prompt: “Vorrei che la trasparenza dell’ombra sia dinamica e legata alla posizione Y della pallina. Come posso fare?”

Buona partita 😛