Andrea Catalfamo – Geometric Typography

All’inizio dell’esercizio ho deciso di voler sviluppare un codice che mi desse la possibilità di disegnare il mio nome, far si che si muovesse nel Canvas in base al puntatore del mio mouse e che ogni volta che clicco il mouse sul Canvas sia il background che tutte le lettere cambiano colore in maniera differente.
Ho iniziato con il disegnare sul Canvas i rettangoli che compongono il mio nome e successivamente ho cominciato scrivendo la prima variabile e ho scritto:
“function draw” -> “fill=mouseIsPressed random colour”.
Ovviamente non ha funzionato e ho capito che c’erano veri problemi:

Il “fill” non è una variabile, “mouseIsPressed” va preceduto da “if” e andava inserito il codice colore rgb tra le variabili globali e poi successivamente dopo il “function draw” va inserito l’rgb random.

Come soluzione al problema ho quindi inserito la variabile rgb tra le generali e poi sotto a “function draw” ho inserito il comando di “if (mouseIsPressed) {r=random(255),g=random(255),b=random(255)}.

Superato questo problema ho cercato di far sì che le lettere seguissero il mouse e quindi ho inserito sotto al “function draw” il comando di “offsetx” e “offsety” abbinandoli alle coordinate del mouse x e y. Mi sono accorto che non cambiava nulla ed il problema era che non avevo dato ai rettangoli il comando di seguire l’offset, quindi ho inserito nelle coordinate di ogni rettangolo la nomenclatura “+ offsetx” e “+ offsety” ottenendo un risultato del genere:

rect(x + offsetx, y + offset, width, height).

Mi sono reso conto che il mouse non si trovava al centro della scritta ma nell’angolo in alto a destra, quindi per centrarla ho inserito ai valori di “mousex” e “mousey” le coordinate del punto che si trova al centro della scritta nel momento in cui viene generato il codice.

Nell’ultima parte del lavoro ho cercato di far si che ogni lettera fosse di un colore diverso. Inizialmente ho provato ad inserire il comando “fill(r,g,b)” prima di ogni lettera, pensando che per ogni comando inserito il codice avrebbe generato colori diversi, ma purtroppo il codice riconosce un’unica generazione casuale, quindi ho provato a scrivere nella sezione di “if(mouseIsPressed)” vari codici rgb applicando sigle diverse in base alla lettera, per esempio: “ar=random(255),ag=random(255),ab=random(255)” ho però notato che il comando non riconosce questo tipo di nomenclatura e quindi come soluzione sono andato ad inserire delle nuove variabili globali che hanno introdotto i valori rgb applicati alla singola lettera, per esempio per la lettera e ho usato scritto questa stringa nelle variabili globali: “let er = 255, eg = 255, eb = 255”.

Infine ho aggiunto le stesse nomenclature anche nei “fill(r,g,b)” di ogni rettangolo e mi sono concentrato sul framerate.

https://editor.p5js.org/A.catalfamo/full/VsGmZXsk