Animationen mit JavaScript – affine Transformationen, Vektoren und Matrizen programmierend erkunden
Dies ist ein Lernpfad für den Workshop Animationen mit JavaScript — affine Transformationen, Vektoren und Matrizen programmierend erkunden auf der Schülerakademie Mathematik Ostwestfalen-Lippe (SAM-OWL).
Der Workshop gliedert sich in mehrere Phasen. Über das Menü auf der linken Seite kannst du auf die einzelen Phasen zugreifen.
Motivation
Rotorblätter
Wie kann man solche Animationen erzeugen? 🤔
Rechteckdrehung
Wir schauen uns zunächst ein einfacheres Beispiel an, bei dem sich ein Rechteck im Kreis dreht und dabei größer und kleiner wird.
Man könnte sich überlegen, wie sich von Bild zu Bild die Koordinaten der Eckpunkte verändern müssen. Dazu müsste man einige Berechnungen anstellen ...
Wir gehen einen geschickteren (aber auf den ersten Blick etwas komplizierteren) Weg: Wir bewegen nicht die Figur, sondern das Koordinatensystem. Dazu überlegen wir, wie wir das Koordinatensystem verschieben, drehen und strecken/stauchen müssen. Dann können wir Figuren animieren, auch wenn sie (im veränderten Koordinatensystem) eigentlich immer an dieselbe Stelle gezeichnet werden.
Eckdaten
- 🧮 Mathematischer Aspekt: Die oben gezeigten Manipulationen (Verschiebung, Drehung, Streckung/Stauchung) gehören zu den sogenannten affinen Transformationen. Wir werden uns in diesem Workshop anschauen, wie man solche Transformationen mathematisch darstellt und wie man solche Transformationen für verschiedene Animationen nutzen kann. Dabei werdet ihr Vektoren und Matrizen kennenlernen.
- 👩🏿💻 Verwendete Programmiersprache: JavaScript
- 💭 Voraussetzungen: Interesse! Zum Beispiel fragen wir uns, wie wir das Koordinatensystem verschieben und drehen müssen, um auch an der anderen Seite des großen Rotorarmes rotierende Arme anzufügen. Digitale Endgeräte haben wir auch einige, Programmiervorkenntnisse sind nicht nötig.
- 🎯 Ziel: Ziel ist es, die Mathematik hinter den Transformationen zu verstehen und eine eigene kreative Animation zu erstellen, die ihr mit nach Hause nehmen könnt.
Beispielprojekte
Chronik
- 2025: Übereitung und Umzug des Workshops auf fiebig.schule für die SAM-OWL 2025
- 2024: Entwicklung und erstmalige Durchführung des Workshops auf der SAM-OWL; Verwendung der Plattform lernpfad.ch (im August 2025 abgeschaltet)