Scrittura · 10 mar 2025
Dati di allenamento in 3D
Esplorare la grafica 3D sul web per i dati fitness
Mentre correvo i miei giri intorno al paese, mi è venuto in mente che potevo usare ThreeJS per creare una rappresentazione 3D dinamica dei miei dati di allenamento. Leggi cosa ho costruito: è un work in progress, ma è un'esplorazione entusiasmante del concetto.
Sto esplorando modi per visualizzare i dati di allenamento, usando tecnologie web per la compatibilità tra dispositivi, per Gran Fondo, la mia app di corsa e ciclismo. ThreeJS, uno strumento di rendering 3D per i browser, funziona senza problemi sia su schermi grandi che piccoli. Uso il formato TCX per i dati di allenamento perché si presta bene a essere letto con le tecnologie standard del browser e del web. Per questo progetto ho preso una sessione registrata della mia corsa del 9 marzo: il mio solito giro di 1,8KM intorno al paese, ripetuto 6 volte identiche (11KM in tutto). Mi piace questo percorso: poco traffico e poche distrazioni, così posso concentrarmi sulla corsa. Ho raccolto i dati TCX con l'app RunnerUp; fa il suo lavoro ma sembra un po' datata e non permette di analizzare ed esplorare i dati in modo interattivo.
Come prova di concetto per esplorare la presentazione in 3D, ho costruito un prototipo che carica il file TCX con i dati dell'allenamento. Il browser li legge e genera due visualizzazioni: un rendering 3D con ThreeJS e un grafico lineare 2D del ritmo. Il colore rappresenta la velocità: più la linea è verde, più il ritmo è veloce. La visualizzazione 3D ruota come un disco in vinile e mostra i miei sei giri intorno al paese, con una forma che corrisponde alla mappa. Per collegare i due grafici ho aggiunto un cerchio bianco che segna lo stesso istante in entrambi, per far capire il legame tra le due viste.
La visualizzazione è fatta al 100% con tecnologie web: ThreeJS disegna il percorso 3D della corsa, un secondo canvas HTML5 sovrappone un grafico 2D del ritmo e un unico ciclo di animazione unisce le due scene con un punto che scorre, tenendo sincronizzati percorso e grafico. Fa parte di una fase di sperimentazione in cui "penso ad alta voce", cercando modi innovativi per visualizzare i dati fitness. È una demo per la mia prossima app Gran Fondo, che punta a migliorare il tracciamento interattivo dell'attività fisica con visualizzazioni ricche e coinvolgenti.
Guarda la visualizzazione sul tuo computer aprendo questa pagina: demo Tieni presente che non è una demo rifinita, è "appena uscita dal banco di lavoro" e funziona bene soprattutto con la finestra in orizzontale. Le versioni future saranno molto più curate, con tutti gli elementi adattati a un design responsive.
L'app Gran Fondo includerà frequenza cardiaca, cadenza e potenza per analisi più approfondite. L'interattività permetterà di ruotare il grafico 3D con il tocco e di ingrandire i dettagli. Il mio obiettivo è rendere l'analisi dell'allenamento più immersiva, intuitiva e coinvolgente per gli atleti che vogliono una visione completa delle proprie prestazioni.
Conclusione
La sperimentazione è una parte fondamentale della progettazione del software: ti permette di provare idee, affinare concetti e raccogliere il parere degli altri. Questa visualizzazione 3D dell'allenamento ne è un esempio. C'è ancora molto da esplorare. Resta sintonizzato su questo blog per i prossimi aggiornamenti mentre continuo a sviluppare Gran Fondo!