Rollkunstlauf ist eine präzise und zugleich wenig bekannte Sportart mit komplexen Bewegungsabläufen. Für dieses Projekt wurden eigene Videoaufnahmen analysiert und in verschiedene Bewegungsvisualisierungen übersetzt. Durch die Freistellung der Läuferin, die Überlagerung einzelner Videoframes und die Unterteilung der Figuren in Bewegungsphasen entstanden grafische Darstellungen. Diese bilden die Grundlage einer interaktiven Anwendung zur Erkundung von Sprüngen und Pirouetten. So werden Bewegungen verständlicher und auf neue Weise erfahrbar. Artistic roller skating is a precise yet little-known sport with complex movement sequences. For this project, original video recordings were analyzed and transformed into different movement visualizations. By isolating the skater, overlaying individual video frames, and dividing jumps and spins into movement phases, graphical representations were created. These form the basis of an interactive application for exploring movement in detail. The result offers a new way to understand and experience artistic roller skating.
01. Filmische Dokumentation
02. Bilder der Umsetzung / Ausstellung
Bilder der Umsetzung
Ausstellung
03. Pitch Deck
04. Userjourney / Userflow
05. Link zur Webanwendung
Es könnten Fehler bei den Videos auftreten, sodass sie nicht mehr transparent sind bei manchen Webbrowsern.
––––– DESIGN PROZESS –––––
Umsetzung der letzten Videos
Für ein Video von 9 Sekunden habe ich je nach Aufwand zwischen 1,5 und 3 Stunden gebraucht um die Objektmaskierung Frame für Frame zu bearbeiten. Meine Videos haben 30 FPS also bei einem 9 Sekunden Video ca. 270 Frames die zu bearbeiten sind. Leider ist After Effects manchmal etwas langsam.
Bei meinem ersten 9 Sekunden Video hat es ca. 6 Stunden gebraucht um das Video als PNG Sequenzen über den Media Encoder zu exportieren, bei dem zweiten dann zum Glück nur noch 20 Minuten.
Ausstellung Planung
Rollschuhe mit Beschriftungen
DIN A6 Postkarten zum mitnehmen
Finales User Interface
Ein paar kleinere aber entscheidende Änderungen habe ich im letzten Schritt im User Interface vorgenommen:
- der Play- und Overlay Button liegt jetzt in der oberen Zeile neben den anderen Buttons in der gleichen Größe
- das Overlay kann man Ein- und Ausschalten
- wenn eine Phase angeklickt wird, wird das Overlay automatisch ausgeschaltet und ein Pose-Estimation-Overlay inklusive Beschreibung kommt hervor
Finale Videos und Frames
Finale Aufnahmen
Da es mittlerweile später dunkel wird, waren meine Aufnahmen in einem deutlich helleren und sonnigeren Szenario. Die Sonne habe ich für die Aufnahmen gemieden, je später aber die Aufnahmen wurden, je mehr Sonne kam langsam ins Bild rein. Außerdem sorgten die warmen Temperaturen dafür, dass Celine kürzere Kleidung trägt und dadurch die Videos und Überlagerungen eine ganz andere Wirkung bekommen als vorher. Alles ist heller und besser erkennbar als vorher.
Damit alles einheitlich bleibt, habe ich mich dazu entschieden alle Videos in Schwarz/Weiß darzustellen, um einen hohen Kontrast zu erzeugen.
Das Maskieren der Videos hat sich als große Arbeit herausgestellt, da leider bei den Schuhen und Beinen oft nicht die richtigen Stellen ausgewählt werden. Darum muss ich für jedes Video Frame für Frame mit meinem Grafiktablett und Stift die Auswahl bearbeiten. Sehr viel mehr Aufwand, dafür aber am Ende ein sauberes Ergebnis. Leider kann es aber sein, dass ich Stellen übersehe, welche am Ende dann einen kleinen Fehler haben.
Transparenz der Ebenen
Für die neuen Videos habe ich mit den Transparenzen etwas rumgespielt und geschaut wie die verschiedenen Kombinationen wirken. Am besten ist die 1. Variante, bei der die unteren Schichten eher Transparenter sind und dadurch das ganze Bild ruhiger wird. Die anderen Varianten sahen im Endergebnis nicht so schön aus, da man kaum noch das Video vom Hintergrund unterscheiden kann.
Als alternative Transparenz habe ich in Figma Expose, Shadow und Highlight komplett ins negative gesetzt. Dadurch entsteht ein deutlich deckenderes Bild.
Framer React Component mit Cursor
Framer Website:
https://artistic-roller-skating.framer.website
Stück für Stück habe ich mithilfe von Cursor Pro eine große Framer React Komponente gebaut. Mein Ziel war es nämlich, dass der ganze Prototyp in einer einzigen riesigen Komponente aufgebaut ist. Dadurch konnte ich nämlich leichter die einzelnen Elemente miteinander verknüpfen.
Der LLM kann man nämlich auch sehr einfach sagen, welche Elemente fehlen und welche man selbst im Nachhinein anpassen können möchte usw. Im Video kann man bei den Einstellungen in Framer ganz gut meine Flexibilität aber auch den Umfang meiner Komponente erahnen.
Echte Rollschuhe für die Ausstellung
Vom Eisteich bekomme ich ein altes Paar Rollschuhe ausgeliehen. Diese würde ich gerne mit verschiedenen Zetteln beschriften und diese an die jeweiligen Stellen schnüren. Zusätzlich wäre eine Beschreibung auf einer A5 Postkarte denkbar.
User Interface Weiterentwicklung
Das Interface für das iPad habe ich weiterentwickelt und ein Menu zur Auswahl der Figuren hinzugefügt.
Außerdem habe ich zwei Varianten für denn unteren Teil hinzugefügt.
Nach der letzten Feedback-Runde, habe ich das Interface noch übersichtlicher gestaltet. Dafür habe ich im Ausführung-Bereich die Phase dem Text nebeneinander zugeordnet. Außerdem Sind die Buttons um einiges größer geworden und haben mehr Abstand.
Experimente mit Frame Überlagerungen
User Interface
Entwicklung von einem UX Interface, um die einzelnen Sprünge anzuschauen
AR Plakat Entwürfe 2
Alle maskierten Clips von Sprüngen habe ich auf einen Frame zusammengefasst, um einen Überblick darüber zu bekommen.
Den Sprung „Rittberger“ habe ich in Photoshop eingesetzt, um das Video noch in Frames zu bekommen. Dafür habe ich 2 FPS genutzt.
Anschließend habe ich alle Frames in Figma übereinandergelegt und über Figma AI die Hintergründe entfernt.
Dann habe ich zum einen eine 4 FPS Variante erstellt, indem ich jeden zweiten Frame gelöscht habe.
Zum Schluss habe ich aus beiden Varianten eine transparentere Version erstellt, bei der der Fokus auf den Sprung liegt.
Mit dieser transparenten Variante konnte ich jetzt ein neues Plakat gestalten. Für den AR Effekt habe ich das originale Video mit einer leichten Transparenz auf die Frames gelegt. Dadurch bewegt sich Celine auf den einzelnen Frames entlang. unten drunter sind die einzelnen wichtigen Schritte abgebildet.
Weitere Plakat Variante mit komplett transparenten Frames und Beispiel Text. Außerdem im AR eine Interaktion, bei der man die Geschwindigkeit des Videos anpassen kann.
Eine weitere Version vom Layout habe ich auf ein DIN A5 gesetzt. dann hätte man auf der Rückseite die Informationen und vorne die Figur.
Beides als Kombination wäre für die Ausstellung denkbar. Dadurch könnte es 2 große DIN A1 Plakate geben mit den zwei wichtigsten Figuren und von allen weiteren Figuren ein DIN A5 Format. Von allen Figuren könnte es noch zusätzlich Postkarten geben zum mitnehmen
Testaufnahme mit Rollkunstläuferin
In der Halle am Eisteich versuchte ich eine neue Messung mit SensorLog zu starten. Dafür lief ich einmal ringsum die Halle. Leider war das Ergebnis sehr Fehlerhaft. Der GPS Messer hat leider gar keinen Empfang gehabt, weshalb ich dort keine Daten erfassen konnte.
Bei meiner ersten Testaufnahme hat Celine vier Sprünge und zwei Pirouetten präsentiert.
Anschließend habe ich das lange Video in einzelne Sprünge und Pirouetten geteilt und eine der Pirouetten dann in After Effects gezogen. Mit dem Object Matte (früher Rhotoscope) Tool habe ich Celine maskiert.
Das daraus entstandene Video habe ich dann in einen neuen Vibe-Code Prototypen gesetzt um daraus einzelne Frames mit Zwiebelschichten zu exportieren. Außerdem habe ich das ganze Video noch mit Zwiebelschichten exportiert. Da man bei After Effects nicht ohne Hintergrund exportieren konnte, bin ich bei einem weißen Hintergrund geblieben.
Um die Figuren besser zu verstehen habe ich mich dann noch mit Celine zusammengesetzt und wir sind die Figuren einmal durchgegangen. Dabei hat sie mir jeden Schritt ausführlich erklärt sodass ich mir einen Überblick verschaffen konnte.
AR Plakat Entwürfe
Google AI Edge
Bildsegmentierung
- Personen können aus dem Hintergrund als Fläche rausgeschnitten werden
- man könnte eine Silhouette der Person statt ein Stick Figure verwenden
- farbliche Körperzonen könnten bleiben
Ich habe versucht diese Bildsegmentierung in meinen Prototypen einzubauen und der erste Versuch war leider nicht erfolgreich.
Frame Player Prototype mit Mediapipe
Ich startete einen neuen Ansatz für den Prototypen mit Vibe Code. Dieser sollte über Mediapipe laufen und die Person sollte durch Pose Estimation erkannt werden. Um die Person von der Ausrichtung zu unterscheiden wollte ich, dass die rechte Seite rot und die linke Seite blau dargestellt wird. Außerdem beschrieb ich wie die Person als Stick-Figure dargestellt werden sollte. Eine weitere Funktion war es, dass man die FPS umstellen kann. Eine Linie, sollte eine Andeutung geben, wo ungefähr der Boden ist. Alle anderen Funktionen, die vorher schon da waren, wurden von ChatGPT automatisch übernommen.
Bei der zweiten Ausarbeitung, habe ich den Boden noch etwas verändern lassen.
Frame Player Prototype
Mit den Bildern mit 20fps habe ich dann einen neuen Vibe-Code Prototypen mit ChatGPT gebaut. Dieser sollte die Geschwindigkeit anpassen können, Zwiebelschichten & Frame Silder, die Möglichkeit Bilder hochzuladend und eine Play/Pause Funktion. Das ganze in ein schlichtes UX Design verpackt.
Dann hatte ich die Idee, dass man die Deckkraft und Abstände der Zwiebelschichten einstellen könnte.
Anschließend habe ich dem Vibe-Code Prototypen die Funktion gegeben, dass man den gezeigten Frame als PNG herunterladen kann.
Was man hier gut auf dem Test-Plakat sehen kann, ist das die einzelnen Frames eine weiße Outline haben. In Photoshop hatte ich vorerst nur die Hintergründe der Frames mithilfe von KI entfernen lassen. für ein besseres Ergebnis müsste da in realen Versuchen besser nachgearbeitet werden.
Als letztes fiel mir noch ein, einen Zoom Slider hinzuzufügen, damit man auch alle Frames mit großen Abständen immer noch gut erkennen kann.
Leider habe ich beim exportieren gemerkt, dass es leider das aktuelle Bild nicht richtig erkennt. Muss also noch nachgearbeitet werden.
Sprung-Aufnahme
60FPS (Frames per second)
Für meine Video-Aufnahme habe ich 60fps und 4k Qualität am Smartphone gewählt. Das Video habe ich anschließend in Photoshop als Frames importiert und von jeden der 40 Frames den Hintergrund entfernt.
Das erste Video zeigt die abgespielte Animation in 60fps.
30FPS
Als nächstes löschte ich jeden 2. Frame, um eine 30fps Qualität zu erhalten. Aus den übrigen 20 Frames habe ich ein paar Visuelle Experimente gemacht.
1. Bild zeigt alle Frames übereinander
2. Bild zeigt alle Frames nebeneinander
20FPS
Als letztes habe ich erneut jeden 2. und 3. Frame gelöscht, um eine 20fps Aufnahme zu erhalten. Dabei waren 14 Frames übrig
Versuche: SensorLog Datenvisualisierung
Versuch 1: Laufen im kleinem Bogen mit Sprüngen
Erster und zweiter überarbeiteter Vibe-Coding Prototyp über ChatGPT. Beim zweiten hatte ich den Wunsch, die Momente der Sprünge mit darzustellen.
Mein Bewegungsmuster war hier etwas wild und ich habe die Aufnahme zu nah an großen Gebäuden aufgenommen, sodass die Satelliten das GPS nicht gut erfassen konnten.
Versuch 2: Laufen im großen Bogen mit Sprüngen
Für meinen zweiten Versuch nahm ich mir eine größere Fläche vor und bin diese in großen Umdrehungen umlaufen.
Hier ist mir aufgefallen, dass bei mehreren Umdrehungen, die GPS-Position nicht mehr exakt an der Startposition ist. Nach jeder Umdrehung war sie leicht versetzt.
Versuch 3: Inline-Skates – Vorwärts, Sprünge & Rückwärts
Für meinen dritten Versuch ist eine Testperson mit Inlinern eine große Runde gefahren. Diesen Versuch teilte ich in drei Teile.
Der erste Teil war eine Vorwärts-Fahrt. Außerdem sieht man auf dem zweiten Bild, wie die gezeichnete Kurve mit dem GPS-Glättung Slider aussieht.
Hier ist mir aufgefallen, dass die Zeichnung senkrecht gespiegelt dargestellt wird.
Im zweiten Teil des Versuchs habe ich die Testperson ein paar Sprünge ausführen lassen.
Im dritten Teil des Versuch habe ich die Testperson ein paar Rückwärts Fahrten einbauen lassen.
WHY HOW WHAT
WHY:
Darstellungen von Rollkunstlauf zeigen meist nur Video oder Ergebnis, aber nicht die zugrunde liegenden räumlichen und rhythmischen Muster.
HOW:
Ein visuelles System, das Bewegungsmuster als Spur, Rhythmus & technische Ereignisse darstellt.
WHAT:
Interaktive Bewegungskarte mit klickbaren Knotenpunkten, welche technische Ereignisse visuell darstellen.
Pitch Deck
References/Moodboards
Version 1 – Draufsicht
Ice Skating Patterns:
Dynamic Visual Abstraction of Soccer Movement:
Version 2 – Frontansicht
Media
Rotoscope / Roto BrushMotion TrackingVelocity Tracking
Rotoscope / Roto Brush
Motion Tracking
Velocity Tracking
Film/Foto
Apple Watch
Plakat
Riso Druck
Drei Favoriten
Große Recherche
