html5 Moiré Generator

Mein interaktiver html5 Moiré (oder Moiree)- Generator ist ein Projekt, bei dem ich die interaktiven Möglichkeiten von Tumult Hype Pro genutzt habe. Hype 4 gibt es nur für Mac-Rechner und ist im Grunde ein html5-Animationsprogramm. Vom Funktionsumfang vergleichbar mit dem inzwischen längst eingestellten Adobe Flash. War bei Flash Action Script der Motor für Effekte, ist es bei Hype Javascript. Moderne Websites sind ohne Javascript nicht mehr denkbar.

Der Moiré Generator

Mein Moiré-Generator erlaubt die Farbeinstellung beider Ebenen, das stufenlose dehen, das horizontale und vertikale verschieben der Vordergrundebene inkl. Mittekorrektur. Skalieren an die Größe des Browserfensters sowie die Anpassung der Farbton-Helligkeit ist ebenfalls möglich. Die Grafik-Dateien sind im svg-Format, damit beim Vergrößern die Qualität erhalten bleibt. Browser, die svg nicht darstellen können, darunter ältere iOS und Android-Modelle sowie Internet Explorer und Edge bleiben leider außen vor.

Gewollt oder nicht – der Moiré Effekt

Moiré war in der Druckvorstufe ein unerwünschtes Ergebnis, dabei ging es im vordigitalen Zeitalter um falsche Winkeleinstellungen einer der vier Rasterfarben. Im moiré_5 ist das Druck-Moirè in etwa ersichtlich. Inzwischen werden Moiré's aber gewollt erzeugt, z. B. bei bedruckten Stoffen, als Effekt in Video-Intros oder im Graphik Design. Ein Moiré Effekt kommt dadurch zustande, dass zwei Folien – in diesem Fall Ebenen – mit identischen graphischen Mustern übereinandergelegt und eine davon leicht gedreht bzw. verschoben wird.

Abstand ist wichtig

Die grafischen Muster ermöglichen den Moiré Effekt dann, wenn Abstand zwischen den z. B. Linien vorhanden ist. Ohne Abstand kein Moiré, da ja die zweite Ebene in den Zwischenräumen sichtbar bleiben soll. Es gibt zwar Moirés mit nur 1 Pixel Zwischenraum, bei denen durch die Überlagerung eine Animation von einfachen Formen erzeugt wird, diese sind naturgemäß sehr dunkel.

Was kann der Moiré Generator

Responsive Darstellung für alle Ausgabegeräte in html5 / CSS und Javascript. Sämtliche Einstellungen werden durch Regler gesteuert. Nicht jeder Regler wirkt sich gleich auf alle Moirés aus. Die Grundfarbe der Muster ist immer blau, bei der farblichen Anpassung sind sehr dunkle Töne nicht möglich. Vektor Graphik Dateien (svg) als grafische Objekte sind von der Datenmenge klein und erhalten die Qualität bei großen Zoomstufen.

Beide Ebenen:

Vordergrundebene:

Making of

Der Moiré Generator entstand mit den Bordmitteln von Tumult Hype Pro. Das heisst, dass keine manuell gecodeten Javascript-Dateien erforderlich waren. Was nicht bedeutet, dass Hype ohne Javascript auskommt, Javascript ist ein fundamentaler Teil von interaktivem html5. Hype bietet u. A. die Möglichkeit, neben der Hauptzeitleiste beliebig viele Zeitleisten zu erstellen und diese mit den Aktionen "anzusprechen". So entstanden die Regler. 

In der Zeitleiste, im Bild oben für den Regler "color foreground", werden die farblichen Eigenschaften definiert. Jeder Regler erhält eine eigene Zeitleiste, bei dieser ändern sich die Farben, andere verschieben Elemente oder drehen diese. Verschieben und drehen muss manuell auf der Bühne erledigt werden.  

Mit der Aktion „Bei Ziehen“ wird die betreffende Zeitleiste gesteuert, so dass die Bewegungsrichtung und das Tempo des Reglers stimmt. Wäre “Nach Ziehen fortfahren“ aktiviert, würde sich der Regler nach der ersten Maus- oder Touch-Berührung an das Ende der Zeitleiste bewegen, was für Animationen Sinn machen würde, nicht aber für interaktive Anwendungen.