Maison >interface Web >js tutoriel >Comprendre simplement les courbes de Bézier.
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.
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.
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 :
(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=0n est le symbole de sommation, indiquant que la partie suivante ( Bi,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 :
Remplacez t=0,1 pour obtenir :
Ici cite directement un article d'un internaute (lien)
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 :
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 :
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 :
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).
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 :
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 :
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) ), les points de contrôle des deux courbes, vous pouvez vous référer à la figure suivante :
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 :
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) .
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.
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!