Données d'entraînement en 3D

Résumé

Pendant mes tours autour du village, j'ai eu l'idée d'utiliser ThreeJS pour créer une représentation 3D dynamique de mes données d'entraînement. Lis la suite pour voir ce que j'ai fait : c'est encore en chantier, mais c'est une exploration passionnante du concept.

Texte intégral

J'explore des moyens de visualiser les données d'entraînement avec des technologies web compatibles avec tous les appareils, pour Gran Fondo, mon appli de course à pied et de cyclisme. ThreeJS, un outil de rendu 3D pour navigateurs, fonctionne aussi bien sur les grands écrans que sur les petits. J'utilise le format de données d'entraînement TCX parce qu'il se prête bien à l'analyse avec les technologies standard du navigateur et du web. Pour ce projet, j'ai repris une séance enregistrée lors de ma sortie du 9 mars : ma boucle habituelle de 1.8KM autour du village, répétée 6 fois à l'identique (11KM au total). J'aime ce parcours : peu de circulation et de dérangements, ce qui me laisse me concentrer sur la course. J'ai collecté les données TCX avec l'appli RunnerUp ; elle fait le boulot, mais son look a un peu vieilli et elle manque d'analyse interactive et d'exploration des données d'entraînement.

Comme preuve de concept pour explorer la présentation en 3D, j'ai construit un prototype qui charge le fichier TCX contenant les données d'entraînement. Le navigateur analyse ces données et génère deux visualisations : un rendu 3D avec ThreeJS et un graphique linéaire 2D de l'allure. La couleur représente la vitesse : plus la ligne est verte, plus l'allure est rapide. La visualisation 3D tourne comme un disque vinyle et révèle mes six tours autour du village, avec une forme qui épouse la carte. Pour relier les deux graphiques, j'ai ajouté un cercle blanc qui marque le même instant sur chacun, afin d'illustrer le lien entre les deux vues.

La visualisation est construite à 100 % avec des technologies web : ThreeJS pour afficher le tracé 3D de la course. Un second canvas HTML5 superpose un graphique 2D de l'allure, tandis qu'une boucle d'animation centralisée relie les deux scènes avec un point qui se déplace, pour synchroniser le parcours et le graphique. Cela fait partie d'une phase d'expérimentation en mode « je réfléchis à voix haute », où j'explore des manières innovantes de visualiser les données de fitness. C'est une démo pour ma future appli Gran Fondo, qui vise à améliorer le suivi interactif du fitness avec des visualisations riches et engageantes.

Découvre la visualisation sur ton propre ordinateur en ouvrant cette page : l'heure de la démo Attention, ce n'est pas une démo léchée, elle est « tout droit sortie de l'établi » et fonctionne surtout bien en orientation paysage. Les futures versions seront beaucoup plus soignées, pour que tous les éléments s'adaptent à un design responsive.

L'appli Gran Fondo inclura la fréquence cardiaque, la cadence et la puissance pour des analyses plus poussées. L'interactivité permettra de faire pivoter le graphique 3D au toucher et de zoomer sur les détails. Mon but est de rendre l'analyse d'entraînement plus immersive, intuitive et engageante pour les sportifs qui veulent une vue complète de leurs performances.

Conclusion

L'expérimentation est une partie essentielle de la conception de logiciels : elle permet de tester des idées, d'affiner des concepts et de recueillir les retours des autres. Cette visualisation 3D de l'entraînement en est un exemple. Il y a encore beaucoup à explorer. Reste à l'écoute de ce blog pour les prochaines nouvelles, pendant que je continue à développer Gran Fondo !