Der interaktive Moiree-Generator erlaubt die Farbeinstellung beider Ebenen, das stufenlose drehen, 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.


Voila, hier ist er

Image

Link: Den Moiree Generator öffnen


Gewollt oder nicht – der Moiree Effekt

Moiree (oder Moiré) war in der Druckvorstufe ein unerwünschtes Ergebnis, dabei ging es im vordigitalen Zeitalter um falsche Winkeleinstellungen einer der vier Rasterfarben, bzw. um Passer-Ungenauigkeiten, die natürlich immer noch passieren können. Inzwischen werden Moiree's aber gewollt erzeugt, z. B. bei bedruckten Stoffen, als Effekt in Video-Intros oder im Graphik Design. Ein Moiree Effekt kommt dadurch zustande, dass zwei Folien – in diesem Fall Ebenen – mit ähnlichen graphischen Mustern übereinandergelegt und eine davon leicht gedreht wird.

Genügend Abstand ist wichtig

Die grafischen Muster ermöglichen den Moiree Effekt dann, wenn Abstand zwischen den z. B. Linien vorhanden ist. Ohne Abstand kein Moiree, da ja die zweite Ebene in den Zwischenräumen sichtbar bleiben soll. Es gibt zwar Moirees mit nur 1 Pixel Zwischenraum, bei denen durch die Überlagerung eine Animation von einfachen Formen erzeugt wird, diese sind naturgemäß sehr dunkel. Aber spannend allemal, eines davon werde ich vielleicht irgendwann in den Moiree-Generator aufnehmen.

Was kann der Moiree-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 Moiree'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) sind von der Datenmenge kleiner als png und erhalten die Qualität bei großen Zoomstufen.

Beide Ebenen:

  • Skalieren an die gewünschte Größe
  • Farben Vorder-/Hintergrund
  • Helligkeit Vorder-/Hintergrund

Vordergrundebene:

  • Drehen
  • Horizontales verschieben
  • Vertikales verschieben
  • Rückstellung beider Verschieberegler

html5 statt Folien?

Das mag auch für Powerpoint gelten :-), welcher von interaktivem html5 Konkurrenz erhält. Die Möglichkeiten von html5, in Verbindung mit CSS und Javascript haben Flash zur Gänze abgelöst. Satt Action Script, der Programmiersprache in Adobe Flash, ist jetzt Javascript der Motor für Animationen, kleine Online-Spiele und ... den Moiree-Generator. Javascript kommt praktisch in allen modernen Websites vor und läuft auch auf Mobilgeräten ohne Einschränkungen. Mein Moiree-Generator wurde mit Tumult Hype Pro realisiert.