Kategorien
Fotografie Inspiration JavaScript & jQuery Programmierung

Pointillismus per JavaScript mit dem jQuery-Plugin SeuratJS

Die JavaScript-Bibliothek SeuratJS verwandelt Bilder in pointillistische oder klassische Mosaike. Mit wenigen Einstellungen lassen sich Bilder nicht nur mit einem Mosaikeffekt, sondern auch noch mit einer schicken Animation versehen. SeuratJS basiert auf Raphaël, einer JavaScript-Bibliothek zum Erstellen von Vektorgrafiken im SVG-Format. Mosaik mit kreisförmigen Segmenten

Wie funktioniert SeuratJS?

Um SeuratJSzu nutzen, muss es zusammen mit jQuery und Raphaël im HTML-Kopf eingebunden werden:

<script type="text/javascript" src="raphael-min.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="seurat.js"></script>

Anschließend lässt sich SeuratJS auf beliebige Bilder anwenden. Die Bilder werden als einfaches IMG-Element ausgezeichnet. Per jQuery-Selektor werden die Bilder angesprochen:

<img src="bild.png" id="bild" width="100" height="100" alt="" />

Als erstes wird ein Raphaël-Container erstellt. Denn SeuratJS greift auf die Funktionen von Raphaël zu, um ein Bild in eine SVG-Grafik umzuwandeln, die als Inline-SVG ins HTML-Dokument eingefügt wird:

$(document).ready(function() {
  $("#bild").load(function() {
    raphaelContainer = $("<div id=\"" + $(this).attr("id") + "\"></div>").width($(this).width()).height($(this).height());
    $(this).replaceWith(raphaelContainer);

Der Container ist ein einfaches DIV-Element, dem die ID des Bild-Elementes zugewiesen wird. Anschließend ersetzt man per „replaceWith()“ das IMG-Element durch den erzeugten Raphaël-Container. Nun wird ein neues Raphaël-Objekt erzeugt, auf das SeuratJS einen Mosaikeffekt anwenden kann:

    papier = new Raphael(document.getElementById($(this).attr("id")), $(this).width(), $(this).height());

Die eigentlichen Einstellungen für Form und Größe der Mosaiksegmente werden über die Funktion „seurat()“ festgelegt:

    papier.seurat({
      imageSource: $(this).attr("src"),
      shape: "circ",
      step: 10,
      attributes: {r: 10, stroke: 0}
    });
  });
});

Die zu verwendende Bilddatei definiert man über „imageSource“. Im Beispiel ist die Bildquelle nicht direkt angegeben, sondern wird aus dem IMG-Element geholt. Die Angabe „shape“ bestimmt die Form der Mosaiksegmente. Zur Auswahl stehen Rechtecke („rect“) und Kreise („circ“). Über „step“ gibt man den Abstand zwischen den einzelnen Segmenten an. Der Parameter „attributes“ beinhaltet bis zu zwei weitere Einstellungen, die jedoch nur bei runden Segmenten funktionieren. Zum einen wird mit „r“ der Radius der einzelnen Segmente angegeben, zum anderen über „stroke“ konfiguriert, ob die Elemente einen schwarzen Rahmen haben sollen. Einfaches Mosaik

Wie animiert man Mosaike?

Ein weiteres Feature von SeuratJS ist die Möglichkeit, ein Mosaik zu animieren. Über Animationen werden Radius („r“) und Rahmen („stroke“) der Mosaiksegmente verändert. Außerdem ist es möglich, zwei Delays zu definieren: Ein Delay zum Start der Animation und ein Delay für die Dauer der Animation. Der Aufruf der SeuratJS-Funktion sieht dann so aus:

paper.seurat({
  imageSource: $(this).attr("src"),
  shape: "circ",
  step: 10,
  attributes: {r: 10, stroke: 0},
  animator: function(element, x, y, step) {
    var bewegung = Raphael.animation({r: 50, stroke: 1}, 500);
    element.animate(bewegung.delay(2500));
  }
});

Über die Variable „bewegung“ startet man eine Raphaël-Animation. Diese beinhaltet die Werte, die während der Animation verändert werden sollen (im Beispiel „r“ und „stroke“). Anschließend folgt der erste Delay für die Dauer der Animation (hier 500 Millisekunden). „element.animate()“ startet die Animation. Darin enthalten ist der zweite Delay (hier 2500 Millisekunden), der angibt, wann die Animation beginnen soll. Auch die Position der Mosaikelemente kann während der Animation verändert werden. Dazu dienen die Koordinaten „cx“ und „cy“:

var bewegung = Raphael.animation({cx: 2*x, cy: 2*y, r: 50, stroke: 1}, 500);

Im Beispiel werden die X- und Y-Koordinaten jedes einzelnen Mosaiksegmentes verdoppelt.

Fazit: SeuratJS ist leicht zu bedienen und ermöglicht Mosaikeffekte inklusive Animation mit wenigen Handgriffen. Eine nette Spielerei ist es allemal! Da für jedes Mosaiksegment eine SVG-Fläche gezeichnet werden muss, geht das Script bei großen Mosaiken stark auf die Performance der Rendering-Engine.

(dpe)

Von Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet.

Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.