By Leave a Comment on Bezier curve

Bezier krommen worden gebruikt in computer graphics om vormen te tekenen, voor CSS animatie en op vele andere plaatsen.

Ze zijn een zeer eenvoudig iets, de moeite waard om een keer te bestuderen en je dan comfortabel te voelen in de wereld van vector graphics en geavanceerde animaties.

Controle punten

Een bezier curve wordt gedefinieerd door controle punten.

Er kunnen er 2, 3, 4 of meer zijn.

Voorbeeld, twee punten curve:

Drie punten curve:

Vier punten curve:

Als je goed naar deze curven kijkt, valt meteen op:

  1. Punten liggen niet altijd op de curve. Dat is volkomen normaal, later zullen we zien hoe de kromme is opgebouwd.

  2. De volgorde van de kromme is gelijk aan het aantal punten min één.Voor twee punten hebben we een lineaire kromme (dat is een rechte lijn), voor drie punten – kwadratische kromme (parabolisch), voor vier punten – kubische kromme.

  3. Een kromme ligt altijd binnen de convexe schil van controlepunten:

Omwille van die laatste eigenschap is het in computergrafiek mogelijk om de snijproeven te optimaliseren. Als convexe hulls elkaar niet snijden, dan snijden curven elkaar ook niet. Dus eerst controleren of de convexe rompen elkaar snijden kan een zeer snel “geen snijpunt” resultaat geven. Het controleren van de intersectie van convexe hulls is veel eenvoudiger, omdat het rechthoeken, driehoeken enzovoort zijn (zie het plaatje hierboven), veel eenvoudiger figuren dan de kromme.

De belangrijkste waarde van Bezier krommen voor het tekenen – door het verplaatsen van de punten verandert de kromme op een intuïtief voor de hand liggende manier.

Probeer eens controlepunten te verplaatsen met de muis in het voorbeeld hieronder:

Zoals je kunt zien, strekt de kromme zich uit langs de raaklijnen 1 → 2 en 3 → 4.

Na enige oefening wordt het duidelijk hoe je punten moet plaatsen om de gewenste kromme te krijgen. En door meerdere krommen met elkaar te verbinden kunnen we praktisch alles krijgen.

Hier zijn enkele voorbeelden:

Het algoritme vanDe Casteljau

Er bestaat een wiskundige formule voor Bezier krommen, maar laten we die wat later behandelen, want het algoritme vanDe Casteljau is identiek aan de wiskundige definitie en laat visueel zien hoe het is opgebouwd.

Laten we eerst het 3-punts voorbeeld zien.

Hier is de demo, en de uitleg volgt.

Controle punten (1,2 en 3) kunnen worden verplaatst met de muis. Druk op de “play” knop om het uit te voeren.

De Casteljau’s algoritme voor het bouwen van de 3-punts bezier curve:

  1. Teken controle punten. In de demo hierboven zijn ze gelabeld: 1, 2, 3.

  2. Bouw segmenten tussen de controlepunten 1 → 2 → 3. In de demo hierboven zijn ze bruin.

  3. De parameter t verplaatst zich van 0 naar 1. In het voorbeeld hierboven wordt de stap 0.05 gebruikt: de lus gaat over 0, 0.05, 0.1, 0.15, ... 0.95, 1.

    Voor elk van deze waarden van t:

    • Op elk bruin segment nemen we een punt dat op de afstand evenredig met t van het begin ligt. Omdat er twee segmenten zijn, hebben we twee punten.

      Bijv. t=0 – beide punten liggen aan het begin van de segmenten, en bij t=0.25 – op 25% van de segmentlengte vanaf het begin, bij t=0.5 – 50%(het midden), bij t=1 – aan het eind van de segmenten.

    • Verbind de punten. Op het plaatje hieronder is het verbindende segment blauw geschilderd.

Voor t=0.25 Voor t=0.5

  1. Neem nu in het blauwe segment een punt op de afstand evenredig met dezelfde waarde van t. Dat wil zeggen, voor t=0.25 (het linker plaatje) hebben we een punt aan het eind van het linker kwart van het segment, en voor t=0.5 (het rechter plaatje) – in het midden van het segment. Op de plaatjes hierboven is dat punt rood.

  2. Zoals t van 0 naar 1 loopt, voegt elke waarde van t een punt toe aan de kromme. De verzameling van zulke punten vormt de Bezier-kromme. Hij is rood en parabolisch op de plaatjes hierboven.

Dat was een proces voor 3 punten. Maar hetzelfde geldt voor 4 punten.

De demo voor 4 punten (punten kunnen met de muis worden verplaatst):

Het algoritme voor 4 punten:

  • Verbind de controlepunten door segmenten: 1 → 2, 2 → 3, 3 → 4. Er zullen 3 bruine segmenten zijn.
  • Voor elke t in het interval van 0 tot 1:
    • We nemen punten op deze segmenten op de afstand evenredig aan t van het begin. Deze punten zijn verbonden, zodat we twee groene lijnstukken hebben.
    • Op deze lijnstukken nemen we punten evenredig aan t. We krijgen dan één blauw lijnstuk.
    • Op het blauwe lijnstuk nemen we een punt evenredig met t. In bovenstaand voorbeeld is dat rood.
  • Deze punten vormen samen de kromme.

Het algoritme is recursief en kan veralgemeend worden voor elk aantal controlepunten.

Gegeven N van controlepunten:

  1. We verbinden ze om aanvankelijk N-1 segmenten te krijgen.
  2. Dan nemen we voor elke t van 0 tot 1 een punt op elk segment op de afstand evenredig aan t en verbinden ze. Er zullen N-2 segmenten zijn.
  3. Herhaal stap 2 totdat er nog maar één punt is.

Deze punten vormen de kromme.

Loop en pauzeer de voorbeelden om duidelijk te zien hoe de segmenten zijn en hoe de kromme is opgebouwd.

Een kromme die eruit ziet als y=1/t:

Zig-zag controlepunten werken ook prima:

Een lus maken is mogelijk:

Een niet-vloeiende Bezier curve (ja, dat kan ook):

Als er iets onduidelijk is in de algoritme beschrijving, kijk dan naar de live voorbeelden hierboven om te zien hoe de curve is opgebouwd.

Omdat het algoritme recursief is, kunnen we Bezier krommen bouwen in elke volgorde, dat wil zeggen: met 5, 6 of meer controlepunten. Maar in de praktijk zijn veel punten minder bruikbaar. Gewoonlijk nemen we 2-3 punten, en voor complexe lijnen lijmen we verschillende krommen aan elkaar. Dat is eenvoudiger te ontwikkelen en te berekenen.

Hoe teken je een kromme door gegeven punten?

Om een Bezier kromme te specificeren, worden controlepunten gebruikt. Zoals we kunnen zien, liggen ze niet op de kromme, behalve de eerste en de laatste.

Soms hebben we een andere taak: een kromme tekenen door meerdere punten, zodat ze allemaal op een enkele vloeiende kromme liggen. Die taak heet interpolatie, en die behandelen we hier niet.

Er zijn wiskundige formules voor zulke krommen, bijvoorbeeld Lagrange polynomialen. In computer graphics wordt spline interpolatie vaak gebruikt om vloeiende krommen te bouwen die veel punten met elkaar verbinden.

Wiskunde

Een Bezier kromme kan worden beschreven met een wiskundige formule.

Zoals we zagen – is het eigenlijk niet nodig om die te kennen, de meeste mensen tekenen de kromme gewoon door punten met een muis te verplaatsen. Maar als je van wiskunde houdt – hier is het.

Gegeven de coördinaten van de controlepunten Pi: het eerste controlepunt heeft coördinaten P1 = (x1, y1), het tweede: P2 = (x2, y2), enzovoort, worden de coördinaten van de kromme beschreven door de vergelijking die afhangt van de parameter t van het segment .

  • De formule voor een 2-punts kromme:

    P = (1-t)P1 + tP2

  • Voor 3 controlepunten:

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

  • Voor 4 controlepunten:

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

Dit zijn vectorvergelijkingen. Met andere woorden, we kunnen x en y in plaats van P zetten om overeenkomstige coördinaten te krijgen.

Bijv. de 3-punts kromme wordt gevormd door punten (x,y) berekend als:

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

In plaats van x1, y1, x2, y2, x3, y3 moeten we de coördinaten van 3 controlepunten zetten, en dan als t van 0 naar 1 gaat, hebben we voor elke waarde van t (x,y) van de kromme.

Bijv. als de controlepunten (0,0), (0.5, 1) en (1, 0) zijn, worden de vergelijkingen:

  • 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 als t van 0 naar 1 loopt, vormt de verzameling waarden (x,y) voor elke t de kromme voor zulke controlepunten.

Samenvatting

Bezier krommen worden gedefinieerd door hun controlepunten.

We zagen twee definities van Bezier krommen:

  1. Gebruik makend van een tekenproces: Het algoritme van De Casteljau.
  2. Het gebruik van een wiskundige formules.

Goede eigenschappen van Bezier krommen:

  • We kunnen vloeiende lijnen tekenen met een muis door controlepunten te verplaatsen.
  • Complexe vormen kunnen worden gemaakt van meerdere Bezier curven.

Gebruik:

  • In computer graphics, modelleren, vector grafische editors. Lettertypen worden beschreven door Bezier curven.
  • In web ontwikkeling – voor afbeeldingen op Canvas en in het SVG-formaat. Trouwens, “live” voorbeelden hierboven zijn geschreven in SVG. Ze zijn eigenlijk een enkel SVG document dat verschillende punten als parameters krijgt. Je kunt het in een apart venster openen en de bron zien: demo.svg.
  • In CSS animatie om het pad en de snelheid van de animatie te beschrijven.

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd.