HyperRooster

Datavisualisation interactive

Laurie Bartumville

Création de l’application

Pour la réalisation de la carte interactive d’HyperRooster, nous avons pensé à réaliser une animation SVG.

Recherche et design

Nous nous sommes référé à la carte existant de l’HyperLoopet avons réduit le nombre de villes pour avoir un nombre acceptable de possibilités tout en ayant une carte fournie.

Carte de l’HyperLoop et de l’HyperRooster

Le travail de vectorisation arrive. Tom a retracé toutes les lignes existant en fonction des villes que nous avions choisies d’intégrer au projet.
Dans un premier temps, nous avions comme objectif de faire partir tous les trajets de Paris, ville choisie pour notre mot “coq”.

C’est pourquoi, Tom a dessiné les tracés en fonction de cela pour avoir un fichier SVG propre à l’export pour l’intégrer dans notre HTLM. Une fois les lignes refaites, il a calculé la longueur de chaque trajet pour faciliter la mise en place des animations en Javascript.

Pendant ce temps, Bryan s’est occupé de comprendre et de faire fonctionner la reconnaissance vocale, Annyang, ce qui ne fut pas évident.
Après plusieurs testes non concluant, la première ligne SVG à avoir été affiché et animé correctement sur notre carte est le voyage “Paris — Berlin” sur le ligne rose.

Premier trajet opérationel

Une autre difficulté est vite apparue. Comment faire un changement de ligne sur une même animation? Grâce à la bonne préparation du fichier SVG, Bryan et Tom ont compris assez rapidement qu’il suffit d’appeler la bonne suite de tracés SVG et de les faire s’afficher aux bons moments.

Par la suite, nous avons réalisé une simulation de l’utilisation par d’autres utilisateurs partout dans le monde grâce à un script qui trace des trajets aléatoirement sur la carte. La base du travail était faite. Mais le code ne nous plaisait pas, il était trop brouillon. Nous avons alors décidé de le rendre plus propre et plus optimisé ainsi que de permettre les voyages partant d’une ville aléatoire vers une autre ville aléatoire, ce qui nous a donné du fil à retordre voir la complexité du nouveau script, sans compter les retouches sur Illustrator.

Le fichier est devenu deux fois plus lourd car nous avions besoin de deux tracés vectoriels pour relier 2 villes (un tracé aller, et un retour). Au final, cela rend l’expérience plus immersive et concrète.

Explication technique :

Pour le code. On a commencé par créer 2 maps (une map c’est un genre de tableau):

  • Une contient toutes les villes avec leurs coordonnées et leurs voisins.
  • L’autre contient tous les chemins possibles, ainsi que leur longueur (en millisecondes).

Ensuite on utilise la librairie “annyang!” qui permet d’utiliser un reconnaissance vocale. Quand “annyang!” détecte 2 noms de villes (par exemple “Vienne vers Bruxelles”), il lance une fonction qui crée un chemin.

En très simple, on utilise l’algorithme A*, un algorithme qui permet de trouver le chemin le plus court. Quand l’algorithme a trouvé un chemin, il reset toutes les variables et envoie le chemin dans la fonction qui va permettre de faire le lien entre le script et l’html, pour afficher les routes. Cette fonction affiche toutes les routes une par une, puis les efface 15 secondes plus tard.

On a également créé une fonction qui se répète toutes les 15 secondes, qui permet de choisir 2 villes au hasard, pour donner plus de vie à la carte, cela lance la même fonction que si un humain avait indiqué une route, voir au-dessus.

A chaque fois que notre fonction reçoit 2 noms de villes de “annyang!” ou de l’algorithme aléatoire, il vérifiera quelles sont correctes, puis les ajoutera à l’historique dans l’html, en gras si cela vient d’”annyang!”.

Merci de votre lecture.

Travail réalisé dans le cadre du cours de CREAAPP de DI STEFANO Olivier.

Réalisé par Bartumville Laurie, Romanzin Tom, Dechamps Antoine, Jennequin Bryan.

Remerciement à Lucas Jacquemin.

    Laurie Bartumville

    Written by

    Étudiante UX Design @dwmheaj

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade