Chiara Brignone-Generative Landscape

/* OBIETTIVO VISIVO:
Una metropoli notturna in continua evoluzione.
L’obiettivo è generare uno skyline urbano dove gli edifici hanno altezze e luci casuali,con una pioggia che cade sullo sfondo per dare dinamismo.
SCOMPOSIZIONE LOGICA:
Background e Pioggia: Uno sfondo scuro con una pioggia di linee sottili gestita tramite un ciclo for. Le linee si resettano quando toccano il fondo.
Skyline (Funzione Custom): Ho creato la funzione “disegnaEdificio(x, y, w, h, colore)”.
Questa funzione disegna la sagoma del palazzo e un set di finestre illuminate.
Mid-ground/Foreground: Due cicli “for” distinti disegnano due file di palazzi. Quelli in primo piano sono più larghi e scuri per creare profondità.
Variazione: Uso randomSeed() nel setup per mantenere la città coerente, ma i colori delle luci delle finestre cambiano leggermente usando il frameCount e il modulo (%).
USO AI:
Ho consultato Gemini per approfondire il concetto di cicli for annidati. L’IA mi ha aiutato a tradurre la mia idea di “palazzo con finestre” in una funzione parametrica efficiente. Il prompt principale è stato: “Come posso usare un ciclo for dentro un altro per disporre dei rettangoli (finestre) su una griglia regolare all’interno di una forma più grande?”. Ho poi personalizzato il codice per gestire i colori neon e l’interattività.
*/
let pioggiaY = [];
function setup() {
createCanvas(windowWidth, windowHeight);
// posizioni pioggia
for (let i = 0; i < 100; i++) {
pioggiaY.push(random(height));
}
}
function draw() {
background(10, 15, 30); // Blu notte profondo
// 1. SFONDO: Pioggia
stroke(0, 255, 200, 100); // Colore
for (let i = 0; i < pioggiaY.length; i++) {
let x = map(i, 0, pioggiaY.length, 0, width);
line(x, pioggiaY[i], x, pioggiaY[i] + 10);
pioggiaY[i] += 5; // Velocità caduta if (pioggiaY[i] > height) pioggiaY[i] = 0; // Reset
}
// 2. MID-GROUND: Città in lontananza
randomSeed(99);
for (let x = 0; x < width; x += 60) {
let h = noise(x, frameCount * 0.001) * 300; // Altezza che varia leggermente nel tempo
disegnaEdificio(x, height – h, 50, h, color(30, 40, 80));
}
// 3. FOREGROUND: Città vicina
randomSeed(150);
for (let x = -20; x < width; x += 120) {
let h = map(noise(x), 0, 1, 200, 500);
disegnaEdificio(x, height – h, 100, h, color(15, 20, 40));
}
}
/**
FUNZIONE CUSTOM: disegnaEdificio
Parametri: coordinate (x,y), dimensioni (w,h) e colore base
*/
function disegnaEdificio(x, y, w, h, col) {
push();
translate(x, y);
// Corpo dell’edificio
fill(col);
noStroke();
rect(0, 0, w, h);
// Finestre (Ottimizzazione tramite cicli annidati)
let dimensionefinestra = w / 5;
for (let fx = 10; fx < w – 10; fx += dimensionefinestra) {
for (let fy = 10; fy < h – 20; fy += dimensionefinestra * 1.5) {
// Controllo e Variazione: le luci si accendono/spengono
if (random(1) > 0.3) {
fill(255, 255, 150, 200); // Giallo luce
} else {
fill(50, 50, 80); // Finestra spenta
}
rect(fx, fy, dimensionefinestra/2, dimensionefinestra);
}
}
pop();
}
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
}