html5 Moiree-Generator

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.

Ein Beispiel

Ein Beispiel des Generators im Bearbeitungsmodus

Es gibt derzeit acht Moirees, das ist eines davon


Hier gehts zum Moiree-Generator


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.

Druckfilme (Beispielfoto) beliebig übereinandergelegt = Moiree
Bildquelle und Artikel bzgl. Drucktechnik: o-l.ch

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 darunterliegende 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 sicher irgendwann in den Moiree-Generator aufnehmen.

Was kann der Moiree-Generator?

Responsive Darstellung für alle Ausgabegeräte in html5 / CSS und Javascript, bei Smartphone-Displays ist der zur Verfügung stehende Raum dann sehr beengt, weshalb die Titelzeile ausgeblendet wird. Sämtliche Einstellungen werden durch Regler gesteuert. Die Grundfarbe der Muster ist immer blau, bei der farblichen Anpassung sind sehr dunkle Töne nicht möglich, vielleicht ändere ich das noch. 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

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 und kleine Online-Spiele. Die Scriptsprache Javascript kommt praktisch in allen modernen Websites vor und läuft auch auf Mobilgeräten ohne Einschränkungen.

→ Diesen Artikel teilen: | | LinkedIn | Whatsapp |