Asia Fiorentin – Generative Landscape

⚠️Attenzione: Il movimento verticale del mouse causa l’alterazione del tempo⚠️

/*
OBIETTIVO VISIVO:
Paesaggio urbano minimale con un astro (sole/luna) e nuvole interattive.
Il movimento verticale del mouse (mouseY) simula il passaggio tra giorno e notte, cambiando i colori del cielo, dell’astro e delle nuvole.

SCOMPOSIZIONE LOGICA:
– Background: il cielo sfuma tra azzurro e blu scuro con lerpColor()
– Astro: un cerchio in alto a sx che cambia tra giallo (giorno) e grigio (notte)
– Nuvole: ciclo “for” gestisce nuvole che scorrono da dx a sx. Il colore sfuma tra bianco e grigio in sincrono con l’astro.
– Skyline: edifici con finestre multiple generate con un ciclo for annidato nella funzione custom “disegnaPalazzo”.

USO AI:
Ho usato ChatGPT come supervisore tecnico e aiuto con questo prompt: ‘Sono una studendessa universitaria che segue il corso di Informatica per il design e questo è il mio codice <<…>>. Come posso sincronizzare la sfumatura colore dei diversi elementi (nuvole, astro e background)? e come fare il movimento da dx a sx delle nuvole con operatore modulo?’
*/

// VARIABILI GLOBALI
let numeroPalazzi = 6;
let toniGrigio = [12];
let velocitàNuvole = 1.5;

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

function draw() {
// INTERATTIVITÀ (posizione Y del mouse tra 0-alto e 1-basso per cambio colore)
let valoreY = map(mouseY, 0, height, 0, 1);

// colori per sfumatura
let cieloGiorno = color(135, 206, 235);
let cieloNotte = color(20, 20, 60);
let astroGiorno = color(255, 204, 0);
let astroNotte = color(150, 150, 150);
let nuvolaGiorno = color(255, 255, 255);
let nuvolaNotte = color(80, 80, 80);

// colori in base a mouseY
let sfondoCielo = lerpColor(cieloGiorno, cieloNotte, valoreY);
let astroColore = lerpColor(astroGiorno, astroNotte, valoreY);
let nuvolaColore = lerpColor(nuvolaGiorno, nuvolaNotte, valoreY);
background(sfondoCielo);

// ASTRO (sole/luna)
fill(astroColore);
ellipse(100, 100, 80, 80); // in alto a sx

// NUVOLE SCORREVOLI (Ciclo For + Modulo)
randomSeed(15); // nuvole alla stessa altezza
for (let i = 0; i < 5; i++) {
// movimento da dx a sx con frameCount e modulo %
let nX = (random(width) – frameCount * velocitàNuvole) % width;
if (nX < 0) nX += width; // nuvola esce a sx e ricompare a dx
let nY = random(50, 200); disegnaNuvola(nX, nY, random(40, 70), nuvolaColore);
}

// SKYLINE
randomSeed(50); // tenere altezze fisse degli edifici
let larghezzaP = width / numeroPalazzi;
for (let x = 0; x < width; x += larghezzaP) {
let altezzaP = random(200, 500);
let grigioScelto = toniGrigio[int(random(0, toniGrigio.length))]; // accesso array
disegnaPalazzo(x, height, larghezzaP - 15, altezzaP, color(grigioScelto));
}
}

// 6. FUNZIONI CUSTOM

// nuvole con più ellissi
function disegnaNuvola(x, y, s, col) {
fill(col);
ellipse(x, y, s, s * 0.6);
ellipse(x + s * 0.4, y + s * 0.2, s * 0.8, s * 0.5);
ellipse(x – s * 0.4, y + s * 0.2, s * 0.8, s * 0.5);
}

// palazzi con finestre multiple
function disegnaPalazzo(posX, posY, l, h, col) {
fill(col);
rect(posX, posY – h, l, h);

// ciclo for interno per le finestre
fill(255, 255, 200, 180);
let dimFin = 12;
let gap = 20;

for (let fY = posY – h + 30; fY < posY – 30; fY += gap) {
rect(posX + 15, fY, dimFin, dimFin); // colonna sx
rect(posX + l – 15 – dimFin, fY, dimFin, dimFin); // colonna dx
}
}