Une visualisation née de la curiosité pour l’hélice sphérique

• Introduction au concept de représentation du déplacement d’un objet en 3D à l’aide de fonctions paramétriques
• Explication de la manière de construire mathématiquement des trajectoires de complexité croissante, du cercle à l’hélice, puis à la trajectoire d’hélice sphérique
• En définissant chaque axe de coordonnées (x, y, z) comme une fonction du temps, il devient possible d’implémenter des mouvements variés
• Dans le cas particulier de l’hélice sphérique, une trajectoire hélicoïdale en 3D est créée en multipliant des fonctions trigonométriques qui font varier le rayon
• Un exemple créatif qui montre que cette méthode permet de déplacer un objet selon une trajectoire arbitraire

---

Exploration du déplacement d’objets dans l’espace 3D

Cet article présente une exploration personnelle de différentes façons de déplacer un objet dans l’espace 3D, et en particulier de la manière de définir et d’implémenter mathématiquement une trajectoire d’hélice sphérique (spherical helix)

Bases de l’hélice et du déplacement en trois dimensions

• Une hélice désigne une structure tridimensionnelle qui s’enroule en tournant, comme un ressort

• Une hélice sphérique correspond à l’idée d’un parcours en spirale le long de la surface d’une sphère

• La position d’un objet dans l’espace 3D est déterminée par les coordonnées des trois axes x, y et z

  • axe x : déplacement gauche-droite
  • axe y : déplacement haut-bas
  • axe z : variation avant-arrière (profondeur)

• Si l’on définit la position d’un objet à l’aide de fonctions mathématiques en fonction du temps (t), on peut créer une trajectoire de déplacement

Fonctions paramétriques et exemples de trajectoires simples

• Exemple : si la position en x est définie par 10 * cos(πt/2), on obtient un mouvement oscillant en cosinus qui fait l’aller-retour entre -10 et 10 toutes les 2 secondes

• De la même façon, en définissant la position en y par 10 * cos(πt/2), on peut aussi produire un mouvement de va-et-vient vertical

• Si l’on utilise des fonctions différentes pour x et y (par exemple x = 10 * cos(πt/2), y = 10 * sin(πt/2)), on obtient des mouvements déphasés, et leur combinaison crée une trajectoire circulaire

• En multipliant la fonction par un terme proportionnel au temps (par exemple x = 0.03 * t * cos(πt/2)), on peut créer un motif dont le rayon augmente progressivement, autrement dit une trajectoire en spirale (spiral)

Créer une trajectoire d’hélice sphérique (spherical helix)

• Contrairement à une spirale plane classique, une hélice sphérique nécessite une trajectoire en 3D

  • pour z, on peut utiliser une expression comme 10 * cos(0.02 * πt) afin de faire varier progressivement la position avant-arrière

• Pour x et y, l’utilisation d’un produit de fonctions trigonométriques comme sin(0.02 * πt) permet d’obtenir un effet où le rayon est maximal au milieu et plus petit aux deux extrémités

• En appliquant ce produit à la fois à x et à y, il devient possible de créer une trajectoire qui effectue un mouvement circulaire tout en suivant une hélice à la surface de la sphère, donc en trois dimensions

• Cette combinaison de fonctions permet d’aboutir à une implémentation mathématique complète d’une trajectoire d’hélice sphérique

Résumé et usages

• Toute trajectoire 3D peut être construite en définissant x, y et z comme des fonctions paramétriques du temps
• Cela signifie qu’il est possible de spécifier mathématiquement aussi bien un cercle ou une spirale simples que des trajectoires complexes
• Cette approche permet de comprendre visuellement que même des mouvements complexes ne relèvent pas du chaos, mais correspondent en réalité à des trajectoires mathématiques clairement définies

---

visualrambling.space est un projet personnel de Damar, où il apprend des sujets variés et les raconte de manière visuelle

[GN⁺]

Commentaire Hacker News

• À l’époque de la navigation maritime, ce type de courbe (ligne de rhumb, loxodromie) était très important.
  Il est en effet bien plus facile de conserver un même cap pendant la navigation.
  Les marins essayaient donc de suivre autant que possible ce type de trajectoire.
  C’est de là que vient le concept de ligne de rhumb.
  Voir l’article Wikipédia sur la rhumb line.
  La projection de Mercator facilitait le calcul de ces caps.
  Voir l’article Wikipédia sur la projection de Mercator.
  Tout ce cadre a continué à produire de nouvelles découvertes mathématiques.
  Par exemple, en projection polaire, cela devient une spirale logarithmique.
  Vu de côté, cela devient un paquet d’ondes (wave packet).
  Son intérêt mathématique est tel que même Paul Erdös s’y est attaqué.
  Article de référence : Spiraling the Earth with C. G. J. Jacobi. Paul Erdös
  Petite parenthèse : on dirait qu’aujourd’hui, c’est la journée de la géométrie sphérique sur Hacker News.
  Liens vers des discussions connexes :
  1
  2
  3

  • Mais la courbe en spirale montrée dans l’OP (message d’origine) n’est pas une ligne de rhumb (loxodromie, rhumb line).
    La courbe a un espacement régulier sur la surface, alors qu’une ligne de rhumb, par définition, coupe toujours les méridiens avec le même angle ; elle devient donc plus dense à l’approche des pôles.
    En termes de formule :
    x = 10 · cos(π·t/2) · sin(0.02·π·t)
    y = 10 · sin(π·t/2) · sin(0.02·π·t)
    z = 10 · cos(0.02·π·t)
    Si on convertit cela en coordonnées sphériques (R=10) :
    λ(t) = π/2 · t (longitude)
    φ(t) = π/2 - 0.02·π·t (latitude)
    En dérivant, on obtient d(λ)/d(φ) = -25 (valeur constante).
    Pour une vraie ligne de rhumb, d(λ)/d(φ) a la forme tan(α) · sec(φ), donc varie selon la latitude.
    Autrement dit, cette courbe n’est pas une ligne de rhumb.
    Si vous êtes curieux de voir une courbe dont l’angle d’intersection varie, je recommande cette visualisation.

• Ça m’a donné envie de présenter un projet amusant autour de la sphère que j’avais réalisé en 2022.
  Projet spheredisksample
  Je pense que c’est exactement le genre de projet dans l’air du temps aujourd’hui.
  Je recommande aussi le projet sphere-resample, qui pourrait plaire à pas mal de monde.

• Il peut aussi être utile de consulter ce post, où l’on trouve une discussion liée aux rhumb lines et sujets proches.

• Je trouve la visualisation vraiment superbe.
  Un point supplémentaire que j’espérais voir abordé concernait la question : « peut-on se déplacer à vitesse constante ? »
  Si le but est simplement de placer des points le long du trajet, peu importe, mais quand on regarde le mouvement réel, on voit qu’il est beaucoup plus lent au début et à la fin (presque entièrement déterminé par le rayon).
  Si l’on voulait se déplacer à vitesse constante, voire appliquer une fonction d’easing pour ralentir puis accélérer, je me demande quelle méthode utiliser.
  J’imagine qu’il existe une astuce mathématique élégante.
  J’ai vaguement l’idée qu’il faudrait dériver la formule pour obtenir une fonction vitesse, traiter dx, dy, dz avec le théorème de Pythagore, puis reparamétrer avec l’inverse de cette fonction de vitesse pour obtenir t'.
  Mais je ne suis pas assez à l’aise en maths pour aller plus loin, donc j’ai un peu l’impression de parler dans le vide.

  • Pour se déplacer à vitesse constante, il faut une « paramétrisation euclidienne ».
    Autrement dit, la valeur de t doit être ajustée pour être proportionnelle à la distance euclidienne parcourue.
    C’est un concept toujours nécessaire quand on anime un mouvement le long d’une trajectoire.
    Mais dans la plupart des cas, il n’existe pas de solution sous forme fermée (closed-form solution), donc il faut le résoudre numériquement.
    En pratique, pour chaque t, on cherche le dt correspondant à la distance voulue (ds) avec une recherche binaire ou une recherche par interpolation (interpolation search), par exemple.
    Une approche pratique consiste ensuite à stocker le résultat pour fabriquer une polyligne de points à intervalles réguliers (tant que la courbe ne change pas continuellement avec le temps).

  • L’astuce mathématique mentionnée dans la question est précisément la « paramétrisation par longueur d’arc » (arc length parameterization).
    Cela consiste à composer avec l’inverse de la fonction de longueur d’arc de la courbe.
    À l’exception de quelques familles de courbes bien particulières, on n’a généralement pas de forme fermée, donc on procède par calcul numérique.

  • L’intuition selon laquelle il faut faire évoluer t plus lentement est juste.
    La vitesse angulaire reste constante selon t, mais le rayon varie lui aussi avec t.
    C’est une sorte de spirale d’Archimède.
    Si on reparamètre de façon à rendre la norme de la vitesse constante, on obtient un déplacement plus uniforme.
    Cela dit, comme le rayon part de 0, il faut de toute façon traiter la valeur limite d’une manière ou d’une autre.
    Si, par exemple dans un jeu, il s’agit simplement de suivre une trajectoire, une simplification pratique consiste à viser la trajectoire et sa tangente par rapport à l’axe Z, puis à faire glisser l’objet avec une contrainte de vitesse itérative, un peu comme un jouet à perles.

• À propos du passage disant : « … en réalité, ce n’est pas chaotique. C’est simplement une trajectoire définie par une fonction mathématique »,
  je ne sais pas si la fonction proposée montre effectivement un comportement chaotique, mais la notion même de chaos désigne justement un phénomène qui apparaît dans des fonctions mathématiques déterministes, avec une sensibilité extrême aux conditions initiales.
  L’auteur a sans doute choisi le mot « chaotique » là où il voulait plutôt dire « aléatoire » ou « non déterministe ».

  • Je pense que ce type de précision technique est très important.
    Pour les lecteurs de Hacker News, ce genre de distinction est intéressant — ou devrait l’être.
    En mathématiques, le chaos désigne un système déterministe extrêmement sensible aux conditions initiales.
    Le résultat peut sembler aléatoire, mais conceptuellement, c’est tout à fait différent de l’aléa (randomness).

  • Je suis d’accord sur le fait que le terme chaos désigne bien une propriété qui apparaît dans des fonctions mathématiques déterministes.
    Mais dans son sens courant, le mot peut aussi vouloir dire « désordre et confusion complets », « état dominé par le hasard » ou encore « imprévisibilité des systèmes naturels complexes ».
    Pour s’adapter aux attentes et aux habitudes de langage des lecteurs ordinaires, il peut être tout à fait pertinent d’employer une formulation plus facile à comprendre plutôt qu’une rigueur strictement mathématique.

• Un retour que je ferais : sur mobile, la navigation ne s’est pas comportée comme je m’y attendais.
  Ne sachant pas comment interagir, j’ai essayé de faire défiler la page.
  Comme toucher l’écran faisait passer à la page suivante, je me suis dit : « ah, d’accord ».
  J’ai appuyé à droite pour avancer, puis plus tard, quand j’ai cliqué de nouveau, j’ai appuyé à gauche pour essayer de revenir en arrière — mais j’ai finalement sauté deux pages.
  Du coup, j’ai raté quelques écrans, ce qui est un peu dommage.
  Ce n’est pas un gros problème, mais une petite indication supplémentaire aurait réduit la confusion et permis de mieux se concentrer.

  • Il y a des instructions d’utilisation sur la première diapositive.
    Cela dit, ajouter aussi le geste de swipe pourrait être une bonne idée en complément (personnellement, je préfère l’interaction par tap).
    Si l’objectif est de rappeler l’interface en « pile de cartes » des applications de réseaux sociaux, le swipe semblerait aussi assez naturel.

• Le contenu reste d’un niveau introductif assez basique, donc cela semble bien adapté pour des enfants qui apprennent les mathématiques.
  Ça aurait peut-être été encore mieux de mentionner au passage des notions comme la formule du cercle (x = r cos t, y = r sin t).
  Parmi les bons sujets pour prolonger, il y a les coordonnées polaires et l’algèbre linéaire (vecteurs, transformations, transformations en espace 3D, etc.).
  Si l’auteur n’est pas encore à l’aise avec ces thèmes, je recommande les vidéos YouTube de 3blue1brown.
  Du point de vue d’un programmeur, il manque aussi la partie code, bibliothèques ou manipulation d’objets 3D réels (sommets, déformations, etc.), donc ce serait encore mieux si cela allait jusque-là.

• Je me suis demandé ce qu’il en était de la « justesse » du déplacement selon l’axe Z dans une hélice sphérique.
  On peut faire un déplacement simple avec différentes fonctions comme z = c * t, ce qui change l’épaisseur, la cohérence ou l’uniformité des « pelures » (peels).
  La fonction utilisée ici est visuellement très réussie, mais je me demande quel objectif il faudrait viser si l’on raisonne en termes de régularité de l’écart entre les spirales, ou de découpage uniforme de la surface, par exemple.
  Je me demande comment cette fonction a été choisie, ou si elle l’a simplement été parce qu’elle rendait bien visuellement.

  • À mon avis, cette fonction a probablement été choisie simplement parce qu’elle est pratique à programmer et agréable à regarder.
    La façon vraiment « correcte » serait sans doute de faire en sorte que le point se déplace à vitesse constante dans l’espace 3D (par exemple, comme un navire se déplaçant réellement à la surface de la Terre).
    Dans ce cas, on aurait une formule du type (voir l’exemple de code) :
    const degrees = Math.PI / 180
    const bearing = 5 * degrees
    const k = Math.tan(bearing)
    const v = 0.001
    const phi = (t) => vt/Math.sqrt(1 + kk)
    const theta = (t) => k*Math.ln(Math.tan(phi(t)/2))
    Conversion ensuite en coordonnées x, y, z :
    const x = (t) => Math.sin(phi(t)) * Math.cos(theta(t))
    const y = (t) => Math.sin(phi(t)) * Math.sin(theta(t))
    const z = (t) => Math.cos(phi(t))
    En pratique, il faut vraiment aller jusqu’au logarithme de tan(phi/2), et cela vient de la résolution d’une équation différentielle.
    J’ai l’impression que l’auteur n’est probablement pas allé jusqu’à ce niveau de complexité (ln(tan(phi/2))).

  • Le point clé est de rendre la vitesse constante (constant velocity) le long du trajet.
    On peut partir de la dérivée pour imposer une vitesse constante, puis résoudre par rapport à z, ou bien reparamétrer en t’.
    Choisir z = c * t influe à la fois sur la paramétrisation de la trajectoire et sur la trajectoire elle-même.

• L’animation est remarquablement fluide.
  J’ai récemment eu à travailler sur le problème de la répartition de N points sur une sphère, et c’est là que j’ai découvert un algorithme simple appelé « fibonacci-sphere ».
  Cette méthode aussi utilise une spirale sur la sphère pour placer les points.
  Article associé : PDF sur fibonacci-sphere

• Je suis surpris qu’Acko.net n’ait pas encore été mentionné.
  On y trouve un excellent billet de blog qui utilise des outils similaires pour expliquer visuellement les nombres complexes et les fractales, en particulier la fractale de Julia.
  Je le recommande vivement à toute personne intéressée.
  How to fold a julia fractal - blog Acko.net

• On peut manipuler directement l’équation de cette courbe dans Desmos 3D.
  Lien vers la visualisation Desmos 3D
  Il est aussi intéressant de noter que l’équation paramétrique de cette spirale est linéaire en coordonnées sphériques.
  Voir Wikipédia sur les transformations de coordonnées.

• Merci du partage, c’était vraiment passionnant à lire.