Vittoria Cavinato – Generative Landscape

/*
OBIETTIVO VISIVO:
Come sviluppo per l’esercitazione ho scelto di rappresentare un paesaggio artico in continua evoluzione, dove le fasi della giornata cambiano lentamente in modo ciclico. La scena mostra un ambiente glaciale con montagne di ghiaccio su più livelli di profondità, un mare ondeggiante e un orso polare in primo piano. L’elemento più importante è il ciclo giorno/notte: il cielo cambia colore dal blu notte all’azzurro del giorno con stelle che appaiono e scompaiono.

SCOMPOSIZIONE LOGICA:
Ho scelto di dividere la scena in livelli sovrapposti, dall’elemento più lontano a quello più vicino:

1. CICLO GIORNO/NOTTE: Uso la funzione sin() su una variabile “tempo” che
   si incrementa ogni frame, così ottengo un valore che oscilla dolcemente tra 0 (notte) e 1 (giorno). Tutte le altre animazioni dipendono da questo valore centrale.
2. CIELO: lerpColor() interpola tra il colore notturno e quello diurno, pilotato dal ciclo giorno/notte.
3. STELLE: Un ciclo for genera 60 stelle in posizioni casuali ma fisse grazie a randomSeed(). La loro opacità è gestita con map() in modo che spariscano gradualmente all’aumentare della luce.
4. SOLE: Un singolo cerchio che si sposta verticalmente con map(), cambia colore da arancione a giallo con lerpColor() durante il sorgere, e ha un alone la cui trasparenza varia anch’essa con map().
5. MONTAGNE DI SFONDO: Disegnate con beginShape()/vertex() con colore chiaro, posizionate sulla linea dell’orizzonte.
6. MONTAGNE IN PRIMO PIANO: Due montagne più scure disposte ai lati della canvas, più una piccola montagna un po’più scura in basso a destra per aumentare la sensazione di profondità.
7. MARE: Tre strati di onde realizzati con un doppio ciclo for. Il ciclo esterno itera sui 3 strati di colore, il ciclo interno calcola i vertex dell’onda usando sin() in funzione di x e di “tempo”, così le onde si muovono orizzontalmente.
8. ORSO POLARE: Disegnato con forme base (ellipse). Dato che non sapevo come fare un orso polare ho chiesto aiuto a Claude che mi ha consigliato di di creare una funzione custom disegnaOrso(x, y) con parametri di posizione e l’ho richiamata tre volte con coordinate diverse per posizionare più orsi nella scena

USO DI AI:
Ho usato Claude come supporto durante lo sviluppo per capire meglio alcune funzioni che non avevo compreso ancora bene e per ottimizzare la scrittura del codice.
Alcuni prompt che ho usato sono stati:
“Come faccio a fare in modo che il colore del cielo cambi lentamente nel tempo?”
“Come posso fare in modo che le stelle non cambino posizione ad ogni frame ma restino ferme?”
“Come faccio a far sparire le stelle gradualmente quando diventa giorno?”
“Vorrei inserire inserire una piccola figura di orso polare davanti a sinistra che sia allineata come y alla montagna piccola davanti, come faccio?”
*/

let tempo = 0;
let orizzonteY = 380; // Coordinata base per la linea dei ghiacci e le montagne
let dimSole = 55; // Diametro del sole

function setup() {
createCanvas(800, 600);
noStroke();
}

function draw() {
// 1. CICLO GIORNO/NOTTE (Valore che oscilla tra 0 = Notte e 1 = Giorno)
let cicloGiornoNotte = (sin(tempo * 0.2) + 1) / 2;

// 2. CIELO DINAMICO
let coloreNotte = color(‘#0a1432’);
let coloreGiorno = color(‘#a0d7f0’);
background(lerpColor(coloreNotte, coloreGiorno, cicloGiornoNotte));

// 3. STELLE (Appaiono solo quando l’astro è basso/notte)
let opacitaStelle = map(cicloGiornoNotte, 0, 0.4, 255, 0);
if (opacitaStelle > 0) {
randomSeed(10); // Mantiene le stelle fisse nelle stesse posizioni
for (let i = 0; i < 60; i++) {
let sx = random(width);
let sy = random(orizzonteY); // Le stelle restano sempre sopra l’orizzonte
fill(255, opacitaStelle);
ellipse(sx, sy, 2, 2);
}
}

// 4. SOLE CHE TRAMONTA (Movimento perpendicolare nel varco centrale con alone)
let soleX = 330;
let soleY = map(cicloGiornoNotte, 0, 1, 450, 80);

// Alone del sole: un cerchio più grande e quasi invisibile
fill(255, 255, 200, map(cicloGiornoNotte, 0, 1, 0, 80));
ellipse(soleX, soleY, dimSole * 2, dimSole * 2);

// SOLE: da colore arancione a colore giallo
let colSole = lerpColor(color(‘#ffa000’), color(‘#ffe668’), cicloGiornoNotte);
fill(colSole);
ellipse(soleX, soleY, dimSole, dimSole);

// 5. FASCIA GHIACCIATA E LINEA DELL’ORIZZONTE
fill(‘#e0edf6’);
rect(0, orizzonteY, width, height – orizzonteY);

// 6. MONTAGNE SULLO SFONDO CHE SONO SULLA LINEA DELL’ORIZZONTE
fill(‘#bedcf5’);
// Sinistra: montagna più alta con cima piatta
beginShape();
vertex(1, orizzonteY); //primo punto base verso il centro
vertex(200, 70); //primo punto in alto
vertex(290, 70); //secondo punto in alto
vertex(290, orizzonteY); //secondo punto base
endShape(CLOSE);

// Destra: trapezio con vertice in alto
beginShape();
vertex(370, orizzonteY); // base verso il centro
vertex(370, 120); // vertice alto
vertex(780, 300); // punta esterna
vertex(750, orizzonteY); // secondo punto base
endShape(CLOSE);

// 7. MONTAGNE IN PRIMO PIANO (davanti alle precedenti)
fill(‘#a1c8e3’);
// Sinistra: lato sinistro appoggiato alla canvas, quello destro obliquo
beginShape();
vertex(0, 400);
vertex(0, 220);
vertex(150, 220);
vertex(250, 400);
endShape(CLOSE);

// Destra: lato desto appoggiato alla canvas, quello sinistro obliquo
beginShape();
vertex(400, 400);
vertex(620, 150);
vertex(800, 150);
vertex(800, 400);
endShape(CLOSE);

// Montagna piccola davanti a tutte
fill(‘#81b1d1’);
beginShape();
vertex(600, 420);
vertex(600, 300);
vertex(700, 300);
vertex(780, 420);
endShape(CLOSE);

// 8. MARE ONDEGIANTE (Procedimento a tre strati con doppio ciclo for)
let coloriOnde = color(‘#3282d2’), color(‘#1e5aaa’), color(‘#0a3278’) ;

for (let i = 0; i < 3; i++) { // Ciclo esterno per i 3 strati
fill(coloriOnde[i]);
beginShape();
for (let x = 0; x <= width; x += 10) { // Ciclo interno per i punti dell’onda
// L’altezza è fissa (470, 520, 570) e il movimento è dato da sin()
let yOnda = 470 + i * 50 + sin(x * 0.01 + tempo) * (20 + i * 5);
vertex(x, yOnda);
}
vertex(width, height);
vertex(0, height);
endShape(CLOSE);
}

tempo += 0.02; // Incremento del tempo per le animazioni

// 9. ORSO POLARE ALLINEATO ALLA MONTAGNA (Y=420)
disegnaOrso(120, 420);// orso in secondo piano
disegnaOrso(300, 390); // orso tra le montagne
disegnaOrso(35, 440); // orso più vicino
}

// FUNZIONE CUSTOM: disegna un orso polare alla posizione (x, y)
function disegnaOrso(x, y) {
fill(255);
ellipse(x, y – 20, 60, 40);
ellipse(x – 15, y – 10, 12, 20);
ellipse(x + 15, y – 10, 12, 20);
ellipse(x + 30, y – 35, 25, 25);
ellipse(x + 40, y – 30, 15, 12);
ellipse(x + 25, y – 45, 8, 8);
fill(0);
ellipse(x + 47, y – 32, 3, 3);
ellipse(x + 32, y – 37, 2, 2);
}