Corinne Damaschi – Geometric Typography – Refactoring

Conversazione con Gemini

Io:

Controlla la mia identazione e i miei commenti: sono chiari per un altro programmatore che legge il mio lavoro? :

Gemini:

La tua logica di base è chiara e i commenti descrittivi (come //1 curva DX - esterno, alto//) sono ottimi perché aiutano chi legge a mappare mentalmente il codice sul disegno visivo. Tuttavia, ci sono alcune pratiche che creano “rumore” visivo e ridondanza.
Ecco i punti principali su cui lavorare per rendere il codice professionale:
Evita le ripetizioni (Principio DRY): In p5.js, le impostazioni di stile come stroke() e noFill() rimangono attive per tutte le forme successive finché non decidi di cambiarle. Non c’è bisogno di scrivere stroke('#D40000'); prima di ogni singola riga. Basta dichiararlo una volta all’inizio del draw().
Elimina i comandi sovrascritti: Prima di ogni curva hai scritto stroke(0); seguito immediatamente da stroke('#D40000');. Il primo comando (bordo nero) è inutile perché viene annullato all’istante dal secondo (bordo rosso).
Pulisci il codice “morto”: Mantenere i point() commentati per i punti di controllo è un’ottima tecnica di debug mentre costruisci le curve di Bezier. Tuttavia, nel codice definitivo pronto per essere letto da altri, questi commenti bloccano la lettura. Se la forma è finita, cancellali.
Gestisci gli spazi verticali: Le righe vuote multiple spezzano inutilmente il ritmo di lettura. Usa una sola riga vuota per separare blocchi logici diversi.
Ecco come appare il tuo codice ripulito, ottimizzato e indentato correttamente. Come vedrai, è lungo un terzo dell’originale ma fa esattamente la stessa cosa:
JavaScript

Io:

Esiste un modo con cui posso ottimizzare il codice evitando di ripetere più volte lo stesso comando nel mio caso le curve di Bezier o il comando line? Oppure se c’è un modo per disegnare una linea continua, visto che fondamentalmente il mio sketch È composto da una sola curva con diverse inclinazioni e curvature, ma che poi alla fine si chiude su se stessa o comunque dovrebbe, nel senso che magari ho sbagliato qualche coordinata di poco e sembra che le curve siano scollegate, ma in realtà il disegno definitivo dovrebbe essere un’intera curva collegata e chiusa. 

Gemini:

Sì, esiste un metodo nativo in p5.js pensato esattamente per questo: le funzioni beginShape(), vertex(), bezierVertex() e endShape(CLOSE).
Questo approccio ti permette di disegnare un’unica forma vettoriale continua. È molto più elegante, riduce le righe di codice e, soprattutto, l’opzione CLOSE finale forza la chiusura perfetta del tracciato, collegando in automatico l’ultimo punto al primo, correggendo quelle micro-imprecisioni di coordinate.
Ecco come funziona la conversione:
Apri il tracciato con beginShape().
Imposti il primissimo punto di partenza con vertex(x, y).
Per tracciare una linea dritta dal punto precedente, aggiungi un altro vertex(x, y).
Per tracciare una curva dal punto precedente, usi bezierVertex().
Chiudi la forma con endShape(CLOSE).
La regola d’oro di bezierVertex: A differenza del comando bezier() che richiede 8 numeri (x/y di partenza, x/y di controllo 1, x/y di controllo 2, x/y finale), bezierVertex() ne richiede solo 6. Il punto di partenza viene saltato perché p5.js usa automaticamente l’ultimo punto disegnato come partenza.
Ecco come si traduce il lato destro del tuo disegno usando questo metodo:
JavaScript

function setup() { createCanvas(357, 239); background('#9AB1D4'); } function draw() { stroke('#D40000'); noFill(); beginShape(); // 1. Punto di partenza in alto a sinistra vertex(170, 54); // 2. Linea dritta verso destra vertex(199, 54); // 3. Prima curva (esterno alto) // coordinate originarie: bezier(199, 54, 227, 54, 272, 54, 272, 119); // Diventa: bezierVertex(227, 54, 272, 54, 272, 119); // 4. Seconda curva (esterno basso) // coordinate originarie: bezier(272, 119, 272, 177, 227, 184, 199, 184); // Diventa: bezierVertex(272, 177, 227, 184, 199, 184); // ... puoi continuare ad agganciare vertex() e bezierVertex() per il resto della figura ... // Chiude la forma collegando in automatico l'ultimo punto a (170, 54) endShape(CLOSE); }
Usando questa struttura, la tua figura viene trattata dal motore di rendering come un unico “solido” geometrico. Questo significa che se un domani decidessi di togliere il noFill() e aggiungere un colore di riempimento, il colore riempirebbe l’interno della sagoma in modo perfetto, senza sbavature tra le singole linee.