ludi.de ∙ Dreiecke

Hier gibt es eine schöne und vollkommen nutzlose SVG-App zu sehen.

Eine rechteckige Fläche wird trianguliert, das heißt sie wird mit einem Netz aus Dreiecken überzogen. Du kannst bei diesem Prozeß mit einer Reihe von Parametern Einfluß nehmen. So kannst Du die Anzahl der Spalten und/oder Zeilen, die Farben, die Animation und Anderes einstellen.

Nutzen kannst Du diese SVG-App vermutlich nur als eine Art bewegtes Hintergrundbild für Webseiten oder Emails. Programmiert ist sie in SVG und JavaScript und kann einfach in eine HTML-Seite eingebunden werden. Das erzeugte Dreiecksgitter ist responsiv und paßt sich bei einer Größenänderungen der Zeichenfläche automatisch an.

Einige Beispiele:

Formen

Um die Animation zu erzeugen, wird die rechteckige Zeichenfläche trianguliert, das heißt sie wird in eine Vielzahl von Dreiecken unterteilt. Diese Dreiecke bilden dann ein Gitter aus Zeilen und Spalten. Die Anzahl der Zeilen und Spalten kann fest vorgegeben werden oder sie wird automatisch berechnet, indem einer der Werte auf 0 gesetzt wird. Wird ein Wert auf 0 gesetzt, dann wird dieser automatisch so berechnet, daß möglichst regelmäßige Dreiecke entstehen.

Die Form der Dreiecke wird durch einen Zufallswert verzerrt. Je höher dieser Verzerrungswert ist, desto ungleichmäßiger werden die Dreiecke.

Zeilen

Spalten

Verzerrung

Die Dreiecke können an den Rändern der Zeichenfläche fixiert werden. Sie werden dann gleichmäßig verteilt, sind fest mit dem Rand verbunden und werden nicht animiert.

oben fixiert

unten fixiert

links fixiert

rechts fixiert

Farben

Für alle vier Ecken der Zeichenfläche wird eine Farbe bestimmt. Die Farben der Dreiecke werden daraus berechnet.

links oben

links unten

rechts oben

rechts unten

Linien

Die Dreiecke können mit einer farbigen Linie umrandet werden. Bei einer Liniendicke von 0 wird keine Umrandung gezeichnet.

Farbe

Dicke

Animation

Der Wert „Bewegung“ bestimmt die Bewegungsgeschwindigkeit für die Schnittpunkte der Dreiecke. Bei einem Wert von 0 werden die Dreiecke nicht animiert.

Die Punkte, die die Dreicke aufspannen, werden mit einer zufälligen Höhe initialisiert. Aus diesen Punkten errechnet sich dann die Stellungen der Dreiecke im Raum und damit der „Kontrast“ bzw. die Lichtreflektion.

Der letzte Wert „Lichteinfall“ bestimmt die Winkelgeschwindigkeit des Lichteinfalls. Je größer dieser Wert ist, desto schneller rotiert eine virtuelle Lichtquelle um das Dreiecksnetz.

Bewegung

Kontrast

Lichteinfall

Anleitung

Du kannst diese Animation in eine HTML-Seite einbauen oder direkt in einem Browser anzeigen. Da bereits beim Download alle oben gemachten Einstellungen in eine SVG-Datei geschrieben werden, ist der Einsatz sehr einfach.


  <html>
    <body>
      <object data="triangles.svg" type="image/svg+xml">
      </object>
    </body>
  </html>

Beachte bitte, daß die Animation über ein Object-Tag in HTML eingebunden wird. Das naheliegende Image-Tag funktioniert nicht, da hier die Ausführung von JavaScript aus Sicherheitsgründen blockiert ist.

Du kannst die Eigenschaften der animierten Dreiecke auch direkt in HTML über Parameter im Object-Tag bestimmen. Für diese Variante muß aber die entsprechende Webseite auf einem Server liegen. Die fünf Beispiele ganz oben auf dieser Seite sind so gebaut.

Wer sich mit der Programmiersprache JavaScript auskennt, kann die Eigenschaften der Dreiecke auch direkt im SVG-Source ändern. Dazu muß zuerst die Datei triangles.svg geladen und anschließend in einem Editor geöffnet werden. Oben im SVG-Source findest Du dann das JavaScript-Objekt options, das Du hier mit Deinen oben gemachten Einstellungen in die Zwischenablage kopieren und übernehmen kannst oder aber die entsprechenden Werte händisch änderst.

Download

Bitte beachte, daß die SVG „triangles.svg“ auf dem Server erzeugt und mit den oben eingestellten Parametern initialisiert wird.

Diese Software steht unter der GNU General Public License (GPL), die das Recht beinhaltet, die Software auszuführen, zu studieren, zu ändern und zu verbreiten.