Greta Scaravelli — Generative landscape

OBIETTIVO VISIVO:

Per questo progetto mi sono lasciata ispirare dalla quiete di uno stagno naturale, cercando di ricreare un ecosistema interattivo. La canvas rappresenta uno specchio d’acqua sul quale galleggiano delle ninfee fiorite generate casualmente e da una rana che riposa al centro. L’obiettivo era trasmettere un senso di profondità e reattività: l’acqua cambia sfumatura in base al movimento del mouse e ogni clic sulla superficie genera delle onde concentriche che si dissipano lentamente. Inizialmente non era prevista ma con il proseguimento del progetto ho deciso di inserire la rana: l’utente può provare a “disturbarla” cliccandoci sopra, se colpita, la rana scappa balzando verso una nuova posizione casuale, creando un’onda d’urto nel punto in cui atterra.

SCOMPOSIZIONE LOGICA:

1. Background dinamico: il colore dello sfondo non è statico. Utilizzo la funzione map() per legare la posizione mouseX alla tonalità di blu, facendo sì che l’acqua sembri reagire alla luce ambientale mentre l’utente muove il puntatore.
2. Generazione ninfee: attraverso un ciclo while e il comando random(), vengono posizionate 18 ninfee. Per rendere la scena naturale, ho inserito un controllo di collisione con dist() che impedisce alle foglie di sovrapporsi eccessivamente, e una variabile che assegna casualmente il colore bianco o rosa ai fiori.
3. Sistema di onde: le onde sono gestite tramite un array e un ciclo for. Ogni onda è un oggetto che aumenta di dimensione nel tempo, mentre la sua opacità diminuisce proporzionalmente grazie a map(), simulando la perdita di energia del cerchio nell’acqua.
4. Modularità delle funzioni: per mantenere il codice pulito e organizzato, ho creato le funzioni disegnaNinfea() e disegnaRana(). All’interno di queste, uso push(), pop(), translate() e rotate() per gestire le coordinate locali, permettendo alla ninfea di avere petali distribuiti perfettamente in circolo.

USO AI:

Per rendere il codice più efficiente e visivamente curato, ho utilizzato l’AI per alcuni passaggi tecnici più complessi:

• Ho chiesto aiuto per la gestione dei dati delle ninfee: ‘voglio salvare posizione, raggio e colore di ogni ninfea in un unico contenitore invece di fare mille array diversi’. L’AI mi ha mostrato come utilizzare la struttura a oggetti {} e il ciclo for…of.
• Non sapevo come gestire correttamente la memoria delle onde: (dopo aver incollato il codice) le onde continuano ad aumentare nell’array anche se sono trasparenti. L’AI mi ha suggerito l’uso del ciclo for inverso e del comando splice().