Un'immagine raster memorizza il risultato: il colore di ogni punto. Un'immagine vettoriale memorizza invece la ricetta: «traccia una linea da qui a lì, curvala in questo modo, riempi l'area di blu». Il disegno vero e proprio viene prodotto solo al momento della visualizzazione, alla dimensione richiesta. Per questo un logo vettoriale è nitido sia su un biglietto da visita sia su un cartellone.
Gli elementi di base
Ogni programma vettoriale, dagli editor professionali a quelli open source, ragiona con pochi concetti:
- Punto di ancoraggio: una posizione (x, y) da cui passa il tracciato.
- Segmento: il tratto che unisce due ancoraggi, rettilineo o curvo.
- Maniglie (punti di controllo): punti che non stanno sul tracciato ma ne determinano la curvatura.
- Tracciato (path): una sequenza di segmenti, aperta o chiusa.
- Riempimento e contorno: il colore (o sfumatura) all'interno e lo stile della linea lungo il bordo, con spessore, terminazioni e giunzioni.
Con questi elementi si costruisce tutto, dalle icone ai caratteri tipografici.
La curva di Bézier cubica
La curva più usata è la Bézier cubica, definita da quattro punti: P0 e P3 sono gli estremi, P1 e P2 sono i punti di controllo. La curva parte da P0 diretta verso P1, arriva in P3 provenendo dalla direzione di P2, e in mezzo è "attratta" dai controlli senza passarci.
La formula, per un parametro t che va da 0 a 1, è:
B(t) = (1-t)³·P0 + 3(1-t)²t·P1 + 3(1-t)t²·P2 + t³·P3
Non serve ricordarla, ma è utile capirne la conseguenza: la curva è sempre contenuta nel poligono formato dai quattro punti (il cosiddetto inviluppo convesso). Per questo, quando trascinate una maniglia, la curva la "insegue" in modo prevedibile.
Esiste anche la Bézier quadratica, con un solo punto di controllo, usata per esempio nei font TrueType. È più semplice ma meno flessibile: per ottenere certe forme servono più segmenti.
L'algoritmo di de Casteljau
C'è un modo elegante e geometrico di trovare un punto sulla curva. Si prende t = 0,5: si trova il punto medio tra P0 e P1, tra P1 e P2, tra P2 e P3; poi i punti medi tra questi tre; poi il punto medio tra gli ultimi due. Quello è il punto della curva. Il procedimento divide anche la curva in due curve più piccole, ed è così che molti programmi la suddividono in segmenti rettilinei abbastanza brevi da essere disegnati.
Continuità: perché certe curve sembrano «spezzate»
Quando due segmenti curvi si incontrano in un ancoraggio, la giunzione può essere:
| Tipo di nodo | Cosa succede alle maniglie | Effetto visivo |
|---|---|---|
| Angolo | indipendenti | spigolo netto |
| Liscio | allineate sulla stessa retta | nessuno spigolo, ma possibile "salto" di curvatura |
| Simmetrico | allineate e di uguale lunghezza | transizione molto morbida |
Il "salto" di curvatura è quello che un occhio allenato nota nei loghi disegnati in fretta: la linea non ha angoli, ma in un punto sembra cambiare improvvisamente velocità. Chi disegna caratteri tipografici dedica molto tempo proprio a questo.
Come si disegna bene un tracciato
Dopo molti anni di file da sistemare, le regole che consiglio sono poche e concrete:
- Pochi ancoraggi: più punti non significano più precisione, ma più irregolarità. Un cerchio si fa con quattro ancoraggi.
- Ancoraggi sugli estremi: mettete i punti dove la curva raggiunge il massimo in orizzontale o in verticale, con maniglie orizzontali o verticali.
- Maniglie proporzionate: una regola pratica è che una maniglia non superi circa un terzo della lunghezza del segmento.
- Tracciati chiusi per le forme piene: un riempimento su un tracciato aperto si comporta in modo diverso da programma a programma.
- Contorni convertiti quando serve: per loghi destinati alla stampa o al taglio, trasformate i contorni in forme piene, così lo spessore non dipende dal programma.
Dal vettore allo schermo
Lo schermo resta comunque fatto di pixel. Il processo che trasforma un tracciato in pixel si chiama rasterizzazione: il programma calcola quali pixel cadono dentro la forma e, per i pixel di bordo, quanta parte ne è coperta. Questa copertura parziale produce l'antialiasing, cioè quei pixel di colore intermedio che rendono le curve morbide.
Per decidere cosa sta "dentro" una forma complessa, che magari si interseca con se stessa, esistono due regole: nonzero ed even-odd. La differenza si vede, per esempio, in una stella disegnata con un unico tracciato: con even-odd il pentagono centrale resta vuoto, con nonzero viene riempito.
Quando il vettoriale non basta
La grafica vettoriale è ideale per loghi, icone, diagrammi, mappe, caratteri e illustrazioni a tinte piatte. Diventa inefficiente per le fotografie: descrivere ogni variazione di luce con curve richiederebbe milioni di elementi, e il file sarebbe più pesante e più lento di un buon JPEG. Gli strumenti di "vettorizzazione automatica" funzionano bene su disegni puliti, male sulle foto.
Va considerato anche il costo di visualizzazione: un'illustrazione con decine di migliaia di tracciati, ombre e sfumature va ricalcolata ogni volta che si cambia zoom, e su dispositivi modesti può rallentare.
In sintesi
- La grafica vettoriale descrive forme con tracciati, ancoraggi e maniglie; i pixel vengono calcolati solo alla visualizzazione.
- La curva di Bézier cubica usa due estremi e due punti di controllo e resta dentro il loro inviluppo convesso.
- Il tipo di nodo (angolo, liscio, simmetrico) determina la morbidezza delle giunzioni.
- Pochi ancoraggi ben posizionati producono curve migliori di molti punti casuali.
- Il vettoriale è ideale per loghi e icone, non per le fotografie.
