STIC:STIC III (2018)/Physicalisation de statistiques au hockey sur glace
| Physicalisation de données | |
|---|---|
| Module: STIC:STIC III (2018)/Projets | |
| ⚐ brouillon | ☸ débutant |
| ⚒ 2019/08/31 | |
Description du projet
Ce projet créé dans le cadre du cours STIC III a pour but de proposer des visualisations évocatrices des statistiques de hockey sur glace. Elle se reposera sur un parser XML écrit en php, qui produira une heatmap qui sera déclinée sur divers supports.
Ce projet est en construction est sera terminé d'ici fin août 2019.
Objectifs
Il y a plusieurs objectifs dans ce projet.
- En premier lieu il faudra récupérer les données saisies sous un format utilisable par l'ordinateur (actuellement elles sont sous une forme visuelle).
- Dans un deuxième temps il faudra développer un algorithme d'interprétation des données.
- Ensuite il faudra développer un algorithme permettant de produire des objets tangibles à partir de ces données.
Projet 1 - Heatmap en 3D des tirs cadrés
Dans ce projet je vais imprimer en 3D une réplique de patinoire dont la topographie indiquera l'emplacement et la quantité de tirs cadrés.
Les données statistiques sont exportées au format XML. Le fichier obtenu ressemble à ce qui suit.
<GAMEACTION>
<TEAM>Flaming Eagles HC</TEAM>
<TIME>3756</TIME>
<TYPE>SHOT</TYPE>
<DETAIL>SOG</DETAIL>
<SS>5-5</SS>
<SCORER>24</SCORER>
<PLUS1>3</PLUS1>
<PLUS2>11</PLUS2>
<PLUS3>16</PLUS3>
<PLUS4>25</PLUS4>
<PLUS5>24</PLUS5>
<PLUS6>14</PLUS6>
<GK>14</GK>
<GK_OPPONENT>149</GK_OPPONENT>
<DATETIME>1541271623</DATETIME>
<PERIOD>1</PERIOD>
<POSITION_X>4.691489</POSITION_X>
<POSITION_Y>20.90425</POSITION_Y>
<POSITION>L-POINT</POSITION>
<ZONE>OFFENSIVE</ZONE>
</GAMEACTION>
Pour réaliser ma heatmap je vais avoir besoin des éléments suivants :
- <DETAIL> pour identifier si il s'agi d'un tir cadré
- <POSITION_X> et <POSITION_Y> pour pouvoir y situer sur la surface de jeu.
Il y a là un premier problème, je ne sais pas à quoi correspondent ces valeurs. Où se trouve le 0 ? Quel est le maximum ? Après avoir placé des données dans les coins de la patinoire j'ai pu déterminer que les positions vont de 0 à 30 sur l'axe des X (petit côté de la patinoire) et de 0 à 60 pour l'axe des Y (long côté). C'est assez logique puisque une patinoire européenne fait 30m*60m.
L'algorithme que je vais mettre en place devra donc extraire les positions X et Y de tous les tirs cadrés (SOG).
Démarche
La première étape est la collecte de données, ces données ayant déjà été collectées je peux passer à l'étape suivante qui consiste à extraire les données pertinentes. Pour ce faire je vais coder un algorithme utilisant XPath qui me permettra de cibler les GAMEACTION correspondant à un tir cadré, puis à en récupérer la position.
Description de l'algorithme d'analyse syntaxique (parsing)
- Scanner le dossier dans lequel se trouve les fichiers XML, placer leurs noms dans un array et les passer au parser.
- Repérer tous les tirs cadrés d'une équipe dans le XML avec XPath et les placer dans un array (ces paramètres seront des arguments, utile si on veut travailler sur d'autres équipes ou d'autres actions de jeu).
- L'array créé par SimpleXML contient des objets, il faut donc récupérer les valeurs contenues dans les objets les arrondir et les push dans un autre array.
- Ensuite on crée un tableau (multidimensional array) que l'on rempli de 0.
- Pour remplir les case correspondantes à chaque tir on récupère chaque paire de coordonnées (un x et un y), et ensuite on incrémente la case du tableau correspondant.
- On répète l'opération pour tous les fichiers présents dans le dossier.
- On exporte le tableau dans le dossier de travail.
Code du parser
Le code s'exécute en ligne de commande mais on pourrait imaginer lui donner une interface utilisateur dans le navigateur. L'avantage de l'exécution en ligne de commande est de s'affranchir de la durée d'exécution maximale. On peut augmenter cette valeur en modifiant php.ini cependant cela ne devrait pas être nécessaire.
// on défini la taille de la matrice
define('MATRIX_COLS', 30);
define('MATRIX_ROWS', 60);
define('XPATH_BASE', "/GAMEEXPORT/GAMEACTIONS/GAMEACTION[TEAM='Genève-Servette HC'][DETAIL='SOG']");
// on crée une matrice remplie de 0
function createEmptyMatrix($cols, $rows) {
return array_fill(0, $rows, array_fill(0, $cols, 0));
}
// analyse syntaxique du fichier xml,
// facultativement on peut passer une matrice préremplie.
function parseFile($file, $matrix = []) {
if (empty($matrix)) {
// on rempli la matrice de 0 (initialisation)
$matrix = createEmptyMatrix(MATRIX_COLS, MATRIX_ROWS);
}
var_dump($matrix);
// on charge le fichier xml
$xml = simplexml_load_file($file);
// on extrait les coordonnées
$x_nodes = $xml->xpath(XPATH_BASE . "/POSITION_X");
$y_nodes = $xml->xpath(XPATH_BASE . "/POSITION_Y");
// pour chaque x
foreach ($x_nodes as $key => $node) {
// on arrondi afin d'avoir des entiers
$x = round((string) $node);
$y = round((string) $y_nodes[$key]);
// on rempli la matrice
$matrix[$y][$x]++;
}
return $matrix;
}
// on liste et on parse tous les fichiers XML dans le dossier spécifié (non récursif)
function parseDirectory($directory) {
// récupérer tous les fichiers du dossier en évitant les dot-alias
$files = array_diff(scandir($directory), array('..', '.'));
// paramétrer la matrice globale
$matrix = [];
// pour chaque fichier dans le dossier
foreach ($files as $file) {
// récupérer l'extension (en forçant la casse minuscule)
$info = pathinfo($file);
$ext = strtolower($info['extension']);
// saut des fichiers non XML
if ($ext !== 'xml') {
continue;
}
// parsing des fichiers et on pass la matrice globale avec
$matrix = parseFile($directory . DIRECTORY_SEPARATOR . $file, $matrix);
}
return $matrix;
}
// convertir la matrice en fichier de heatmap
function toHeatMapFile($path, $matrix) {
$data = "";
foreach ($matrix as $y => $row) {
$data .= implode(" ", $row) . "\n";
}
file_put_contents($path, $data);
}