Anastasia Comini-Generative Landscape

SCOMPOSIZIONE LOGICA:
Prima di iniziare lo sketch, ho cercato un’immagine di riferimento di Bikini Bottom e ho selezionato gli elementi che rendevano il paesaggio identificabile. Successivamente ho riprodotto vettorialmente l’immagine su Figma così da avere a disposizione le coordinate e i valori di grandezza degli elementi che avrei poi utilizzato nello sketch. Dopo aver creato il landscape statico con tutti gli elementi, sono passata alla composizione del paesaggio nello sketch.

1. Palette colori: ho definito per ogni colore presente nello sketch una variabile globale così da creare una palette che mi permetta di non confondermi tra i vari codici dei colori. In questo modo ho semplificato il cambio del colore degli elementi andando a modificare solamente il valore globale.
2. Cielo: ho applicato la variabile globale “colore sfondo” per colorare il background in modo uniforme.
3. Fiorellini: la figura singola è stata realizzata direttamente su Figma visto che possiede delle curve e forme complesse, e poi ho importato l’immagine direttamente nello Sketch. Prima di inserirlo ho creato un valore globale nominandolo “fiorellino”. Successivamente ho aggiunto nella sezione Sketch file l’immagine png che volevo utilizzare così da poterla inserire con la funzione preload(). All’interno di questa funzione ho utilizzato il comando loadImage (). Ho deciso di creare una funzione a parte per i fiorellini così da facilitare la loro creazione nel draw. Questa funzione dipende dai valori x, y, colore, offset e velocità: questi valori mi permettono di differenziare e di rendere unici i fiorellini sparsi per la scena. Con il valore offset sono riuscita a far iniziare l’oscillazione dei vari fiorellini in punti diversi del ciclo. Dopo aver stabilito i parametri dell’animazione dei fiorellini, sono passata a disegnarli nella funzione draw applicando dei valori numerici ai parametri.
4. Sabbia: il fondo marino è composto da un’elisse a cui è stata applicata la variabile globale “colore sabbia”. Per ottenere l’elisse ho utilizzato nella funzione draw () il codice elipse () e ho inserito all’interno le coordinate impostate su Figma.
5. Strada: è stata realizzata con un poligono avente come colore la variabile globale “colorestrada”. Per ottenere il poligono ho utilizzato nella funzione draw () il codice beginShape (), endShape () e al suo interno ho inserito le coordinate segnate su Figma.
6. Edifici: sono stati realizzati direttamente su Figma e visto che possiedono delle curve e forme più complesse, ho importato le immagini direttamente nello Sketch. Prima di inserirle ho creato dei valori globali per distinguere i due edifici e per facilitarne l’inserimento nella scena. Successivamente ho aggiunto nella sezione Sketch file le immagini png che volevo utilizzare così da poterle inserire nello Sketch con la funzione preload(). All’interno di questa funzione ho utilizzato il comando loadImage (). Infine nella funzione draw () le ho posizionate secondo le coordinate ottenute su Figma attraverso il comando image ().

USO AI:
Ho utilizzato Gemini come strumento di feedback per la struttura generale dello sketch. Il contributo maggiore che mi ha dato è stato nel comprendere come rendere l’oscillazione dei fiorellini più casuale, dandomi come soluzione l’aggiunta del map () nella funzione drawfiorellini per i valori di dimensione e rotazione. Il prompt che ho usato è stato “nella mia funzione drawfiorellino cosa posso aggiungere per non far ruotare i fiorellini tutti all’unisono?”
*/

//palette colori
let coloresfondo = “#93E2F2”
let coloresabbia = “#D9CF9C”
let colorestrada = “#5A6368”
let colorefiore1 = “#DD95DF”
let colorefiore2 = “#48A1CA”
let colorefiore3 = “#48BB9F”
let colorefiore4 = “#E58B1D”
let colorefiore5 = “#A58A88”
let colorefiore6 = “#AEE72A”

//caricamento immagini
let edificio1;
let edificio2;
let fiorellino;

function preload() {
edificio1 = loadImage(“edificio1.png”);
edificio2= loadImage (“edificio2.png”);
fiorellino= loadImage (“fiorellino.png”);

}

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

}

function draw() {
background(coloresfondo);

//fiorellini
drawfiorellini (396, 86, colorefiore1, 0, 0.01);
drawfiorellini (238, 167, colorefiore2, 50, 0.02);
drawfiorellini (196, 278, colorefiore3, 80, 0.01);
drawfiorellini (127, 69, colorefiore4, 35, 0.01);
drawfiorellini (67, 200, colorefiore6, 250, 0.03)

//sabbia
noStroke ();
fill (coloresabbia);
ellipse(258, 450 , 647, 260);

//strada
noStroke ();
fill (colorestrada);
beginShape ();
vertex (178, 323.95);
vertex (277,498.95);
vertex (500,498.95);
vertex (500,470);
vertex (213,320);
endShape ();

//edifici
image(edificio1, 347, 104);
image(edificio2, 4, 200);

}

//funzione fiorellini con la dinamica dell’oscillazione
function drawfiorellini(x, y, colore, offset, velocità) {
push();
translate(x, y);

let tempo = (frameCount + offset) * velocità;
let oscillazione = sin(tempo);
let dimensione = map(oscillazione, -1, 1, 0.8, 1.2);
let rotazione = sin((frameCount + offset) * velocità);
let angolorotazione = map(rotazione, -1, 1, -QUARTER_PI, QUARTER_PI);

imageMode(CENTER);
scale(dimensione);
tint(colore);
rotate(angolorotazione);
image(fiorellino, 0, 0);
pop();
}