Corbes de Bézier: les línies invisibles del disseny digital
Com unes fórmules matemàtiques van transformar el disseny gràfic
Introducció
Quan dibuixem una línia corba amb programes com Adobe Illustrator, Inkscape o qualsevol editor de gràfics vectorials, rarament pensem en les matemàtiques que hi ha al darrere.
Malgrat això, una gran part de les formes suaus que veiem en logotips, tipografies, icones i il·lustracions digitals es construeixen gràcies a unes corbes matemàtiques creades fa més de mig segle: les corbes de Bézier.
Cada vegada que ampliem una imatge vectorial sense perdre qualitat, és molt probable que aquestes corbes estiguin treballant silenciosament entre bastidors.
Qui era Pierre Bézier?
Les corbes porten el nom de Pierre Bézier, un enginyer francès que treballava per a Renault durant la dècada de 1960.
El seu objectiu inicial no tenia res a veure amb el disseny gràfic. Necessitava una manera eficient de descriure matemàticament les formes complexes de la carrosseria dels automòbils perquè poguessin ser fabricades amb precisió mitjançant sistemes assistits per ordinador.
La solució va resultar tan elegant que, amb el temps, es va convertir en una peça fonamental de la informàtica gràfica moderna.
Com funciona una corba de Bézier?
La idea és sorprenentment simple.
En lloc de definir una corba punt per punt, es defineixen uns pocs punts de control.
La corba no passa necessàriament per tots aquests punts. En canvi, la seva trajectòria queda atreta per ells.
Una corba de Bézier cúbica, la més utilitzada en disseny gràfic, necessita quatre punts:
- Punt inicial
- Primer punt de control
- Segon punt de control
- Punt final
Movent els punts de control es pot modificar la forma de la corba amb gran precisió, igual que si estiguéssim estirant una vareta flexible.
Les matemàtiques darrere les corbes de Bézier
Una de les raons de l'èxit de les corbes de Bézier és que es poden descriure mitjançant fórmules matemàtiques relativament senzilles.
En el cas més simple, una corba de Bézier quadràtica es defineix a partir de tres punts:
- P₀: punt inicial
- P₁: punt de control
- P₂: punt final
La seva equació és:
B(t) = (1 − t)²P₀ + 2(1 − t)tP₁ + t²P₂
on el paràmetre t varia entre 0 i 1.
Quan t = 0, la corba es troba exactament al punt inicial. Quan t = 1, arriba al punt final. Per als valors intermedis, la fórmula calcula la posició exacta de la corba.
La variant més utilitzada en disseny gràfic és la corba de Bézier cúbica, formada per quatre punts:
- P₀: punt inicial
- P₁: primer punt de control
- P₂: segon punt de control
- P₃: punt final
La seva equació és:
B(t) = (1 − t)³P₀ + 3(1 − t)²tP₁ + 3(1 − t)t²P₂ + t³P₃
Aquesta fórmula permet generar una enorme varietat de formes simplement movent els dos punts de control.
El més interessant és que els programes de dibuix no emmagatzemen tots els punts de la corba. Només necessiten guardar les coordenades dels punts de control. Quan cal mostrar la figura a la pantalla, l'ordinador calcula automàticament els punts intermedis mitjançant aquestes equacions.
Aquesta eficiència matemàtica és el que fa possible que un logotip vectorial ocupi molt poc espai en disc i, al mateix temps, es pugui ampliar des de la mida d'un segell fins a la d'una tanca publicitària sense perdre qualitat.
L'algoritme de De Casteljau
Tot i que les corbes de Bézier es defineixen matemàticament mitjançant polinomis, molts programes informàtics utilitzen un mètode geomètric per calcular-les: l'algoritme de De Casteljau.
Aquest algorisme va ser desenvolupat a finals dels anys cinquanta per l'enginyer francès Paul de Casteljau, mentre treballava per a Citroën. De fet, el seu treball és anterior al de Pierre Bézier, però durant anys va romandre pràcticament desconegut perquè formava part de la recerca interna de l'empresa.
La idea és extraordinàriament elegant.
En lloc de calcular directament la corba mitjançant una fórmula, es construeixen successivament nous punts situats entre els punts originals.
Imaginem una corba de Bézier cúbica amb quatre punts: P₀,P₁,P₂,P₃
Per a un valor determinat de t, entre 0 i 1, es calculen primer tres punts intermedis:
- Q₀ entre P₀ i P₁
- Q₁ entre P₁ i P₂
- Q₂ entre P₂ i P₃
Després es calculen dos nous punts:
- R₀ entre Q₀ i Q₁
- R₁ entre Q₁ i Q₂
Finalment es calcula un últim punt:
- B entre R₀ i R₁
Aquest punt B pertany exactament a la corba de Bézier.
Si repetim el procés per molts valors de t, obtenim tota la corba.
L'algoritme de De Casteljau té diversos avantatges: és molt estable numèricament, funciona bé amb corbes complexes, permet subdividir una corba en dues parts exactes i és fàcil d'implementar en ordinadors.
Es podria imaginar com si estiguéssim utilitzant una regla virtual per marcar punts intermedis entre diversos segments. A mesura que repetim el procés, els nous punts convergeixen cap a una posició exacta de la corba.
L'algoritme de De Casteljau és un dels exemples més elegants de la informàtica gràfica: una simple successió d'interpolacions lineals permet generar les mateixes corbes que es descriuen amb polinomis de tercer grau.
Prova-ho tu mateix
Aquí tens un mòdul interactiu! Això és el que pots fer:
- Slider de t: Mou-lo de 0 a 1 per veure com el punt B(t) (en vermell) recorre la corba. Les quatre targetes mostren el pes de cadascun dels punts de control en cada moment.
- Arrossega els punts de control: P₀, P₁, P₂ i P₃ (cada un en el seu color) es poden moure lliurement per reformar la corba en temps real.
- Construcció de De Casteljau: Les línies puntejades blaves i taronges mostren el procés geomètric que hi ha darrere la fórmula: interpolacions lineals successives fins arribar al punt exacte B(t) per al valor de t seleccionat.
Per què són tan importants?
Les corbes de Bézier ofereixen diversos avantatges:
- Necessiten molt poca informació per descriure formes complexes.
- Es poden ampliar indefinidament sense perdre qualitat.
- Permeten càlculs ràpids per part dels ordinadors.
- Faciliten la creació de tipografies, logotips i il·lustracions.
- S'adapten molt bé als formats vectorials.
Aquesta és la raó per la qual formats com SVG, EPS o PDF les utilitzen extensament.
On les trobem cada dia?
Encara que passin desapercebudes, les corbes de Bézier apareixen en multitud de llocs:
- Tipografies digitals
- Logotips corporatius
- Disseny industrial
- Videojocs
- Animacions
- Aplicacions CAD
- Impressió digital
- Navegadors web mitjançant SVG
Fins i tot la forma de moltes lletres que llegim cada dia està definida per corbes de Bézier.
De les matemàtiques a l'art
Un dels aspectes més fascinants de les corbes de Bézier és que unes fórmules matemàtiques relativament senzilles poden generar formes extraordinàriament elegants.
Aquest és un dels exemples més clars de com les matemàtiques poden convertir-se en una eina artística.
Sense aquestes corbes seria molt difícil imaginar els sistemes de disseny vectorial que avui considerem normals.
Referències
Webs
- Corba de Bézier - Viquipèdia
- A Primer on Bézier Curves
- MDN Web Docs: SVG Paths
- Bézier curve - Encyclopaedia Britannica
Vídeos
Bibliografia
- Farin, Gerald. Curves and Surfaces for Computer-Aided Geometric Design.
- Rogers, David F. An Introduction to NURBS: With Historical Perspective.
- Salomon, David. Curves and Surfaces for Computer Graphics.
Les corbes de Bézier permeten construir formes suaus i escalables a partir de pocs punts de control.