Maison >interface Web >js tutoriel >Comprendre simplement les courbes de Bézier.

Comprendre simplement les courbes de Bézier.

王林
王林original
2024-08-16 11:04:02583parcourir

Imaginez si vous ne pouviez utiliser que des lignes droites, des ellipses et des cercles, ne serait-il pas difficile de concevoir une voiture avec des lignes douces et une apparence complexe ?

En 1962, l'ingénieur français Pierre Bézier publie la courbe de Bézier, initialement utilisée pour la conception de la carrosserie principale des voitures.

Simply understanding Bézier curves.

Les courbes de Bézier peuvent définir une courbe lisse grâce à une série de points de contrôle. La courbe passe toujours par le premier et le dernier points de contrôle et est influencée par la forme des points de contrôle intermédiaires. De plus, les courbes de Bézier ont la propriété de coques convexes.

Les courbes de Bézier sont largement utilisées en infographie et en modélisation d'images, comme dans l'animation, la conception de polices et le design industriel.

Formule

Simply understanding Bézier curves.

Comprenons cela.

P(t) représente un point de la courbe à t (t est une fraction, avec une valeur de 0 à 1). Qu'est-ce qu'un point de la courbe en t ? Une description de courbe courante est : y = f(x), et pour l'instant, comprenons P(t) comme f(x). La différence est que P(t) est une représentation paramétrique (et le résultat du calcul est un "vecteur" comme [x, y]), qui sera expliqué en détail plus tard.

Ensuite, Pi représente le i-ième point de contrôle (i commence à 0). En prenant la figure ci-dessus comme exemple, il existe 4 points de contrôle, qui sont P0, P1, P2, P3. Le n dans la formule est le dernier indice des points de contrôle, c'est-à-dire n = 3 (notez qu'il ne s'agit pas du nombre de points de contrôle, mais du nombre moins 1).

Bi,n(t) est la fonction de base de Bernstein, également connue sous le nom de fonction de base. Pour chaque (i, n) spécifique, il existe une fonction de base différente qui lui correspond. Si vous comprenez dans une perspective pondérée, vous pouvez considérer la fonction de base comme une fonction de poids, indiquant la "contribution" du i-ème point de contrôle Pi aux coordonnées de la courbe à la position t.

La formule de la fonction de base est la suivante :

Simply understanding Bézier curves.

(ni)binom{n}{i} (in ) Est le numéro de combinaison (combien de façons de choisir i parmi n ?). Quant à la raison pour laquelle la fonction de base ressemble à ceci, elle peut être comprise en relation avec l'algorithme de De Casteljau (voir plus loin dans le texte)

Retour à la formule P(t), i=0nsum_{i=0}^{n} i=0n est le symbole de sommation, indiquant que la partie suivante ( Bi,n(t)Pi B_{i,n}(t) cdot P_iBi,n(t) ⋅Pi ) doit être additionné de i=0 à i=n.

En prenant le chiffre ci-dessus comme exemple, en supposant que nous voulons calculer P(0,1), comment le faire ? Il est élargi comme suit :

Simply understanding Bézier curves.

Simply understanding Bézier curves.

Remplacez t=0,1 pour obtenir :

Simply understanding Bézier curves.

Représentation paramétrique de la courbe

Ici cite directement un article d'un internaute (lien)

Simply understanding Bézier curves.

Concentrons-nous sur la formule ci-dessus.

Comme le montre la figure ci-dessus, la droite que nous connaissons peut être comprise sous un autre angle : en utilisant t (c'est-à-dire la longueur de |AP| du point P au point connu (x0,y0)), alors le point P peut être déterminé grâce aux fonctions trigonométriques ci-dessus.

Plus généralement, on peut l'écrire ainsi :

Simply understanding Bézier curves.

Ici, P0 est le vecteur [x0,y0] et v est aussi un vecteur. Une fois additionnés, P(t) est le vecteur [x, y].

En regardant à nouveau le cercle :

Simply understanding Bézier curves.

Comme le montre le diagramme, le cercle peut être considéré comme ayant un centre connu, tout point du cercle étant déterminé par l'angle de rotation et le rayon. Il peut également s'écrire :

Simply understanding Bézier curves.

Les équations paramétriques maintiennent l'invariance géométrique et peuvent représenter des formes comme des cercles (où un x correspond à plusieurs valeurs y).

De Casteljau

L'algorithme De Casteljau est une méthode utilisée dans des applications pratiques pour évaluer et approximer les courbes de Bézier pour le dessin et d'autres opérations. Par rapport à la précédente méthode d'évaluation basée sur la définition, elle est plus rapide et plus stable, et plus proche des caractéristiques des courbes de Bézier.

Ici, nous faisons référence à deux articles : lien1 et lien2

Tout d'abord, on définit ce qui suit :

Simply understanding Bézier curves.

Regardez le β ci-dessus. C'est un peu déroutant avec les exposants et les indices ; vous pouvez utiliser la récursion triangulaire suivante pour comprendre :

Simply understanding Bézier curves.

Les bords rouges du triangle dans la figure ci-dessus sont les points de contrôle des deux segments divisés par t0. Pour mieux comprendre t0, P(t0) (c'est-à-dire, β0(n)beta_0^{(n)} β 0(n) ), les points de contrôle des deux courbes, vous pouvez vous référer à la figure suivante :

Simply understanding Bézier curves.

La figure ci-dessus montre les relations entre différents points lorsque t=0,5.

Du point de vue de « l'interpolation », le processus de calcul peut également être compris comme :

  1. Trouver les milieux de chaque paire de points de contrôle adjacents (car t=0,5), c'est-à-dire b01, b11, b21 (veuillez pardonner ma notation ; écrire en LaTeX est trop compliqué)
  2. Trouvez le milieu b02 sur b01−b11, et trouvez le milieu b12 sur b11-b21
  3. Trouver le milieu b03 sur b02−b12 ​ En fait, l'essence de l'algorithme de De Casteljau est l'interpolation et l'itération.

Dessin de courbe basé sur De Casteljau

Actuellement, deux méthodes sont observées.

Une méthode consiste à parcourir t de 0 à 1 avec de petits incréments (c'est-à-dire 0,01). Chaque fois que P(t) est recherché, une formule récursive est utilisée pour déterminer β0(n)beta_0^{(n)} β 0(n) .

L'autre méthode consiste à rechercher P(t=0,5), puis pour les deux courbes divisées, on recherche respectivement P(t=0,5)... Cette subdivision continue jusqu'à ce que la courbe soit approximée.

Mise en œuvre

Cela semble toujours irréel de simplement regarder sans s'entraîner.

J'ai donc écrit mon propre code d'implémentation pour le dessin de courbes et je l'ai organisé dans une boîte à outils : la boîte à outils de Compilelife

Le code de base correspondant est ici

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn