Free Press

Bezierkurver bruges i computergrafik til at tegne former, til CSS-animation og mange andre steder.

De er en meget enkel ting, der er værd at studere én gang og derefter føle sig tryg i en verden af vektorgrafik og avancerede animationer.

Kontrolpunkter

En bezierkurve er defineret af kontrolpunkter.

Der kan være 2, 3, 4 eller flere.

For eksempel to punkter kurve:

Tre punkter kurve:

Fire punkter kurve:

Hvis man ser nærmere på disse kurver, kan man straks bemærke:

1. Punkterne er ikke altid på kurven. Det er helt normalt, senere skal vi se, hvordan kurven er opbygget.

2. Kurveordenen er lig med antallet af punkter minus et.For to punkter har vi en lineær kurve (det er en ret linje), for tre punkter – en kvadratisk kurve (parabolisk), for fire punkter – en kubisk kurve.

3. En kurve ligger altid inden for det konvekse skrog af kontrolpunkter:

   

På grund af denne sidste egenskab er det i computergrafik muligt at optimere skæringstests i computergrafik. Hvis konvekse skrog ikke skærer hinanden, så gør kurver det heller ikke. Så hvis man først kontrollerer, om de konvekse skrog skærer hinanden, kan det give et meget hurtigt resultat “intet skæringspunkt”. Det er meget nemmere at kontrollere skæringspunktet for konvekse skrog, fordi de er rektangler, trekanter osv. (se billedet ovenfor), meget enklere figurer end kurven.

Den vigtigste værdi af Bezier-kurver til tegning – ved at flytte punkterne ændres kurven på en intuitivt indlysende måde.

Prøv at flytte kontrolpunkter med musen i eksemplet nedenfor:

Som du kan se, strækker kurven sig langs de tangentielle linjer 1 → 2 og 3 → 4.

Efter lidt øvelse bliver det indlysende, hvordan punkterne skal placeres for at få den ønskede kurve. Og ved at forbinde flere kurver kan vi få stort set hvad som helst.

Her er nogle eksempler:

De Casteljaus algoritme

Der findes en matematisk formel for Bezier-kurver, men lad os behandle den lidt senere, forDe Casteljaus algoritme er identisk med den matematiske definition og viser visuelt, hvordan den er konstrueret.

Først skal vi se 3-punkts-eksemplet.

Her er demoen, og forklaringen følger.

Kontrolpunkterne (1,2 og 3) kan flyttes med musen. Tryk på “play”-knappen for at køre den.

De Casteljaus algoritme til opbygning af 3-punkts bezier-kurven:

1. Tegn kontrolpunkter. I demonstrationen ovenfor er de mærket: 1, 2, 3.

2. Byg segmenter mellem kontrolpunkterne 1 → 2 → 3. I demoen ovenfor er de brune.

3. Parameteren t flyttes fra 0 til 1. I eksemplet ovenfor anvendes trin 0.05: løkken går over 0, 0.05, 0.1, 0.15, ... 0.95, 1.

   For hver af disse værdier af t:

   • På hvert brunt segment tager vi et punkt, der ligger på den afstand, der er proportional med t, fra dets begyndelse. Da der er to segmenter, har vi to punkter.

     For eksempel, for t=0 – vil begge punkter være i begyndelsen af segmenterne, og for t=0.25 – på 25% af segmentets længde fra begyndelsen, for t=0.5 – 50%(midten), for t=1 – i slutningen af segmenterne.

   • Forbind punkterne. På billedet nedenfor er det forbindende segment malet blåt.

For t=0.25	For t=0.5

1. Nu tager man i det blå segment et punkt på den afstand, der er proportional med samme værdi af t. Det vil sige, for t=0.25 (det venstre billede) har vi et punkt i slutningen af den venstre fjerdedel af segmentet, og for t=0.5 (det højre billede) – i midten af segmentet. På billederne ovenfor er dette punkt rødt.

2. Da t løber fra 0 til 1, tilføjer hver værdi af t et punkt til kurven. Mængden af sådanne punkter udgør Bezier-kurven. Den er rød og parabolisk på billederne ovenfor.

Det var en proces for 3 punkter. Men det samme er for 4 punkter.

Demoen for 4 punkter (punkterne kan flyttes med musen):

Algoritmen for 4 punkter:

• Forbind kontrolpunkterne ved hjælp af segmenter: 1 → 2, 2 → 3, 3 → 4. Der vil være 3 brune segmenter.
• For hvert t i intervallet fra 0 til 1:
  • Vi tager punkter på disse segmenter på den afstand, der er proportional med t fra begyndelsen. Disse punkter er forbundet, således at vi har to grønne segmenter.
  • På disse segmenter tager vi punkter proportionale med t. Vi får et blåt segment.
  • På det blå segment tager vi et punkt, der er proportionalt med t. På eksemplet ovenfor er det rødt.
• Disse punkter danner tilsammen kurven.

Algoritmen er rekursiv og kan generaliseres til et vilkårligt antal kontrolpunkter.

Givet N af kontrolpunkter:

1. Vi forbinder dem for at få oprindeligt N-1 segmenter.
2. Derpå tager vi for hvert t fra 0 til 1 et punkt på hvert segment på afstanden proportional med t og forbinder dem. Der vil være N-2 segmenter.
3. Gentag trin 2, indtil der kun er ét punkt.

Disse punkter udgør kurven.

Kør og sæt eksemplerne på pause for tydeligt at se segmenterne, og hvordan kurven er opbygget.

En kurve, der ser ud som y=1/t:

Zig-zag-kontrolpunkter fungerer også fint:

Det er muligt at lave en sløjfe:

En ikke-glat Bezier-kurve (ja, det er også muligt):

Hvis der er noget uklart i algoritmebeskrivelsen, kan du se på de levende eksempler ovenfor for at se, hvordan kurven er opbygget.

Da algoritmen er rekursiv, kan vi opbygge Bezier-kurver i en hvilken som helst rækkefølge, dvs.: ved hjælp af 5, 6 eller flere kontrolpunkter. Men i praksis er mange punkter mindre nyttige. Normalt tager vi 2-3 punkter, og for komplekse linjer limer vi flere kurver sammen. Det er enklere at udvikle og beregne.

Matematik

En Bezier-kurve kan beskrives ved hjælp af en matematisk formel.

Som vi så – er der faktisk ingen grund til at kende den, de fleste tegner bare kurven ved at flytte punkter med en mus. Men hvis du er til matematik – så er den her.

Givet koordinaterne for kontrolpunkterne Pi: det første kontrolpunkt har koordinaterne P1 = (x1, y1), det andet: P2 = (x2, y2) osv. beskrives kurvens koordinater ved ligningen, der afhænger af parameteren t fra segmentet .

• Formlen for en 2-punkts kurve:

  P = (1-t)P1 + tP2

• For 3 kontrolpunkter:

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

• For 4 kontrolpunkter:

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

Dette er vektorgensætninger. Vi kan med andre ord sætte x og y i stedet for P for at få de tilsvarende koordinater.

For eksempel er 3-punktskurven dannet af punkterne (x,y) beregnet som:

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

I stedet for x1, y1, x2, y2, x3, y3 skal vi sætte koordinaterne for 3 kontrolpunkter, og når t så bevæger sig fra 0 til 1, vil vi for hver værdi af t få (x,y) af kurven.

Til eksempel, hvis kontrolpunkterne er (0,0), (0.5, 1) og (1, 0), bliver ligningerne:

• 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, da t løber fra 0 til 1, danner mængden af værdier (x,y) for hver t kurven for sådanne kontrolpunkter.

Resumé

Bezier-kurver er defineret af deres kontrolpunkter.

Vi så to definitioner af Bezier-kurver:

1. Ved hjælp af en tegningsproces: De Casteljau’s algoritme.
2. Anvendelse af en matematisk formel.

Gode egenskaber ved Bezier-kurver:

• Vi kan tegne glatte linjer med en mus ved at flytte kontrolpunkter.
• Komplekse former kan laves af flere Bezier-kurver.

Anvendelse:

• I computergrafik, modellering, vektorgrafikredigering. Skrifttyper beskrives ved hjælp af Bezier-kurver.
• I webudvikling – til grafik på Canvas og i SVG-formatet. I øvrigt er “levende” eksempler ovenfor skrevet i SVG. De er faktisk et enkelt SVG-dokument, der får forskellige punkter som parametre. Du kan åbne det i et separat vindue og se kilden: demo.svg.
• I CSS-animation til at beskrive animationens bane og hastighed.