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

Comprendre simplement les courbes de Bézier.

Aug 16, 2024 am 11:04 AM

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 de ce site Web
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

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Remplacer les caractères de chaîne en javascript Remplacer les caractères de chaîne en javascript Mar 11, 2025 am 12:07 AM

Remplacer les caractères de chaîne en javascript

jQuery Vérifiez si la date est valide jQuery Vérifiez si la date est valide Mar 01, 2025 am 08:51 AM

jQuery Vérifiez si la date est valide

jQuery obtient un rembourrage / marge d'élément jQuery obtient un rembourrage / marge d'élément Mar 01, 2025 am 08:53 AM

jQuery obtient un rembourrage / marge d'élément

10 onglets jQuery Accordion 10 onglets jQuery Accordion Mar 01, 2025 am 01:34 AM

10 onglets jQuery Accordion

10 vaut la peine de vérifier les plugins jQuery 10 vaut la peine de vérifier les plugins jQuery Mar 01, 2025 am 01:29 AM

10 vaut la peine de vérifier les plugins jQuery

Http débogage avec le nœud et le http-console Http débogage avec le nœud et le http-console Mar 01, 2025 am 01:37 AM

Http débogage avec le nœud et le http-console

Tutoriel de configuration de l'API de recherche Google personnalisé Tutoriel de configuration de l'API de recherche Google personnalisé Mar 04, 2025 am 01:06 AM

Tutoriel de configuration de l'API de recherche Google personnalisé

jQuery Ajouter une barre de défilement à div jQuery Ajouter une barre de défilement à div Mar 01, 2025 am 01:30 AM

jQuery Ajouter une barre de défilement à div

See all articles