Matteo Tiberio – Generative Landscape

/* Commento logico:

• Obiettivo visivo: Essendo un amante dei paesaggi di montagna e delle vaste distese d’erba, ho voluto rappresentare qualcosa che li evocasse. Ad ogni “start” del programma, verrà generato un nuovo, diverso paesaggio rispetto a quello precedente, caratterizzato da colline verdi in “primo piano” nella parte bassa della canvas, e montagne in lontanaza nella parte centrale, mentre nella parte alta un cielo, con delle nuvole in movimento, che ricordi quel momento della giornata antecedente al tramonto, gli ultimi momenti di luce prima del buio.
  Oltre a questo vorrei dare all’utente la possibilità di personalizzare il suo paesaggio a piacere, inserendo degli alberi (che saranno generati in modo casuale tra diverse tipologie di albero) dove meglio crede, semplicemente cliccando il mouse puntando il cursore nel punto desiderato all’interno delle aree verdi.
  Una volta ottenuto un paesaggio soddisfacente, sarà possibile salvarlo direttamente sul proprio computer premendo il tasto “s” o “S” sulla tastiera.
• Scomposizione logica: Il progetto è diviso in quattro livelli sovrapposti disegnati in sequenza.
  1.Cielo: realizzato con un ciclo for che disegna 300 rettangoli da 1px di altezza ciascuno con colore interpolato via lerp, producendo una sfumatura continua.
  2.Nuvole: posizionate sopra il cielo nella parte alta e si trovano in movimento, create anch’esse mediante un ciclo for.
  3.Montagne e colline: entrambe generate tramite la funzione drawTerrain() che costruisce poligoni chiusi usando il Perlin noise come guida per il profilo superiore, chiamata più volte con origine e scale diversi per ottenere layer indipendenti tra loro.
  4.Alberi: In primo piano si trovano loro, che costituiscono l’unico elemento interattivo: ad ogni click del mouse un oggetto viene aggiunto all’array “alberiPosizionati” con posizione e immagine casuale, e ad ogni frame un ciclo for ridisegna tutti gli alberi accumulati sopra il paesaggio. Tramite il tasto “s” o “S” è possibile salvare in formato png la canvas corrente.
• Uso AI: Ho chiesto a Claude di aiutarmi con l’organizzazione del tutto: dopo aver cercato e poi trovato ispirazione su siti come Cosmos e Pinterest. Ho chiesto aiuto per la creazione delle montagne e delle colline tramite uso del Perlin Noise con il seguente prompt: “su p5.js come posso ricreare delle montagne e delle colline diverse ad ogni “start” utilizzando il perlin noise?”, grazie a questo ho compreso meglio l’utilizzo dei questa funzione. Inoltre ho chiesto un aiuto per quanto riguarda il salvataggio dell’immagine a seguito del click del tasto “s”, dato che il metodo standard visto a lezione (tramite function keyPressed e if) mi dava problemi e non funzionava, grazie a Claude ho capito che è un problema di “focus” nella canvas; ho dovuto quindi inserire un “Window eventListener” per risolvere il tutto. Infine ho usato Claude come tutor per revisionare il codice finale e verificare la correttezza delle convenzioni di p5.js. */