Giovanna Bembo – Generative Landscape

COLLINE PIOVOSE
In questo scenario cupo, durante un temporale, l’utente è in grado di rallentare il tempo e interagire con l’intensità della pioggia. (muovi il mouse da destra a sinistra e viceversa per vedere la magia!!)

//background. Gradiente che va da scuro a chiaro.
//mid-ground. Due colline dai toni scuri composte da due ellissi.
//foreground. Un rettangolo gradiente.
//altri elementi (statici): nuvole e alberi, entrambi generati con delle funzioni drawTree e drawNuvola.
//extra: pioggia che cade, trovato codice in libreria p5js, lo modifico per rendere lo scenario dinamico e interattivo.

Mi sono fatta aiutare dall’AI per capire il setup corretto per la funzione drawTree, ho poi preso ispirazione per scrivere da sola la funzione drawNuvola
Dopo aver identificato la parte da modificare, mi sono fatta aiutare dall’AI per modificare la parte di codice della pioggia per creare la variabile dipendente da mouseX. Il prompt è a riga 184, all’altezza della modifica.

//imposto variabili
let drops = [];
let c1, c2, c3, c4;
let nuvole = [
[45, 26, 1],
[178, 21, 0.7],
[270, 46, 1.2],
];
let trees = [
[ 85, 367, 1], //[x, y, s]
[326, 355, 1],
[213, 380, 1.17],
[ 30, 345, 0.56],
[151, 357, 0.56],
[267, 353, 0.56],
[375, 349, 0.51],
];
//modificando questi valori posso muovere gli alberi dove preferisco, dopo vari tentativi ho trovato delle posizioni che mi aggradavano
function setup() {
//imposto canva e le tonalità per i gradienti background e foreground
createCanvas(400, 400);
c1 = color(34, 38, 40);
c2 = color(189, 217, 233);
c4 = color(90, 103, 99);
c3 = color(60, 69, 66);
for (let i = 0; i < 200; i++) drops.push(new Drop()); //copiato da libreria x la pioggia
}
function draw() {
//background con gradiente
for (let y = 0; y < 400; y++) {
let n = map(y, 0, 400, 0, 1);
stroke(lerpColor(c1, c2, n));
line(0, y, 400, y);
}
//colline
noStroke();
fill(36, 41, 39);
ellipse(80, 310, 257, 181)
fill(48, 54, 52);
ellipse(300, 300, 246, 222);
//piano con gradiente
for (let y=338; y < 400; y++) {
let n = map(y, 338, 400, 0, 1);
stroke(lerpColor(c3, c4, n));
line(0, y, 400, y);
}
//alberi
for (let t of trees) drawTree(t[0], t[1], t[2]);
//nuvole fisse
for (let n of nuvole) drawNuvole(n[0], n[1], n[2]);
//pioggia
for (let d of drops) { d.show(); d.update(); }
}
function drawTree(bx, by, s) {
push();
translate(bx, by);
scale(s);
let c = color(24);
fill(c);
noStroke();
//ho chiesto a Claude di scrivermi le coordinate degli alberi dall’svg preso da Figma per velocizzarmi il lavoro
// tronco
rect(-3, -115, 6, 115);
// rami
drawBranch(52-85, 37.12-181, -45, 3, 44);
drawBranch(106.937-85, 29.52-181, 31.4, 3, 44);
drawBranch(45-85, 47.84-181, -71, 3, 29);
drawBranch(86.191-85, 68.263-181, -113.4, 3, 29);
drawBranch(81-85, 29.009-181, -19.65, 3, 29);
// rametti
stroke(c);
strokeWeight(1);
noFill();
let lines = [
[106.5,58, 106.5,47],
[106.6,51.6, 114.6,43.6],
[96.2,62.5, 119.2,72.5],
[79,62.5, 56,62.5],
[59.5,62.2, 57.5,57.2],
[70.3,62.4, 64.3,66.4],
[59.5,41.9, 63.5,22.9],
[61.6,32.3, 54.6,24.3],
[52.3,48.4, 45.3,53.4],
[46.5,47.1, 43.5,28.1],
[45.8,40.4, 35.8,35.4],
[85.6,34.7, 100.6,15.7],
[90.5,28.1, 85.5,10.1],
[87.5,62.1, 81.5,40.1],
[74.5,56.9, 76.5,44.9],
[82.5,44.5, 71.8,40.5],
[105.9,34.5, 118.9,31.5],
[114.5,32.1, 113.5,27.1],
[95.5,22, 105,21.5],
[82.8,31.4, 69.8,24.4],
[76.5,27.9, 80.5,14.9],
[78.7,22.4, 72.7,17.4],
[82.5,99.2, 72.5,76.2],
[86.6,82.6, 95.6,73.6],
[75.5,82.8, 77.5,76.8],
[78.8,90.5, 70.8,87.5],
];
for (let l of lines) {
line(l[0]-85, l[1]-181, l[2]-85, l[3]-181);
}
pop();
}
function drawBranch(lx, ly, angleDeg, w, h) {
push();
translate(lx, ly);
rotate(radians(angleDeg));
rect(0, 0, w, h);
pop();
}
function drawNuvole(bx, by, s) {
push();
translate(bx, by);
scale(s);
fill(180);
noStroke();
ellipse(45, 26, 41, 55);
ellipse(17, 43, 45, 36);
ellipse(62, 43, 68, 38);
ellipse(40, 58, 140, 28);
ellipse(22, 72, 46, 19);
ellipse(55, 72, 23, 24);
ellipse(78, 65, 48,28);
pop();
}
//grazie libreria p5js per la pioggia☺️🌸
function Drop() {
this.x = random(width);
this.y = random(-height, 0);
this.w = random(1, 4);
this.h = random(6, 14);
this.baseSpd = random(2, 5); //velocità caduta pioggia //random(2, 5)
this.grav = 1.0;
this.show = function() {
noStroke();
fill(200, 220, 255, 180);
ellipse(this.x, this.y, this.w, this.h);
};
this.update = function() {
//ho chiesto a Gemini come modificare questa parte di codice per rendere la pioggia interattiva. promt: “questo è il mio codice p5js, come posso modificarlo in modo che l’intensità della pioggia determinata nella function Drop () non sia randomica ma dipenda dalla posizione del cursore (mouseX)? Secondo me basta modificare la parte di this.spd ma non saprei come.”
//Gemini consiglia di trasformare la posizione del mouse in un moltiplicatore di velocità let intensita = map(mouseX, 0, width, 0.2, 3); this.spd = this.baseSpd * intensita; //questo aggiorna l'intensità in tempo reale this.y += this.spd * this.grav; if (this.y > height) { this.y = random(-height, 0); this.grav = 1.0; } this.grav = min(this.grav * 1.01, 2.0);
};
}