OBIETTIVO VISIVO:
Un prato primaverile interattivo con fiori, erba e un’ape che vola. Cliccando sul prato compaiono nuovi fiori. Dopo 3 click il cielo attraversa un ciclo completo: tramonto → notte → alba → giorno. Di notte le stelle appaiono, i fiori si chiudono in boccioli e l’ape sparisce. All’alba tutto torna come prima.
SCOMPOSIZIONE LOGICA:
1. Cielo (background): Interpolazione tra palette di colori usando la funzione “interpolaFase()”. Due palette distinte gestiscono il tramonto (giorno→notte) e l’alba (notte→giorno).
2. Stelle: Array di oggetti con posizioni fisse generate nel setup() con randomSeed(77). Compaiono gradualmente con map() sull’alpha. Ogni stella ha una “fase” individuale per il twinkle con sin().
3. Nuvole (Funzione Custom): La funzione “disegnaNuvola(x, y, dim)” compone tre ellissi sovrapposte. Viene chiamata 2 volte con coordinate fisse. Colore sempre bianco semitrasparente.
Prato (Funzione Custom): La funzione “disegnaFilo()” viene
chiamata in un ciclo for ogni 2 pixel di larghezza. randomSeed(100) garantisce posizioni stabili. Il mouse crea un “vento” locale usando map() sulla distanza X.
Fiori (Funzione Custom): Array di oggetti creati nel setup() con posizioni fisse. La funzione “disegnaFiore()” gestisce sia il fiore aperto (5 petali con ciclo for e rotate()) sia la chiusura in bocciolo (lerp() su larghezza e altezza dell’ellisse centrale). I fiori reagiscono al mouse con lerp() per un movimento morbido.
Ape (Funzione Custom): La funzione “disegnaApe()” disegna corpo, ali, strisce e occhio. La posizione X usa il modulo (%) per il reset automatico. L’oscillazione verticale usa sin(). L’ape sparisce quando inizia la notte (variabile booleana “apeAttiva”).
Interattività: Ogni click aggiunge un fiore in quella posizione. Dopo CLICK_TRAMONTO click parte il ciclo giorno/notte. I fiori si chiudono solo quando il cielo è già blu scuro (tramonto > 0.75).
UTILIZZO AI:
Ho usato Claude per farmi aiutare con le parti di animazione più complesse dello sketch. I prompt chiave sono stati:
1. Prato interattivo: non riuscivo a capire come fare in modo che i fili d’erba si piegassero verso il mouse senza ricalcolare tutto a ogni frame in modo caotico. Ho chiesto: “Come posso usare randomSeed() per tenere le posizioni dei fili fisse e applicare solo la piega in base al mouse?” Ho capito così come randomSeed() blocca la sequenza di random() e come usare map() per tradurre la distanza in angolo di piega.
2. Ape e scia: non sapevo come far muovere l’ape in loop senza variabili globali che si resettano manualmente. Ho chiesto: “Come posso far muovere un oggetto da sinistra a destra in loop in p5.js in modo semplice?” Ho capito così l’uso dell’operatore modulo (%) su frameCount, che elimina il bisogno di resettare la posizione a mano. Per la scia ho chiesto come mantenere un array a lunghezza fissa: ho imparato a usare push() per aggiungere e shift() per togliere il valore più vecchio, così la scia non cresce all’infinito.
3. Chiusura dei fiori in boccioli: volevo che i fiori si chiudessero gradualmente diventando ellissi verticali al calare della notte. Ho chiesto: “Come posso fare in modo che un fiore con petali si trasformi lentamente in una forma allungata usando lerp()?” Ho capito come usare lerp() su larghezza e altezza dell’ellisse centrale in parallelo con map() sull’alpha dei petali, così i due effetti si sovrappongono in modo fluido.

Lascia un commento
Devi essere connesso per inviare un commento.