Valeria Graziani – Generative Landscape

/* OBIETTIVO VISIVO
Paesaggio collinare con una pecorella in stile doodle con colori un po’ pop, ad ogni click sul canvas si passa tra notte e giorno.

SCOMPOSIZONE LOGICA

1. Background: metà azzurro e metà scuro che ruota
2. Raggi sole/ luna: ciclo “for” che crea ellissi intorno agli astri
3. Colline: funzione custom che crea una singola collina
4. Righe di colline: funzione custom che crea tramite if ed else delle righe a scacchiera con colori alternati
5. Pecorella: funzione custom
6. Interattività: Cliccando cambia tra gionro e notte, modificando anche i colori degli elementi.

USO AI:
mi sono fatta aiutare perchè non riuscivo a far ruotare il cielo in modo graduale.
ho scoperto la clip per non far sbordare i raggi nella sezione giorno/notte e anche per il patter per le colline.
mi ha aiutato a far cambiare colore di notte agli elementi (è stato intenso).

*/
//variabili per la rotazione del cielo
let angolo1 = 0; // angolo attuale
let angolo2 = 0; // angolo sucessivo
let rotazione = false;

//variabili per la collina
let coloreCollina;
let ColoreCollinaNotte;

// variabili aggiuntive per la posizione delle colline, i pattern e il contorno
let colB_Attuale, colB_Giorno, colB_Notte;
let rigaAttuale, rigaGiorno, rigaNotte;
let coloreTratto, trattoGiorno, trattoNotte; // contorno

function setup() {
createCanvas(400, 600);
angleMode(DEGREES);

//colori delle colline
coloreCollina = color(164, 201, 131); // verde salvia
ColoreCollinaNotte = color(164, 201, 131);

// colore B: Verde più chiaro
colB_Giorno = color(209, 239, 181);
colB_Notte = color(45, 60, 30);
colB_Attuale = color(209, 239, 181);

// colore righe
rigaGiorno = color(130, 160, 100);
rigaNotte = color(15, 25, 10);
rigaAttuale = color(130, 160, 100);

// colore contorno
trattoGiorno = color(177, 188, 174); // verdino
trattoNotte = color(84, 94, 86); // verde/grigio
coloreTratto = color(177, 188, 174); //inizializzazione
}

function draw() {
background(255);

// —— ANIMAZIONE CIELO ——
if (abs(angolo2 – angolo1) > 0.1) {
angolo1 = lerp(angolo1, angolo2, 0.05);
} //abs perchè non serve sapere se fosse -180 o +180 per la rotazione, lerp per rendere graduale la transizione.

push(); //creo una sezione isolata dove far ruotare il cielo
translate(width / 2, height / 2);
rotate(angolo1);

//——GIORNO E NOTTE——
//giorno
fill(182, 214, 204); //cielo azzurro
rect(-width, -height, width * 2, height);

fill(‘yellow’); //il sole
noStroke();
ellipse(100, -200, 50)

//raggi del sole
for (let d = width * 3; d > 0; d -= 20) {
noFill();
stroke(255, 255, 0);
strokeWeight(1);
ellipse(100, -200, d);
}

beginClip();
fill(105, 116, 124);
rect(-width, 0, width * 3, height);
endClip();

fill(105, 116, 124); //notte blu
rect(-width, 0, width * 3, height);

fill(255); //la luna
noStroke();
ellipse(-100, 200, 50);

// raggi della luna
for (let d = width * 2; d > 0; d -= 20) {
noFill();
stroke(255);
strokeWeight(1);
ellipse(-100, 200, d);
}
pop(); //resetto le impostazioni

//———-COLLINE———-
let targetA, targetB, targetR, targetT;
//A: colore principale, B: secondo colore, R: colore delle righe, T:colore del tratto di contorno

if (angolo2 % 360 === 0) {
targetA = color(164, 201, 131);
targetB = colB_Giorno;
targetR = rigaGiorno;
targetT = trattoGiorno;
} else {
targetA = color(30, 45, 20);
targetB = colB_Notte;
targetR = rigaNotte;
targetT = trattoNotte;
}

coloreCollina = lerpColor(coloreCollina, targetA, 0.05);
colB_Attuale = lerpColor(colB_Attuale, targetB, 0.05);
rigaAttuale = lerpColor(rigaAttuale, targetR, 0.05);
coloreTratto = lerpColor(coloreTratto, targetT, 0.05);
//il target serve a creare una transizione soft tra un colore e l’altro tramite il lerpColor

drawHill();
drawSheep(-65, -135, 0.35); //la disegno sulla cime adella collina
}

function mouseClicked() {
angolo2 += 180; //rotazione cielo

//colori delle colline
if (ColoreCollinaNotte.toString() === color(164, 201, 131).toString()) {
ColoreCollinaNotte = color(30, 45, 20);
} else {
ColoreCollinaNotte = color(164, 201, 131);
}
}

function drawSheep(spostamentoX, spostamentoY, size) {
push()
let amount = 10
let angle = 0;
translate(width / 2, height / 2);
translate(spostamentoX, spostamentoY);
scale(size);

stroke(0);
strokeWeight(4);
line(30, 0, 50, 70);
line(20, 0, 30, 70);
line(-30, 0, -50, 70);
line(-20, 0, -30, 70);

noStroke();
fill(255);
let semiasseX = 50;
let semiasseY = 40;
ellipse(0, 0, semiasseX * 2, semiasseY * 2)

let step = 360 / amount
for (let i = 0; i < amount; i++) {
angle = i * step
let x = semiasseX * cos(angle);
let y = semiasseY * sin(angle);
ellipse(x, y, 30)
}

fill(0);
push();
rotate(10);
ellipse(-55, 5, 30, 45)
pop();
push();
rotate(20);
ellipse(-75, 15, 8, 20)
pop();
push();
rotate(-20);
ellipse(-29, -20, 8, 20)
pop();
pop()
}

function drawHill() {
let numColline = 4; //num massimo di colline per riga
let spaziatura = width / (numColline – 1); //come disporre le colline in larghezza

// terza fila, una si e una no hanno il pattern, e anche nelle altre righe
for (let i = 0; i < numColline; i++) {
let hasPattern;
if (i % 2 === 0) {
hasPattern = false;
} else {
hasPattern = true;
}
drawSingleHill(i * spaziatura, height – 160, hasPattern, 260);
}

// seconda fila sfalsata
for (let i = 0; i < numColline; i++) {
let hasPattern;
if (i % 2 === 0) {
hasPattern = true;
} else {
hasPattern = false;
}
drawSingleHill(i * spaziatura – 50, height – 80, hasPattern, 240);
}

// prima fila
for (let i = 0; i < numColline; i++) {
let hasPattern;
if (i % 2 === 0) {
hasPattern = false;
} else {
hasPattern = true;
}
drawSingleHill(i * spaziatura, height, hasPattern, 220);
}
}

function drawSingleHill(x, y, hasPattern, h) {
push();
translate(x, y);
let w = 220;

let hillShape = () => {
beginShape();
curveVertex(-w / 2, 400);
curveVertex(-w / 2, 0);
curveVertex(0, -h);
curveVertex(w / 2, 0);
curveVertex(w / 2, 400);
endShape(CLOSE);
};

stroke(coloreTratto);
strokeWeight(3);

// Scelta del colore
if (hasPattern === true) {
fill(coloreCollina);
} else {
fill(colB_Attuale);
}

hillShape();

if (hasPattern) {
push();
beginClip();
hillShape();
endClip();
noStroke();
stroke(rigaAttuale);
strokeWeight(6);
for (let l = -400; l < 400; l += 20) {
line(l – 200, -400, l + 200, 400);
}
pop();
}
pop();
}