De kreativa kurvornas matematik

Har du någon gång ritat en kurva i Word eller Powerpoint? Då har du omedvetet dragit nytta av en modern matematisk idé – Bézierkurvor. I dag är dessa kurvor ett oundgängligt verktyg för såväl formgivare som animerare. För att förstå vad Bézierkuvor är, hur de drar nytta av matematik och varför de är designerns bästa vän, måste vi gå tillbaka i tiden. Tillbaka till en bilfabrik i Frankrike.

Béziers problem

Det är tidigt 60-tal i Frankrike och Pierre Bézier, ingenjör på biltillverkaren Renault, har ett problem. Bildelarna som fabriken producerar stämmer inte helt och hållet överens med ritningarna. Bristen på precision skapar problem vid monteringen, vilket kostar företaget både tid och pengar. Komponenter med raka kanter är inga problem – de går att skapa genom att göra exakta mätningar av sträckor och vinklar – men karossens kurviga konturer är en utmaning.

Problemet, inser Bézier, är att formgivarnas ritningar är gjorda för hand. Han grunnar på om inte dessa kurvor skulle kunna beskrivas matematiskt. Då skulle de kodas i ett språk som tillverkningsmaskinerna förstår, och resultatet skulle bli fullständig precision. Men hur översätter man en kurvas form till matematik?

Bézierkurvor

Problemet att översätta en kurvas form till matematik hade tacklats flera hundra år tidigare, bland annat av de franska matematikerna René Descartes och Pierre de Fermat. Genom att placera kurvan i ett koordinatsystem, kunde de beskriva läget av varje punkt (x, y) på kurvan med en matematisk formel.

Den blå parabeln här nedanför kan till exempel beskrivas med formeln y = 0,5x^2. Formeln berättar att oavsett vilken punkt på kurvan som vi väljer, så är y-koordinaten alltid hälften av x-koordinaten i kvadrat. När man tänker efter är det ganska remarkabelt att man kan kapsla in hela kurvans utseende i en nätt matematisk likhet.

Formeln y = 0,5x^2 beskriver att y-koordinaten för en punkt på kurvan alltid är hälften av x-koordinaten i kvadrat. Exempelvis går kurvan genom punkten (4, 8) där 8 = 0,5 · 4^2.

Genom att använda idéerna från Descartes och Fermat, skulle ingenjörerna på Renault kunna beskriva kurvorna på ritningarna med matematiska formler. Men Bézier insåg att beskrivningen inte skulle bli exakt. De handritade kurvorna på formgivarnas ritningar var inte matematiska standardkurvor, utan hade mer komplicerade former, och varje försök att beskriva dem med dessa metoder skulle inte ha tillräcklig precision.

När man gör en matematisk modell (lila) av en handritad kurva (blå), är det svårt att få dem att överensstämma exakt.

Béziers lösning var att skapa ett datorprogram där formgivarna kunde göra sina ritningar. Programmet fick namnet UNISURF. Om formgivaren ville rita en kurva, bestämdes kurvans utseende helt av positionerna hos ett antal kontrollpunkter. Genom att dra i kontrollpunkterna kunde formgivarna förändra kurvans form, tills den överensstämde med deras vision. Applikationen här nedanför visar en sådan kurva när antalet kontrollpunkter är fyra. Du kan dra i kontrollpunkterna P0, P1, P2 eller P3 för att modifiera kurvans form.*

Béziers genidrag var att han samtidigt hade hittat ett sätt att matematiskt beskriva kurvan utifrån kontrollpunkternas position. Hur formgivarna än valde att förändra kurvans utseende, hade Bézier alltså en matematisk beskrivning av deras design. Den matematiska beskrivningen kunde sedan användas för att programmera de maskiner som skulle tillverka den aktuella komponenten. Datorprogrammet gjorde det alltså möjligt för formgivarna att redan från början formulera sina ritningar i ett språk som ingenjörernas maskiner kunde förstå. Det gav fullständig precision. Inga diskrepanser.

Bernsteins polynom

Låt oss titta närmare på den matematiska beskrivningen av en Bézierkurva.

Varje punkts läge på en Bézierkurva bestäms av kontrollpunkternas positioner. Mer precist är punktens koordinater en kombination av kontrollpunkternas koordinater, i lite olika proportioner. Vi kan likna kontrollpunkterna vid ingredienser, som vi adderar i olika mängder för att få en punkt på kurvan.

Koordinaterna för en punkt på kurvan är en kombination av kontrollpunkternas koordinater, i proportioner som bestäms av talen a, b, c och d.

Hur mycket varje kontrollpunkt bidrar anges av talen a, b, c och d. Du kan tänka på dem som andelar, som tillsammans summerar till 100 %.

Genom att dra i glidaren t i applikationen här nedanför, ser du hur varje kontrollpunkts bidrag varierar när den svarta punkten rör sig längs kurvan. Notera att summan av bidragen, alltså summan a + b + c + d, alltid är lika med 1.  

Om du testade applikationen här ovanför märkte du att talen a, b, c och d varierar när vi låter punkten löpa längs kurvan. Man kan beskriva precis hur de varierar med hjälp av särskilda matematiska uttryck som kallas polynom. Så här ser polynomen ut när det är fyra kontrollpunkter som bestämmer kurvan:

Du kan tänka på variabeln t som en tidsvariabel, som varierar mellan 0 och 1. Genom att stoppa in olika värden på t, får du reda på värdet av a, b, c och d vid just den tidpunkten, och därmed i vilka proportioner som kontrollpunkterna P0, P1, P2 och P3 just då bidrar till punktens läge på kurvan.

Polynomen här ovanför kallas Bernsteinpolynom efter den ryske matematikern Sergei Natanovitch Bernstein (1880–1968). Han upptäckte dem i ett helt annat sammanhang redan i början av 1900-talet, men i Béziers händer fick de nytt liv.**

Fördelarna med Béziers lösning

Fördelarna med Béziers konstruktion var många. För det första skapades kurvorna genom att dra i kontrollpunkter, snarare än genom att göra komplicerade matematiska beräkningar, vilket gjorde verktyget intuitivt även för de formgivare som inte hade någon matematisk bakgrund. För det andra bestämdes varje kurva entydigt av några få kontrollpunkter, vilket gjorde metoden ideal ur datalagringssynpunkt – varje kurva krävde väldigt lite minne. För det tredje var kurvorna lätta att flytta, stretcha och rotera – det krävdes bara att man på motsvarande sätt flyttade, stretchade eller roterade kontrollpunkterna.  

Bézier var inte ensam om sin upptäckt. Ungefär samtidigt upptäcktes samma metod av matematikern Paul de Casteljau hos konkurrenten Citroën, men hans upptäckter hemligstämplades av företaget och kurvorna bär därför i dag Pierre Béziers namn.  

I var mans hand

I dag är Bézierkurvor formgivarens, grafikerns och designerns bästa vän. På det digitala ritbordet hjälper de till ett realisera motorhuvens kurviga kontur, favoritfåtöljens smidiga siluett och designglasögonens dyra båge. Ja, har du någon gång använt Photoshops pennverktyg eller ritat en kurva i Word eller Powerpoint, så har du faktiskt själv dragit nytta av Bézierkurvor.

Kurvorna är också ovärderliga verktyg för den som skapar datorspel. Filmsnuttarna här nedanför visar hur de används för att skapa välvda former i datorspelen Planet Coaster och Flowstorm, och har du någon gång fått flyga genom en animerad spelvärld, är kamerans bana med all säkerhet en Bézierkurva.  

Faktum är att Bézierkurvor har hjälpt till att definiera utseendet hos de bokstäver som du just nu följer med ögonen. Kurvorna är nämligen ett redskap i typsnittsdesign. Den gigantiska bokstaven e av typsnittet Times New Roman här nedanför är skapad med just Bézierkurvor. Du kan själv ändra bokstavens form, genom att dra i de röda kryssen.

Det som började som en idé på en bilfabrik i Frankrike är nu ett digitalt redskap i var mans hand. Bakom kulisserna arbetar, som så ofta, en matematisk idé – den här gången ett gäng kubiska polynom. Det är inte sällan just när matematiken är som mest osynlig, som den gör som mest nytta. Det är en del av matematikens styrka, att den kan arbeta så i det fördolda att den förblir osynlig för dem som använder den, men det gör oss också emellanåt blinda för dess imponerande användbarhet. I den här texten har matematiken fått stå i rampljuset för en stund.

Noter:

* Notera att kurvans startpunkt är P0, att kurvans slutpunkt är P3 och att kontrollpunkterna P1 och P2 definierar tangentriktningen i kurvans start- och slutpunkt.

** När kurvan bestäms av fyra kontrollpunkter är Bernsteinpolynomen av grad 3 och kurvan kallas för en kubisk Bézierkurva. När kurvan bestäms av tre kontrollpunkter är Bernsteinpolynomen av grad 2 och kurvan kallas för en kvadratisk Bézierkurva. Generellt gäller att graden hos Bernsteinpolynomen är antalet kontrollpunkter minus 1.

Referenser och vidare läsning

Buss, Samuel R. (2003) 3D Computer Graphics. A Mathematical Introduction with OpenGL. Cambridge University Press.

jdhao (2020) The Mathematics behind Font Shapes --- Bézier Curves and More. Blog.

Laurent, P.J & Sablonnière, P. (2001) Pierre Bézier: An engineer and a mathematician. Computer Aided Geometric Design 18 (2001) 609–617 

Rabut, Christophe (2001) Petite historie d’une idée bizarre: Les courbes et surfaces de Bézier.

Solai, Pavithra (2015) What the Bezier?! Medium.com

Wikipedia: Paul de Casteljau

Wikipedia: Pierre Bézier

Filmer:

Holmér, Freya (2021) The Beauty of Bézier Curves, YouTube

Shiach, John (2015) Bézier Curves. YouTube.

Wild Egg (2018) De Casteljau Bezier Curves, YouTube