Free Press

Bezierkurvor används i datorgrafik för att rita former, för CSS-animationer och på många andra ställen.

De är mycket enkla, värda att studera en gång för att sedan känna sig bekväm i vektorgrafikens värld och avancerade animationer.

Kontrollpunkter

En bezierkurva definieras med hjälp av kontrollpunkter.

Det kan vara 2, 3, 4 eller fler.

Till exempel två punkters kurva:

Tre punkters kurva:

Fyra punkters kurva:

Om du tittar närmare på dessa kurvor kan du omedelbart märka:

1. Punkterna ligger inte alltid på kurvan. Det är helt normalt, senare ska vi se hur kurvan är uppbyggd.

2. Kurvans ordning är lika med antalet punkter minus ett.För två punkter har vi en linjär kurva (det är en rak linje), för tre punkter – en kvadratisk kurva (parabolisk), för fyra punkter – en kubisk kurva.

3. En kurva ligger alltid innanför det konvexa skrovet av kontrollpunkter:

   

På grund av den sista egenskapen är det möjligt att inom datorgrafik optimera skärningstester. Om konvexa skrov inte skär varandra så gör inte heller kurvor det. Att först kontrollera om de konvexa skalen skär varandra kan alltså ge ett mycket snabbt resultat ”ingen skärning”. Att kontrollera skärningspunkten för konvexa skrov är mycket enklare, eftersom de är rektanglar, trianglar och så vidare (se bilden ovan), mycket enklare figurer än kurvan.

Det viktigaste värdet av Bezierkurvor för ritning – genom att flytta punkterna förändras kurvan på ett intuitivt uppenbart sätt.

Prova att flytta kontrollpunkter med hjälp av musen i exemplet nedan:

Som du märker sträcker sig kurvan längs de tangentiella linjerna 1 → 2 och 3 → 4.

Efter lite övning blir det uppenbart hur man ska placera punkterna för att få den önskade kurvan. Och genom att koppla ihop flera kurvor kan vi få praktiskt taget vad som helst.

Här är några exempel:

De Casteljaus algoritm

Det finns en matematisk formel för Bezier-kurvor, men vi tar upp den lite senare, eftersomDe Casteljaus algoritm är identisk med den matematiska definitionen och visar visuellt hur den är konstruerad.

Först ska vi se 3-punktsexemplet.

Här är demonstrationen, och förklaringen följer.

Kontrollpunkterna (1,2 och 3) kan flyttas med musen. Tryck på ”play”-knappen för att köra den.

De Casteljaus algoritm för att bygga 3-punktsbezierkurvan:

1. Rita kontrollpunkter. I demonstrationen ovan är de märkta: 1, 2, 3.

2. Bygg segment mellan kontrollpunkterna 1 → 2 → 3. I demonstrationen ovan är de bruna.

3. Parametern t flyttas från 0 till 1. I exemplet ovan används steget 0.05: slingan går över 0, 0.05, 0.1, 0.15, ... 0.95, 1.

   För vart och ett av dessa värden på t:

   • På varje brunt segment tar vi en punkt som är belägen på det avstånd som är proportionellt mot t från dess början. Eftersom det finns två segment har vi två punkter.

     Till exempel, för t=0 – båda punkterna kommer att ligga i början av segmenten, och för t=0.25 – på 25 % av segmentets längd från början, för t=0.5 – 50 %(mitten), för t=1 – i slutet av segmenten.

   • Koppla ihop punkterna. På bilden nedan är det anslutande segmentet målat blått.

.

För t=0.25	För t=0.5

1. Nu tar du i det blå segmentet en punkt på avståndet som är proportionellt mot samma värde på t. Det vill säga, för t=0.25 (den vänstra bilden) har vi en punkt i slutet av den vänstra fjärdedelen av segmentet, och för t=0.5 (den högra bilden) – i mitten av segmentet. På bilderna ovan är den punkten röd.

2. Då t löper från 0 till 1, lägger varje värde på t till en punkt till kurvan. Mängden sådana punkter bildar Bezierkurvan. Den är röd och parabolisk på bilderna ovan.

Det var en process för 3 punkter. Men samma sak gäller för 4 punkter.

Demo för 4 punkter (punkterna kan flyttas med musen):

Algoritmen för 4 punkter:

• Koppla ihop kontrollpunkterna med segment: 1 → 2, 2 → 3, 3 → 4. Det blir 3 bruna segment.
• För varje t i intervallet från 0 till 1:
  • Vi tar punkter på dessa segment på ett avstånd som är proportionellt mot t från början. Dessa punkter är sammankopplade, så att vi har två gröna segment.
  • På dessa segment tar vi punkter som är proportionella mot t. Vi får ett blått segment.
  • På det blå segmentet tar vi en punkt proportionell mot t. På exemplet ovan är den röd.
• Dessa punkter bildar tillsammans kurvan.

Algoritmen är rekursiv och kan generaliseras för valfritt antal kontrollpunkter.

Givet N av kontrollpunkter:

1. Vi kopplar ihop dem för att få initialt N-1 segment.
2. Därefter tar vi för varje t från 0 till 1 en punkt på varje segment på avståndet proportionellt mot t och kopplar ihop dem. Det blir N-2 segment.
3. Upprepa steg 2 tills det bara finns en punkt.

Dessa punkter bildar kurvan.

Kör och pausa exemplen för att tydligt se segmenten och hur kurvan är uppbyggd.

En kurva som ser ut som y=1/t:

Zig-zag-kontrollpunkter fungerar också bra:

Att göra en slinga är möjligt:

En icke-mjuk Bezier-kurva (ja, det är också möjligt):

Om det är något som är oklart i beskrivningen av algoritmen kan du titta på de levande exemplen ovan för att se hur kurvan byggs.

Då algoritmen är rekursiv kan vi bygga Bezierkurvor i vilken ordning som helst, det vill säga: med 5, 6 eller fler kontrollpunkter. Men i praktiken är många punkter mindre användbara. Vanligtvis tar vi 2-3 punkter, och för komplexa linjer limmar vi ihop flera kurvor. Det är enklare att utveckla och beräkna.

Matematik

En Bezierkurva kan beskrivas med hjälp av en matematisk formel.

Som vi såg – det finns faktiskt inget behov av att känna till den, de flesta ritar bara kurvan genom att flytta punkter med musen. Men om du är intresserad av matematik – här är den.

Givet koordinaterna för kontrollpunkterna Pi: den första kontrollpunkten har koordinaterna P1 = (x1, y1), den andra: P2 = (x2, y2), och så vidare, beskrivs kurvens koordinater av ekvationen som beror på parametern t från segmentet .

• Formeln för en 2-punktskurva:

  P = (1-t)P1 + tP2

• För 3 kontrollpunkter:

  P = (1−t)2P1 + 2(1−t)tP2 + t2P3

• För 4 kontrollpunkter:

  P = (1−t)3P1 + 3(1−t)2tP2 +3(1−t)t2P3 + t3P4

Detta är vektorekvationer. Vi kan med andra ord sätta x och y i stället för P för att få motsvarande koordinater.

Till exempel bildas 3-punktskurvan av punkterna (x,y) som beräknas som:

• x = (1−t)2x1 + 2(1−t)tx2 + t2x3
• y = (1−t)2y1 + 2(1−t)ty2 + t2y3

Istället för x1, y1, x2, y2, x3, y3 bör vi sätta koordinater för 3 kontrollpunkter, och sedan, när t flyttar sig från 0 till 1, kommer vi för varje värde av t att få (x,y) av kurvan.

Till exempel, om kontrollpunkterna är (0,0), (0.5, 1) och (1, 0) blir ekvationerna:

• x = (1−t)2 * 0 + 2(1−t)t * 0.5 + t2 * 1 = (1-t)t + t2 = t
• y = (1−t)2 * 0 + 2(1−t)t * 1 + t2 * 0 = 2(1-t)t = –2t2 + 2t

Nu när t löper från 0 till 1 bildar uppsättningen av värden (x,y) för varje t kurvan för sådana kontrollpunkter.

Sammanfattning

Bezierkurvor definieras av sina kontrollpunkter.

Vi såg två definitioner av Bezierkurvor:

1. Med hjälp av en ritprocess: De Casteljaus algoritm.
2. Användning av matematiska formler.

Goda egenskaper hos Bezierkurvor:

• Vi kan rita släta linjer med musen genom att flytta kontrollpunkter.
• Komplexa former kan göras av flera Bezierkurvor.

Användning:

• I datorgrafik, modellering, vektorgrafikredigerare. Typsnitt beskrivs av Bezierkurvor.
• I webbutveckling – för grafik på Canvas och i SVG-format. Förresten är ”levande” exempel ovan skrivna i SVG. De är egentligen ett enda SVG-dokument som får olika punkter som parametrar. Du kan öppna det i ett separat fönster och se källan: demo.svg.
• I CSS-animationer för att beskriva animationens bana och hastighet.