‍

User Journey

Der User kann sich durch die Website navigieren, die gleichzeitig als kleine Dokumentation dient. Dort sind die Daten visuell dargestellt und es wird beschrieben, wie das ganze funktioniert. Am Ende kann der User selbst per Drag and Drop das Tool benutzen, indem er eine eigenen .json hochlädt, die von P5.js dann bearbeitet wird.

‍

Umsetzung PC

Um die Tastenanschläge und Mauskoordinaten zu tracken, wurde WhatPulse (https://whatpulse.org/) genutzt. Diese erstellt eine Heatmap und fügt die Daten eine Datentabelle im .csv-Format. Diese Daten konnten wiederum in RawGraphs oder Charticulator eingefügt werden, um die Zahlen in ein Koordinatensystem darzustellen. Damit konnten die Mausbewegungen nachvollziehbarer gestaltet werden.

Als Aufnahmesoftware diente OBS. Mit einem Input Overlay kann man während dem Video sehen, wann welche Taste genutzt wird.

Umsetzung VR

Um dort den Bewegungsablauf tracken zu können wurden erstmals normal Videoaufnahmen von der spielenden Person gemacht. Das Video wurde dann mittels Machine Learning analysiert, indem wir OpenPifPaf nutzten. Dazu wurde testweise RunwayML (https://runwayml.com/) genutzt, schnell entschloss man sich allerdings, aufgrund einiger Probleme, die Workstation der Hochschule Hof zu nutzen. Dies verlief reibungsloser. Die Daten wurden dann in .json-Format ausgegeben. Diese wurde dann mittels P5.js (über openprocessing.org) verarbeitet und visualisiert. Somit konnte man die Gelenke und Punkte farbig darstellen, auf das Originalvideo verzichten und Bewegungen genauer nachvollziehbar machen.

Umsetzung Website

Die Website beinhaltet eine Kurzdokumentation, das Video und das Tool in P5.js mit Upload-Funktion.

Dazu wurde Wordpress genutzt. Das ganze wurde auf meinem Server installiert und optimiert, das Theme wurde individuell angepasst.

Mindmap

Erste Versuche mit RunwayML