Design web & mobile

Race Simulator

Etude de cas — Data Play

Le data play est un workshop de 4 jours qui vise à récupérer des données pour ensuite les traiter et les traduire d’une façon plus ludique et visuelle.

I. Choix des données
Pour cette phase de recherche, nous étions 4: Alexandre Beckman, Benjamin Bours, Long Chen, Mathieu Ferraris.

C’est durant le 1er jour qu’on sait mis d’accord sur les données à traiter.

En vue de l’EURO 2016, nous nous sommes dirigés vers le thème du football mais malheureusement, la plus part des bases de données sur les joueurs ou les matchs sont payantes: étant donné qu’il est possible de parier sur les statistiques de football.
C’est pourquoi nous avons quitté cette piste et avons cherché ailleurs. Nous avons donc basculé vers le thème des courses et plus précisément sur courses de Formule 1.
Ce thème comparé au football nous ouvre plus de possibilité en terme d’animation et de traitement de donnée et comme nous possédons que de 4 jours, le choix fût unanime.

II. Récupérer les données
En ce qui concernent les données sur les courses de F1, nous avons eu la chance comparé au thème du foot d’avoir une base de donnée extrêmement complète (http://ergast.com/mrd/).
Néanmoins un gros soucis persiste, la base de donnée hébergée par ce site n’était pas stable: l’hébergement a crashé 2–3 fois. C’est pourquoi nous avons douté à poursuivre ce thème, nous tentons tout de même de entrer en communication avec l’admin du site:

et ce fût gratifiant car nous obtenons une réponse de sa part:

Nous avons donc à présent accès à toute sa base de donnée, ce qui nous arrange car nous sommes parvenu à récupérer les fichiers .json qui nous intéressaient et par prévention, nous avons donc hébergé ces fichiers sur notre propre espace d’hébergement pour éviter des problèmes avenir.

III. Traduire les données brutes en données visuelles.
C’est durant cette phase que nous travaillerons désormais seul. Pour les délivrables de ce projet scolaire, nous devons à nous seul proposer une interprétation visuelle personnelle de ses données.

Je suis parti vers une simulation de la course qui a eu lieu en Australie en 2016 sur la piste Albert Park.
J’ai trouvé cela intéressant et ludique de voir une course autrement que le format actuel que propose la plus part des chaines de diffusion.

J’ai notamment voulu utiliser une technique apprise durant ma scolarité, c’est celle de l’animation en SVG d’un tracé combinée au langage de programmation javascript.

IV. Recherche graphique

Je me inspiré de l’univers Tron et de son style graphique car je trouvais l’idée amusante de transposer cela à une vraie piste de course.

Mais en regardant mon visuel actuel, il me vient à l’idée de me rapprocher vers une représentation qui ressemble plus à un atome .

 

Je trouvais cela beaucoup plus pertinent et parlant, car en terme scientifique, un atome est quelque chose de mouvementé.

Si je me rappel bien de mes cours de secondaire.

D’ailleurs les pointillés rappellent le sentiment du chronomètre et du temps qui défile d’où la sensation de vitesse et de course.

V. Simuler la course
C’est à ce moment là où je vais commencer à réaliser le projet, à l’aide du html/css et du javascript, je vais parvenir à reconstruire et à animer ce data play.

Un gros problème survient durant la programmation de mon projet, ayant voulu utiliser la technique d’animation en SVG d’un tracé, je me suis rendu compte que dans mon cas, il n’était pas possible: il faut savoir que pour animer un tracé, on joue sur les tracés d’une forme et de l’espacement des tirets (dasharray). Dans mon cas, étant donné que j’ai appliqué une bordure qui nécessite déjà un espacement des tirets je n’étais pas capable d’utiliser cette technique pour mes tracés.

Ma solution ? j’ai tout simplement placé un tracé en superposition avec le tracé impossible à animer et j’ai appliqué à ce tracé superposé une bordure plus épaisse et sans espacement de tiret avec la couleur du background(border: 12px solid) pour ainsi cacher le tracé que je voulais animer.
Et à ce stade, il ne suffisait plus d’animer le tracé impossible à animer, mais animer le tracé superposé pour qu’ainsi à la fin il laisse découvrir le tracé caché derrière.

Dans ce cas-ci ,j’ai appliqué au tracés la couleur rouge pour que vous puissiez mieux discerner la technique j’ai employé.

Les données que j’ai utilisé sont les suivantes:
-Le lap time de chaque pilote (temps effectué durant un tour)
-Le nom des pilotes
-Le nom de la course
-Le circuit de la course

Ainsi pour animer les tracés, je me suis basé sur le temps effectué par chaque pilote mais un problème surgit, étant donné que la durée effectuée par chaque pilote est très peu notable, j’ai du converti leur temps en milli seconde pour creuser l’écart entre les pilotes pour ainsi distinguer une différence: plus on zoom sur les détails, plus la différence sera grande.

Et donc: La progression des bars s’animent avec un timing qui varient en fonction du temps en milli secondes effectué par chaque pilote.

Pour résumer, ce data play est une sorte de simulation au ralenti en terme du temps effectué par chaque pilote mais avec un timing de la course en accéléré.

Merci de m’avoir lu voici le lien du projet en question:http://longchen.be/projets/dataplay/

     Projet au hasard