Linda Mion – Geometric Typography – Refactoring

---

> Cos’è cambiato

Le principali modifiche che ho apportato sono due:

1. Aggiunta del Loop
   if (xL > 400) { xL = -90; }
if (xM > 400) { xM = -90; }
   Nel codice d’origine le lettere escono dal canvas e spariscono per sempre. Ora, quando superano il bordo destro (x > 400), ricompaiono da sinistra con un valore negativo, creando un effetto loop continuo.
2. Introdotti push() / pop() + translate() al posto delle coordinate
   Prima le coordinate includevano direttamente xL o xM:
   rect(xL, 150, 40, 150);
vertex(xM, 300);
   Ora si sposta l’origine del sistema di riferimento con translate, e le forme usano coordinate locali che partono da 0:
   translate(xL, 0); 
   rect(0, 150, 40, 150);
   push() e pop() fanno sì che questa trasformazione sia isolata: dopo il pop(), il sistema di coordinate torna a quello originale, così le due lettere non si influenzano a vicenda.

> Codice

Variabili
let xL = 90; // posizione orizzontale iniziale della L
let xM = 220; // posizione orizzontale iniziale della M

Setup
function setup() {
createCanvas(400, 400); // crea un’area di disegno 400×400 px
}

Draw
function draw() {
background(mouseX, mouseY, 255); // sfondo che cambia colore in base alla posizione del mouse; mouseX controlla il rosso, mouseY il verde, 255 il blu

Movimento
xL += 2; // velocità della L per frame
xM += 2;// velocità della M per frame

Loop
if (xL > 400) {
xL = -90;
}
if (xM > 400) {
xM = -90;
}

Lettera L
push(); // salva lo stato corrente
translate(xL, 0); // sposta l’origine: ora x=0 equivale a xL
fill(255 – mouseX, 255 – mouseY, 150); // Il colore di riempimento è inverso rispetto al movimento del mouse
noStroke(); // senza contorno
// costruzione della L con due rettangoli
rect(0, 150, 40, 150); // barra verticale, coordinate locali, partono da 0
rect(0, 260, 90, 40); // base orizzontale
pop(); // ripristina lo stato precedente

Lettera M
push(); // nuovo stato isolato
translate(xM, 0); // sposta l’origine a xM
fill(mouseX, mouseY, 255); // riempimento che cambia con il movimento del mouse
strokeWeight(35); // spessore
stroke(255 – mouseX, 255 – mouseY, 150); // Il colore di contorno è inverso rispetto al movimento del mouse
strokeCap(SQUARE); // estremità delle linee squadrate

beginShape(); // Disegno la forma della M punto per punto
vertex(0, 300);
vertex(0, 165);
vertex(10, 165);
vertex(45, 200);
vertex(80, 165);
vertex(90, 165);
vertex(90, 300);
endShape(); // Chiusura della forma
pop(); // ripristina lo stato precedente
}

> p5.js