Maddalena Franco – Generative Landscape

/* * OBIETTIVO VISIVO:

/* * OBIETTIVO VISIVO:

• Rappresentare un paesaggio collinare ispirato a un’estetica flat e moderna. L’obiettivo è creare una scena dinamica dove la natura sembra “respirare” grazie a un sole pulsante e alberi stilizzati che oscillano dolcemente.
• * SCOMPOSIZIONE LOGICA:
• 1. Cielo e Sole: Sfondo panna fisso con un sole arancione la cui dimensione varia nel tempo tramite la funzione sin(frameCount), creando un effetto pulsazione.
• 2. Stratificazione (Layering): Il paesaggio è diviso in tre piani:
• – Sfondo: Colline azzurre distanti.
• – Mid-ground: Una collina blu scuro sagomata con bezierVertex.
• – Foreground: Un’ellisse arancione che chiude la composizione in primo piano.
• 3. Alberi (Funzione Custom): Ho creato la funzione “drawTreeGeo(bx, by, s, extraH)”.
  *Viene richiamata tramite un ciclo for che attinge i dati dall’array “treePositions”, per di gestire posizione e scala in modo modulare.
• 4. Animazione: Gli alberi cambiano altezza in modo asincrono usando sin() e l’indice della posizione, simulando un movimento organico.
• * USO AI:
• Ho usato Gemini per capire come rendere gli alberi più dinamici senza ridisegnarli manualmente. Il prompt chiave è stato: “Come posso far oscillare in altezza degli elementi disegnati con una funzione custom usando il tempo in p5.js?”
• Ho imparato così a passare una variabile calcolata nel draw (extraH) come parametro della funzione custom.
  */

// Coordinate fisse per gli alberi sulla collina [x, y, scala]
let treePositions = [
[50, 240, 1.2],
[50, 340, 1.2],
[120, 340, 1.5],
[170, 280, 1.0],
[210, 310, 0.8],
[90, 250, 1.1],
[300, 340, 1.1]
];

function setup() {
createCanvas(400, 400);
}

function draw() {
// Cielo Dinamico la tonalità cambia con il mouseX
let skyTone = map(mouseX, 0, width, 230, 255);
background(skyTone, 245, 230);

// Sole pulsante
let pulsazione = sin(frameCount * 0.03) * 12;
noStroke();
fill(238, 146, 56);
ellipse(300, 100, 90 + pulsazione);

// Montagna azzurro chiaro (Sfondo)
fill(174, 212, 236);
ellipse(350, 300, 400, 250);
ellipse(550, 350, 400, 200);

// Montagna blu scuro
fill(31, 55, 71);
beginShape();
vertex(0, height);
vertex(0, 250);
bezierVertex(100, 200, 250, 350, 400, 380);
vertex(400, height);
endShape(CLOSE);

// Alberi stilizzati con “effetto vento”
for (let t of treePositions) {
// Oscillazione verticale (altezza) e orizzontale (vento)
let variazioneH = sin(frameCount * 0.05 + t[0]) * 8;
let vento = cos(frameCount * 0.03 + t[0]) * 2;
drawTreeGeo(t[0] + vento, t[1], t[2], variazioneH);
}

// Primo piano arancione
fill(238, 146, 56);
ellipse(140, 420, 600, 200);
}

/**

• FUNZIONE CUSTOM: drawTreeGeo
• bx, by: posizione base | s: scala | extraH: variazione altezza
  */
  function drawTreeGeo(bx, by, s, extraH) {
  push();
  translate(bx, by);
  scale(s); let hTronco = 35 + extraH; // Tronco
  fill(20, 15, 10);
  rectMode(CENTER);
  rect(0, -hTronco/2, 3, hTronco); // Chioma (Stilizzata come l’immagine, ma geometrica)
  fill(28, 87, 36);
  ellipse(0, -hTronco, 22, 28); // Dettaglio luce sulla chioma
  fill(255, 255, 255, 40);
  ellipse(-3, -hTronco – 2, 8, 10); pop();

}