Andrea Alberton – Generative Landscape

OBIETTIVO VISIVO:

L’idea è quella di creare un paesaggio animato di un deserto con un cammello in movimento. Il deserto è composto da una serie di dune in movimento, su una delle quali si muove un cammello. Il traguardo principale è far sì che il cammello non “voli” o affondi nella sabbia, ma segua esattamente il profilo della duna mentre l’utente sposta il mouse.

SCOMPOSIZIONE LOGICA:

Movimento paesaggio: L’uso delle variabili t e scorrimento funge da motore per l’animazione. Mentre t genera un’oscillazione ciclica tramite la funzione sin(t), scorrimento crea una progressione lineare infinita verso una direzione.

Dune: Le dune sono realizzate con approcci differenti. Le dune rosse e gialle utilizzano curveVertex per creare profili morbidi basati su punti fissi che oscillano, mentre la duna arancione è costruita attraverso un ciclo for che campiona la funzione seno a intervalli regolari, creando un’onda sinusoidale perfetta che scorre orizzontalmente.

Cammello e suo movimento: Il “cammello” è incapsulato in una funzione dedicata (disegnaCammello).Con la variabile yCammello2, applicando la stessa formula matematica della duna arancione ma sostituendo la coordinata x con mouseX, il cammello “legge” l’altezza del terreno in tempo reale, dando l’illusione fisica di camminare perfettamente sulla cresta della duna.

USO AI: Nella realizzazione di questo progetto l’AI è stata utilizzata per comprendere come implementare nel movimento della duna e del cammello la finzione sinusoidale.

CODICE:

// Variabile per il tempo
let t = 0;
// Variabile per lo scorrimento continuo (non torna indietro)
let scorrimento = 0;

function setup() {
createCanvas(750, 500);
}

function draw() {
background(135, 206, 235);

//Oscillazione x dune (per duna rossa e gialla)
let osc1 = sin(t) * 20;
let osc3 = sin(t * 1.2) * 15;

//Incremento tempo e scorrimento
t += 0.02;
scorrimento += 1.5; // Velocità del movimento continuo

//Duna rossa
beginShape();
noStroke();
fill(220, 50, 50);
// primo e ultimo punto ripetuti x ancora x punti
curveVertex(-50 + osc1, 200);
curveVertex(-50 + osc1, 200);
curveVertex(400 + osc1, 100);
curveVertex(600 + osc1, 150);
vertex(width, height);
vertex(0, height);
endShape(CLOSE);

//Duna arancio sinusoidale
beginShape();
noStroke();
fill(255, 120, 0);
// Creiamo la duna con un ciclo for per usare la funzione sin()
for (let x = 0; x <= width; x += 10) {
// La y dipende dalla x e dallo scorrimento costante (x + scorrimento)
// Usiamo 250 come base, 0.01 per la larghezza e 40 per l’altezza
let yDuna = 250 + sin((x + scorrimento) * 0.01) * 40;
vertex(x, yDuna);
}
vertex(width, height);
vertex(0, height);
endShape(CLOSE);

//Il cammello usa la stessa formula della duna arancio per la sua coordinata Y
//Sostituiamo ‘x’ con ‘mouseX’ per permettere di spostare il cammello con il mouse
let yCammello2 = 250 + sin((mouseX+ scorrimento) * 0.01) * 40;
disegnaCammello(mouseX, yCammello2 – 30); // -30 per appoggiarlo sopra la sabbia

//Duna gialla
beginShape();
noStroke();
fill(255, 215, 0);
// primo e ultimo punto ripetuti x ancora x punti
curveVertex(-50 + osc3, 300);
curveVertex(-50 + osc3, 300);
curveVertex(150 + osc3, 260);
curveVertex(300 + osc3, 380);
curveVertex(500 + osc3, 410);
curveVertex(50 + width + osc3, 400);
curveVertex(50 + width + osc3, 400);
// chiusura forma
vertex(width, height);
vertex(0, height);
endShape(CLOSE);
}

//Cammello (Funzione creata per essere riutilizzata)
function disegnaCammello(x, y) {
push();
translate(x, y);
fill(139, 69, 19);
noStroke();

// Gambe
rectMode(CENTER);
// Gamba dietro
rect(-15, 20, 4, 30);
// Gamba davanti
rect(15, 20, 4, 30);
// Corpo (8 indica valore arrotondamento angoli)
rect(0, 5, 50, 25, 8);
// Gobba
arc(0, -5, 30, 35, PI, TWO_PI);
// Collo
push();
translate(10, 0);
rect(10, -10, 10, 30, 5);
pop();

// Testa
push();
translate(25, -20);
rect(0, 0, 18, 10, 4);
// Occhio
fill(255);
ellipse(5, -2, 3, 3);
// pupilla
fill(0);
ellipse(5, -2, 2, 2);
pop();

pop();
}