Patrizia Duso – Generative Landscape

/* OBIETTIVO VISIVO:

Rappresentare un paesaggio marino generativo in evoluzione continua durante una calda giornata estiva. L’obiettivo è creare una scena con una barca a vela che naviga in un mare mosso e ondoso e trasmettere attraverso i raggi e il movimento del sole il calore di una soffocante giornata estiva.

SCOMPOSIZIONE LOGICA:

Background: Cielo come sfondo di colore azzurro

Sole: tre cerchi concentrici ciascuno con un colore più intenso del precedente per dare tridimensionalità, posizionati in alto a destra. Ho aggiunto un “let” con la funzione frameCount per farli pulsare tutti e tre.

Raggi: ho creato 20 linee che partono dal centro del sole. Ho creato un ciclo “for” per distribuire le linee a distanza regolare tra loro, e ho utilizzato un “let” con le funzioni seno e coseno e frameCount per far variare la lunghezza dei raggi nel tempo e farli ruotare lentamente.

Mare: oltre ad aver stabilito forma, colore e il ciclo “for”, ho utilizzato la funzione seno per creare l’ondulazione e la funzione frameCount per dare il movimento dell’onda verso destra o sinistra.

Barca a vela: ho creato un triangolo per la vela e un rettangolo per l’albero, mentre per la base ho creato un trapezio utilizzando il comando beginShape e endShape e dando le coordinate dei 4 vertici.

Interattività: spostando il mouse da sinistra verso destra, la barca a vela si muoverà con esso.

USO AI:

Ho utilizzato Gemini per farmi spiegare come dare forma e movimento alle onde del mare, utilizzando le funzioni di seno e coseno.

CODICE:

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

function draw() {
background(173, 225, 255);

//raggi del sole
push();
stroke(255,194,0);
strokeWeight(2);
let centroX = 600;
let centroY = 90;
let raggioLungo = 600;
let numeroRaggi = 20;
translate(centroX, centroY);
for (let c = 0; c < TWO_PI; c += TWO_PI / numeroRaggi) {
let oscillazioni = raggioLungo + sin(frameCount * 0.04) * 600;
let x = cos(c + frameCount * 0.02) * oscillazioni;
let y = sin(c + frameCount * 0.02) * oscillazioni;
line(0, 0, x, y);
}
pop();

//sole
let pulsazione = sin(frameCount * 0.03) * 12;
noStroke();
fill(255,235,63);
circle(600, 90, 100 + pulsazione);
noStroke();
fill(255,217,0);
circle(600, 90, 80 + pulsazione);
noStroke();
fill(255,194,0);
circle(600, 90, 60 + pulsazione);

//onde dietro 1 e 2
push();
noStroke();
fill(46, 163, 191);
beginShape();
for (let x = 0; x <= width; x++) {
let y = sin(x * 0.05 + frameCount * 0.05) * 10 + 300;
vertex(x, y);
}
vertex(width, height);
vertex(0, height);
endShape(CLOSE);
noStroke();
fill(32,189,226);
beginShape();
for (let x = 0; x <= width; x++) {
let y = sin(x * 0.05 – frameCount * 0.05) * 10 + 320;
vertex(x, y);
}
vertex(width, height);
vertex(0, height);
endShape(CLOSE);
pop();

//barca
push();
translate(-450, 40);
let xLimitata = constrain(mouseX/2, 0, width – 100);
translate(xLimitata, 0);
fill(121,76,6)
rect(595, 270, 5, 30);
fill(255,96,34);
triangle(600, 200, 550, 250, 600, 280);
fill(223,158,56)
beginShape();
vertex(540, 295);
vertex(640, 295);
vertex(620, 320);
vertex(560, 320);
endShape(CLOSE);
pop();

//onde davanti 3, 4 e 5
push();
noStroke();
fill(86,215,245);
beginShape();
for (let x = 0; x <= width; x++) {
let y = cos(x * 0.05 – frameCount * 0.05) * 10 + 350;
vertex(x, y);
}
vertex(width, height);
vertex(0, height);
endShape(CLOSE);
noStroke();
fill(118,227,253);
beginShape();
for (let x = 0; x <= width; x++) {
let y = cos(x * 0.05 + frameCount * 0.05) * 10 + 355;
vertex(x, y);
}
vertex(width, height);
vertex(0, height);
endShape(CLOSE);
noStroke();
fill(145,242,243);
beginShape();
for (let x = 0; x <= width; x++) {
let y = cos(x * 0.05 – frameCount * 0.05) * 10 + 370;
vertex(x, y);
}
vertex(width, height);
vertex(0, height);
endShape(CLOSE);
pop();
}