SVG 3D Tag Cloud jQuery Plugin

Bisher habe ich SVG (Scalable Vector Graphics) immer nur als Format zum Austausch zwischen zwei verschiedenen Programmen genutzt. Z.B. um in der Flash IDE gezeichnete Vektor-Grafiken in Illustrator weiter zu verwenden. Fürs Web erschien mir der Einsatz lange Zeit noch ungeeignet, weil SVG von diversen Browsern nicht unterstützt worden sind. Zwar kommen die älteren Browser-Versionen, speziell vom Internet Explorer, nicht mit SVG klar, aber generell steigt die Anzahl an Browsern die SVG unterstützen stetig an. Da SVG auf XML basieren, kam mir nun die Idee ein wenig zu experimentieren in wie weit man z.B. per JavaScript Zugriff auf die einzelnen Elemente in SVG bekommt. Nach einer kurzen Suche im Netz wurde mir schnell klar, dass meine Idee wohl nicht ganz neu war. So gibt es bereits zahlreiche Tutorials und Frameworks die genau aufzeigen, wie man Zugriff auf SVG-Elemente erhält und wie man diese mehr oder weniger bequem animieren kann.
Und so kam mir die nächste Idee. Ich hatte vor Jahren mal versucht eine 3D Tag Cloud mit Flash zu realisieren. Das hatte soweit auch ganz gut funktioniert, nur leider ist Flash inzwischen im Web so gut wie tot und findet keine Verwendung mehr. Tag Clouds gibt es generell schon recht viele, aber soweit meine Recherche ergeben hat noch keine auf Basis von SVG. Und so entstand die Idee eine 3D Tag Cloud zu erstellen deren Inhalte alle komplett in einer SVG gezeichnet und animiert werden. Rausgekommen dabei ist nun die SVG 3D Tag Cloud als jQuery Plugin:

Wie bei meinen letzten jQuery Plugins auch, könnt ihr die SVG 3D Tag Cloud mit, oder ohne jQuery benutzen. Ich habe folgend ein paar Beispiele zusammengestellt mit deren Hilfe ihr das Plugin sehr schnell für eure eigenen Projekte/Webseiten nutzen könnt.
Und so geht´s.
Erst einmal braucht ihr ein Array mit Links/Tags. Dieses kann z.B. wie folgt aussehen:

var entries = [ 

    { label: 'Dev Blog', url: 'http://niklasknaack.blogspot.de/', target: '_top' },
    { label: 'Flashforum', url: 'http://www.flashforum.de/', target: '_top' },
    { label: 'Javascript-Forum', url: 'http://forum.jswelt.de/', target: '_top' },
    { label: 'CodePen', url: 'http://codepen.io/', target: '_top' },
    { label: 'three.js', url: 'http://threejs.org/', target: '_top' },
    { label: 'WebGLStudio.js', url: 'http://webglstudio.org/', target: '_top' },
    { label: 'JS Compress', url: 'http://jscompress.com/', target: '_top' },
    { label: 'TinyPNG', url: 'https://tinypng.com/', target: '_top' },
    { label: 'Can I Use', url: 'http://caniuse.com/', target: '_top' },
    { label: 'URL shortener', url: 'https://goo.gl/', target: '_top' },
    { label: 'Twitter', url: 'https://twitter.com/niklaswebdev', target: '_top' },
    { label: 'deviantART', url: 'http://nkunited.deviantart.com/', target: '_top' },
    { label: 'Gulp', url: 'http://gulpjs.com/', target: '_top' },
    { label: 'Browsersync', url: 'https://www.browsersync.io/', target: '_top' },
    { label: 'GitHub', url: 'https://github.com/', target: '_top' },
    { label: 'Shadertoy', url: 'https://www.shadertoy.com/', target: '_top' },
    { label: 'Starling', url: 'http://gamua.com/starling/', target: '_top' },
    { label: 'jsPerf', url: 'http://jsperf.com/', target: '_top' },
    { label: 'Foundation', url: 'http://foundation.zurb.com/', target: '_top' },
    { label: 'CreateJS', url: 'http://createjs.com/', target: '_top' },
    { label: 'jQuery', url: 'https://jquery.com/', target: '_top' },
    { label: 'jQuery Rain', url: 'http://www.jqueryrain.com/', target: '_top' },
    { label: 'jQuery Plugins', url: 'http://jquery-plugins.net/', target: '_top' }

];

Dieses Array müsst ihr nun per Parameter übergeben. Neben den Links, die unsere SVG 3D Tag Cloud anzeigen soll, könnt ihr optional noch weitere Parameter übergeben, um die Tag Cloud zu individualisieren und nach euren Wünschen zu gestalten. Folgend ein Beispiel bei dem das eben erstellte Array und alle möglichen Einstellungen in einem Object zusammengefasst werden:

var settings = {

    entries: entries,
    width: 480,
    height: 480,
    //width: '100%',
    //height: '100%',
    radius: '65%',
    radiusMin: 75,
    bgDraw: true,
    bgColor: '#111',
    opacityOver: 1.00,
    opacityOut: 0.05,
    opacitySpeed: 6,
    fov: 800,
    speed: 2,
    fontFamily: 'Oswald, Arial, sans-serif',
    fontSize: '15px',
    fontColor: '#fff',
    fontWeight: 'normal',
    fontStyle: 'normal',
    fontStretch: 'normal',
    fontToUpperCase: true

};

Gehen wir nun am besten einfach alles Schritt für Schritt durch. Falls ihr es besonders eilig habt könnt ihr das aber auch überpringen. Ihr müsst im Prinzip nur das entries Array übergeben.

Bei entries übergebt ihr, wie schon gesagt, euer Array mit Links/Tags (Pro Link/Tag muss immer ein Label, eine URL und ein Target definiert werden. Wie im Beispiel ganz oben zu sehen).

Mit width und height legt ihr die Maße fest. Gebt ihr an dieser Stelle einfach nur Zahlenwerte an, dann ergeben diese Werte die fixe Größe der Tag Cloud. So wie im Beispiel oben zu sehen.
Nach dem Update könnt ihr an dieser Stelle aber nun auch Prozentwerte mit angeben. Auf diese Weise lässt sich die Tag Cloud sehr gut in Frameworks wie Foundation oder Bootstrap integrieren. Somit ist die Tag Cloud nun auch perfekt für responsives Webdesign geeignet. Wenn ihr mit Prozentwerten arbeitet müsst ihr beachten, das width der Prozentwert für die Breite ist. Fügt ihr die Tag Cloud z.B. in ein Div ein und width steht auf 100%, dann nimmt die Tag Cloud 100% der Breite des Divs an. Bei height verhält es sich anders. Die height ist immer abhängig von der width. Wenn euer Div 400px breit ist und ihr eine width von 100% angegeben habt und dazu eine height von 100%, dann hat die Tag Cloud die Maße 400x400px. Bei einer height von 90% sind die Maße: 400x360px.
Kurz zusammengefasst: Wenn ihr mit festen Pixelgrößen, gar nicht bis wenig responsiv, arbeiten wollt, dann gebt die Werte z.B. wie im folgenden Beispiel mit an:

width: 480,
height: 480,

Wenn eure Tag Cloud responsiv sein soll und z.B. die Breite vom Div annehmen soll, in dem sie geadded worden ist, dann gebt die Werte wie folgt an:

width: '100%',
height: '100%',

Per radius definiert ihr den Radius auf dem die Links erstellt werden. Nach dem Update hier bitte wie im Beispiel oben zu sehen nur noch Prozentwerte angeben. Und mit radiusMin könnt ihr bestimmen, falls es einen Resize gab, inwieweit der Radius verkleinert werden darf.

Bei bgDraw könnt ihr per true/false bestimmen ob die SVG einen Hintergrund bekommen soll und mit bgColor betimmt ihr die Hintergrundfarbe.

Mit opacityOver, opacityOut und opacitySpeed bestimmt ihr das verhalten der einzelnen Links/Tags, wenn ihr mit der Maus drüber fahrt. opacityOver und opacityOut nehmen Werte von 0.00 - 1.00 entgegen. Mit opacitySpeed bestimmt ihr, wie schnell/sensibel die Links/Tags reagieren.

Die Einstellung fov (Field of View) bestimmt, wie die Inhalte dargestellt werden. Der Wert wird beim umrechnen der dreidimensionalen Koordinaten in zweidimensionale Koordinaten benutzt. 800 ist dabei schon ein sehr guter Wert, aber bei Bedarf könnt ihr ihn ebenfalls anpassen.

Die Eigenschaft speed bestimmt wie sensibel/schnell die Tag Cloud auf eure Maus reagiert.

Mit der Eigenschaft fontFamily legt ihr fest, welche Schrift verwendet werden soll. Ihr könnt/solltet dabei mehrere Schriften angeben. Falls euer Browser nicht mit der ersten Schrift klar kommt, oder diese nicht geladen werden kann, wird die nächste Schrift verwendet. Es ist auch problemlos möglich die kostenlosen Google Webfonts zu nutzen. Schaut dazu am besten auf der Google Fonts Seite vorbei. Dort wird sehr anschaulich erklärt, wie ihr die Schriften auf eurer Seite nutzen könnt.

Die Eigenschaften fontSize und fontColor sollten selbsterklärend sein. 

Bei fontWeight könnt ihr „normal“ oder „bold“ angeben.

Und bei fontStyle „normal“ oder „italic“.  

Mit fontStretch bestimmt ihr den Abstand der einzelnen Zeichen zueinander. Hier sind folgende Parameter möglich: „wider“, „narrower“, „ultra-condensed“, „extra-condensed“, „condensed“, „semi-condensed“, „semi-expanded“, „expanded“, „extra-expanded“ und „ultra-expanded“.

Und mit fontToUpperCase könnt ihr per true/false festlegen ob die Links/Tags wie übergeben, oder in Versalien dargestellt werden sollen. 


So, fast geschafft. Jetzt fehlt nur noch eine Zeile Code und ihr seid durch.
Wenn ihr mit jQuery unterwegs seid, dann fügt noch die folgende Zeile hinzu:

$( '#holder' ).svg3DTagCloud( settings );

Und ohne jQuery schreibt ihr die Zeile einfach ein wenig anders:

var tagCloud = new SVG3DTagCloud( document.getElementById( 'holder'  ), settings );

Fertig! Das wars schon.
Ihr könnt euch das komplette Beispiel mit allen Eigenschaften HIER anschauen.

Zum Download gibt es eine standard JS und auch eine minifizierte JS. Mit 14KB, bzw. 5KB sind die Dateigrößen recht überschaubar geworden.

Jetzt bleibt mir nicht mehr viel zu sagen, außer: Viel Spaß mit der SVG 3D Tag Cloud!
Und wie immer freue ich mich über Feedback. Falls ihr die SVG 3D Tag Cloud wo im Einsatz habt würde ich mich über einen Link sehr freuen.

Achtung, es gab ein größeres Update!
Die Dokumentation und die Download Links habe ich bereits angepasst.
Wichtig, ihr müsst nun bei Radius einen Prozentwert angeben und keine Pixelwerte mehr.
Die Tag Cloud ist nun vollständig responsive und kann so nun sehr gut z.B. in das Foundation Framework eingebunden werden. Hier ein Beispiel-Video:



Update/Neue Version

Nach diversen Anfragen gibt es nun ein Update auf Version 2. Neu in Version 2 sind Grafik-Tags und Tooltips. Hier geht es lang zu SVG 3D Tag Cloud jQuery Plugin V2.

Sound Visualizer V2

Auf Basis von meinem ersten Canvas Sound Visualizer habe ich eine neue Version erstellt.
Wie gehabt könnt ihr die Szenerie mit der Maus drehen und so die 20 unterschiedlichen 3D-Modelle von allen Seiten betrachten. 

Mit einem Klick wechselt ihr nicht nur die Modelle, sondern ändert auch das Farbschema. Alles Weitere geschieht von allein. Ihr könnt also Einfluss nehmen, aber müsst es nicht. Der Sound Visualizer kann euch auch ohne Interkation unterhalten.
Bis auf das Gesicht werden alle Modelle dynamisch erstellt und dank diverser Zufallsparameter nehmen bestimmte Modelle bei jedem Start neue Positionen usw. ein, weshalb sich jedes Mal ein neues Bild ergibt. Für mich war es in diesem Fall besonders schwierig einen schönen Übergang beim Wechsel zwischen den Modellen zu realisieren, aber im Endeffekt ist das ganz gut gelungen wie ich finde. 

Die verschiedenen Modelle bestehen jeweils aus 32768 Partikeln. Bei bestimmten Modellen, wie z.B. beim Gesicht, werden zusätzliche Partikel mit angezeigt, was die Gesamtzahl auf bis zu 65536 Partikel erhöht die gleichzeitig dargestellt und berechnet werden.
Jedes einzelne Partikel reagiert in einer bestimmten und vorher definierten Art und Weise auf den Audio Input. Dadurch und in Verbindung mit den unterschiedlichen Farbschemen entstehen in der Regel ziemlich einzigartige Bilder. 

Bitte gebt dem Sound Visualizer etwas Zeit zum Laden. Bei Interesse/Gefallen empfehle ich den kompletten Song durchlaufen zu lassen, damit ihr alle Modelle und Farben im Einsatz sehen könnt.
Falls euch der Song „Sleepless“ von „Hypp fractal“ aus dem Album „Glow“ nicht gefällt, dann könnt ihr über das Menü eure eigenen MP3´s laden und schauen wie sich der Sound Visualizer dazu verhält. 

Generell könnt ihr über das Menü diverse Einstellungen vornehmen. Der Fullscreen Mode ist dabei etwas mit Vorsicht zu genießen, da es sehr viel Perfomance kostet die Canvas auf Bildschirmgröße darzustellen. Mit einem flotten Rechner sollte das aber gut funktionieren.
 
Mobile und Internet Explorer User gehen leider leer aus. Das liegt nicht an der Engine selbst, also den Partikeln usw., sondern daran, dass die Browser auf mobilen Endgeräten kaum, oder nur sehr schlecht, Audiowiedergabe unterstützen. Und in diesem Fall wird die Soundquelle nicht nur wiedergegeben, sondern auch analysiert. Ich hoffe das wird mit zukünftigen Browser Versionen besser und einheitlicher werden, aber bis dahin gibt es bei mobilen Endgeräten leider nichts auf die Ohren und somit können die Partikel auch nicht reagieren. Probiert es aber gerne mal aus und gebt mir Feedback falls es läuft. Aber da es sich hier nur um ein kleines Experiment handelt wollte ich nicht zu viel Zeit investieren das auch auf mobilen Geräten ans Laufen zu bekommen.

Ihr könnt den Sound Visualizer direkt hier auf der Seite starten. Am besten aber folgt ihr dem Link hier und öffnet das Ganze in einem neuen Browser Fenster.