c_platon.html

Die fünf "Platonischen Körper" (Tetraeder, Würfel, Oktaeder,
Dodekaeder und Ikosaeder) umkreisen den "Buckyball"

Rotation um x-, y- bzw. z-Achse:

CanvasGI-Demoprogramm "Platonische Körper und Buckyball"

Mit dem oben zu sehenden Bild wird demonstriert,

wie mehrere "Flächenmodelle", die alle mit 3D-Koordinaten in der Umgebung des Nullpunktes definiert wurden,
mit Translationstransformationen auseinander gezogen werden können,
dabei mit unterschiedlichen Faktoren skaliert werden,
um in der 2D-Zeichenebene dargestellt zu werden,
wobei die gegenseitige Überdeckung korrekt wiedergegeben wird
und die äußeren Körper um den zentralen Körper kreisen,
dabei jeweils noch eine Eigendrehung um unterschiedliche Achsen ausführen
und dem Gesamtsystem Drehungen um andere Achsen aufgezwungen werden können (Klick auf Button unterhalb des Bildes).

Die Realisierung dieser Animation unter Verwendung der CanvasGI-Funktionen wird ausführlich auf der Seite "Mehrere 3D-Flächenmodelle zeichnen und animieren" beschrieben.

Im Gegensatz zu den anderen Demo-Programmen für CanvasGI, bei denen der HTML-Teil und die JavaScript-Funktionen in einer Datei waren, findet man den JavaScript-Anteil für die Seite "Platonische Körper und Buckyball" in einer separaten Datei platon.js, die man in andere HTML-Dateien einbinden kann, um die Animation zu erzeugen. Natürlich muss man dann auch CanvasGI.js und flaechenmodelle.js einbinden. Die init-Funktion, die in den anderen Beispiel-Programmen aus dem Body-Tag (über "onLoad") startet, wird hier in platon.js über "window.onload" gestartet, so dass eine minimale HTML-Datei, die die oben zu sehenden Animation erzeugt, zum Beispiel so aussieht:

<html>
   <head>
      <script type="text/javascript" src="http://www.TM-Mathe.de/CanvasGI/CanvasGI.js"></script>
      <script type="text/javascript" src="http://www.TM-Mathe.de/CanvasGI/flaechenmodelle.js"></script>
      <script type="text/javascript" src="http://www.TM-Mathe.de/CanvasGI/platon.js"></script>
   </head>
   <body>
      <div align="center"><canvas id="canvas" width="300" height="180"></canvas></div>
   </body>
</html>