SVG 3D Tag Cloud jQuery Plugin V2

Nach diversen Anfragen gibt es nun ein Update für das SVG 3D Tag Cloud jQuery Plugin.
In der Version 2 gibt es nun die Möglichkeit anstelle von Texten Bilder zu laden. Und, was auch schon häufiger angefragt worden ist, ihr könnt euch zu jedem Bild/Text auch einen Tooltip anzeigen lassen.
Die alte und die neue Version sind soweit kompatibel, weshalb ihr mit der neuen JS-Datei einfach die alte überschreiben könnt. Und das ohne die Funktionalität zu zerstören.
Hier ein Beispiel mit Bildern und Tooltips:



So setzt man nach wie vor Tags mit Text:

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' }

];

Wollt ihr nun Bilder anstelle von Text anzeigen, dann sieht das wie folgt aus:

var entries = [ 

    { image: './img/Basket.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' },
    { image: './img/Briefcase.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' },
    { image: './img/Brush.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' },
    { image: './img/Calendar.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' },
    { image: './img/Camera.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' },
    { image: './img/Cassette.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' },
    { image: './img/Clock.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' },
    { image: './img/Cloud_Download.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' },
    { image: './img/Cloud_Upload.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' },
    { image: './img/Coffee.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' },
    { image: './img/Comments.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' },
    { image: './img/Credit_Card.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top' }

];

Ihr ersetzt einfach nur den Paramter label mit dem Parameter image. Bei image gebt ihr den Pfad und den Dateinamen zu der gewünschten Grafik ein. Neben dem neuen Parameter image gibt es noch die neuen Parameter width und height, mit denen ihr die anzuzeigende Größe von eurer Grafik mit angeben müsst.

Und wenn ihr jetzt noch Tooltips dazu haben wollt schaut euch das Beispiel hier an:

var entries = [ 

    { image: './img/Basket.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Lorem ipsum' },
    { image: './img/Briefcase.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Dolor sit amet' },
    { image: './img/Brush.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Consetetur sadipscing' },
    { image: './img/Calendar.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Sed diam' },
    { image: './img/Camera.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'At vero' },
    { image: './img/Cassette.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Nonumy eirmod' },
    { image: './img/Clock.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Stet clita' },
    { image: './img/Cloud_Download.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Justo duo' },
    { image: './img/Cloud_Upload.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Ut wisi enim' },
    { image: './img/Coffee.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Minim veniam' },
    { image: './img/Comments.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Quis nostrud' },
    { image: './img/Credit_Card.png', width: '50', height: '50', url: 'http://jquery-plugins.net/', target: '_top', tooltip: 'Exerci tation' },

 ];

Ihr könnt ganz einfach den Parameter tooltip hinzufügen mit einem String der dann als Tooltip angezeigt werden soll.

Natürlich könnt ihr auch Text-Tags mit Tooltips kombinieren:

var entries = [ 
                
    { label: 'Dev Blog', url: 'http://niklasknaack.blogspot.de/', target: '_top', tooltip: 'Lorem ipsum' },
    { label: 'Flashforum', url: 'http://www.flashforum.de/', target: '_top', tooltip: 'Dolor sit amet' },
    { label: 'jQueryScript.net', url: 'http://www.jqueryscript.net/', target: '_top', tooltip: 'Consetetur sadipscing' },
    { label: 'Javascript-Forum', url: 'http://forum.jswelt.de/', target: '_top', tooltip: 'Sed diam' },
    { label: 'JSFiddle', url: 'https://jsfiddle.net/user/NiklasKnaack/fiddles/', target: '_top' },
    { label: 'CodePen', url: 'http://codepen.io/', target: '_top', tooltip: 'At vero' },
    { label: 'three.js', url: 'http://threejs.org/', target: '_top', tooltip: 'Nonumy eirmod' },
    { label: 'WebGLStudio.js', url: 'http://webglstudio.org/', target: '_top', tooltip: 'Stet clita' },
    { label: 'JS Compress', url: 'http://jscompress.com/', target: '_top', tooltip: 'Justo duo' },
    { label: 'TinyPNG', url: 'https://tinypng.com/', target: '_top', tooltip: 'Ut wisi enim' }

 ];

Wie schon in der alten Version müsst ihr das erzeugte entries Objekt mit an das settings Objekt übergeben. Beim settings Objekt sind ein paar optionale Parameter hinzugekommen. Hier eine Auflistung aller möglichen Parameter inklusive dem entries Objekt:

var settings = {

    entries: entries,
    width: 480,
    height: 480,
    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: '15',
    fontColor: '#fff',
    fontWeight: 'normal',
    fontStyle: 'normal',
    fontStretch: 'normal',
    fontToUpperCase: true,
    tooltipFontFamily: 'Oswald, Arial, sans-serif',
    tooltipFontSize: '11',
    tooltipFontColor: '#fff',
    tooltipFontWeight: 'normal',
    tooltipFontStyle: 'normal',
    tooltipFontStretch: 'normal',
    tooltipFontToUpperCase: false,
    tooltipTextAnchor: 'middle',//left, right
    tooltipDiffX: 0,
    tooltipDiffY: 20

};

Die frisch hinzugekommenen tooltipFont Parameter sind selbsterklärend. Mit tooltipTextAnchor gebt ihr an wie sich euer Tooltipp im Verhältnis zum Tag ausrichten soll. Bei Grafik-Tags empfiehlt sich 'left' und bei Text-Tags 'middle'. Mit tooltipDiffX und tooltipDiffY könnt ihr den Abstand zum Tag bestimmen.

Alles andere bleibt wie gehabt in der alten Version.
Schaut bei Fragen bitte erst in den alten Blogeintrag, da hier eine recht ausführliche Dokumentation mit enthalten ist. Ansonsten freue ich mich wie immer über Feedback und/oder Kommentare.
Zum Download gibt es wieder eine standard JS und auch eine minifizierte JS.

Bei Bedarf könnt ihr euch auch die Beispielseiten anschauen: Example 1, Example 2, Example 3 und Example 4.

Die hier in den Beispielen verwendeten Bilder/Icons sind von der Seite Smashing Magazine.

Update

GitHub
Das Projekt gibt es nun auch auf GitHub. Und hier geht´s zum GitHub Repository. Ihr findet hier immer die aktuelle Version und weitere Tutorials sowie Links.

JSFiddle
Hier ein weiteres Beispiel, das ihr direkt in JSFiddle betrachten und bearbeiten könnt.

Sublime Text 3 toggle comment command doesn't work in Windows

Ein großes Ärgernis beim Arbeiten mit Sublime Text unter Windows ist das Problem, dass diverse Standard-Tastenkombinationen nicht funktionieren.
Mich hat besonders genervt, dass man Codezeilen, oder ganze Codeblöcke, nicht mit einer einfachen Tastenkombination auskommentieren kann. Schaut man in die Dokumentation, dann gibt es dafür Tastenkombinationen. Allerdings funktionieren diese nicht unter Windows.
Nach einer kleinen Recherche habe ich eine Lösung gefunden die wunderbar funktioniert und die ich an dieser Stelle mit euch teilen möchte. Wenn ihr auch mit ctrl + / bzw. mit deutscher Tastatur mit strg + / keine Codezeilen auskommentieren könnt, dann versucht auch mal folgendes.
Geht in Sublime Text im Menu auf den Punkt „Preferences“ und dort auf „Key Bindings“. Jetzt sollte sich ein neues Fenster öffnen das in etwa so aussieht wie dieses hier:

Hier findet ihr auch auf der linken Seite in dem Fenster (Default) die Standard-Tastenkombination für das togglen um Codezeilen ein-, bzw. auskommentieren zu können.

{ "keys": ["ctrl+/"], "command": "toggle_comment", "args": { "block": false } },
{ "keys": ["ctrl+shift+/"], "command": "toggle_comment", "args": { "block": true } },

Auf der rechten Seite im Fenster (User) müsst ihr nun ein paar Zeilen einfügen, und schon ist das Problem behoben. Setzt hier einfach diesen Schnipsel ein und speichert ab:

{ "keys": ["ctrl+7"], "command": "toggle_comment", "args": { "block": false } },
{ "keys": ["ctrl+shift+7"], "command": "toggle_comment", "args": { "block": true } }  

Das Ganze sollte jetzt so aussehen:

Geht zurück zu euerm Projekt und versucht erneut die Tastenkombination aus. Jetzt sollte es keine Probleme mehr geben und ihr könnt bequem per Tastenkombinationen (strg + /) togglen.

Warp drive jQuery plugin

Wieder ein neues jQuery Plugin. Die Idee kam mir beim refaktorieren eines Header Experiments, das ich so auch bereits bei CodePen veröffentlicht hatte. Die Idee ist einfach. Jeder sollte die Möglichkeit bekommen so ein Sternenfeld, bzw. Warp drive in seine Seite einbinden zu können. Sei es als Seitenhintergrund oder als interaktive Animation unter einem Div.
Und so entstand dieses jQuery Plugin. Im Gegensatz zu der alten Version auf CodePen habe ich für das Plugin einige Optimierungen umgesetzt. So kann man jetzt unter anderem Farben auswählen und Geschwindigkeiten anpassen. Dazu gibt es einen autoResize-Modus und zahlreiche Parameter über die sich das Plugin individualisieren lässt.
Ich gehe an dieser Stelle nur sehr kurz auf die Technik ein.
Zum Einsatz kommen das Canvas Element und JavaScript. Dadurch sollte sichergestellt sein, dass auch ältere Browser in der Lage sind diesen Effekt darstellen zu können. Mit 4 KB im Zip-Format ist das Plugin recht schlank geworden. So entstehen keine langen Ladezeiten und euer Traffic geht nicht durch die Decke.
Wie bei meinen anderen jQuery Plugins könnt ihr diesen Effekt aber auch ohne jQuery auf eure Elemente anwenden.
Ich zeige euch erst ein paar Beispiele (Zu jedem Beispiel könnt ihr euch den Code anschauen). Danach gibt es die Download Links und die Links zum GitHub Repository, wo es zusätzlich zu den Beispielen weitere Links und Erklärungen gibt, wie ihr den Effekt einbinden und mit optionalen Parametern individualisieren könnt.

Beispiel 1:
view source

Beispiel 2:
view source

Beispiel 3:
view source

Beispiel 4:
view source

Beispiel 5:
view source

Beispiel 6:


Downloads
 
Bleibt mir nur noch euch viel Spaß zu wünschen und die Download Links anzubieten. Die jquery.warpdrive.min.js, wie hier in den Beispielen verwendet. Die jquery.warpdrive.js, falls ihr am Code interessiert seid und die jquery.warpdrive.min.js.zip als Zip.



GitHub

Und hier geht´s zum GitHub Repository. Hier findet ihr immer die aktuelle Version und weitere Tutorials sowie Links.
Wie immer gilt: Falls ihr Fragen oder Anregungen habt, dann hinterlasst einfach einen Kommentar oder schreibt mich an. 

T800 Terminator Genisys particles experiment

Mit diesem Experiment will ich ein Stück weit die Grenzen des Machbaren ausreizen. Gezeichnet werden die Pixel direkt in die Canvas. Keine extra 3D Engine, bzw. Bibliothek ist hier sonst im Einsatz. Und auch kein WebGL. Somit verzichte ich hierbei ganz bewusst auf Hardwarebeschleunigung.
Auf einem Desktop-Rechner werden die knapp über 130.000 Partikel trotzdem sauber mit 60 FPS berechnet.
Als Model habe ich mich in diesem Fall für das „T800 Terminator Genisys“ Model von Machina Corp. entschieden. Der Grund dafür ist ganz einfach. Möglichst viele Details.
Ich habe das Model in Blender bearbeitet und dann als DAE exportiert. Aus dieser 16MB großen DAE habe ich dann die Werte für die Koordinaten vom Mesh kopiert und dann minifiziert in eine TXT-Datei eingefügt. Auf diese Weise konnte ich das Datenvolumen auf 2MB reduzieren.
Mit jQuery wird dann die so erzeugte TXT geladen und die Daten mit den Koordinaten von einem String in ein Array umgewandelt. Die jetzt folgenden Schritte basieren dann im Prinzip nur noch auf meinen älteren Experimenten.
Eigentlich wollte ich nur mal schauen wieviel Partikel ich im dreidimensionalen Raum auf einmal darstellen/berechnen kann bei akzeptabler Performance. Und hier gibt’s das Ergebnis:
  Für den Fall das ihr das Experiment in einem extra Browser Tab anschauen wollt könnt ihr einfach hier klicken.

SVG 3D Viewer

SVG befinden sich auf dem Vormarsch und damit verbunden viele neue und interessante Entwicklungen. 
Das auf XML basierende Format ist nicht nur für Gestalter und Kreative sehr interessant, sondern auch für Entwickler.
Da man über die XML-Struktur direkten Zugriff auf die Inhalte bekommt, kann man Elemente des SVG-DOM mit Hilfe eingebetteter Scriptsprachen wie JavaScript manipulieren. Auf diese Weise kann eine statische SVG dynamisiert werden und z.B. bestimmte Koordinaten animiert/verändert werden. So kann man unter anderem das Path-Element im SVG manipulieren, das für die Darstellung so gut wie aller Grafikelemente in einem SVG verantwortlich sein kann. Genauso ist es möglich Farbwerte auszulesen und abzuändern. Und ebenso ist es möglich auf diese Weise online einen Editor für SVG zur Verfügung zu stellen, der nur auf JavaScript basiert.
 
Und genau hier greift meine Idee die Koordinaten der Pfade einer SVG auszulesen, bzw. zu parsen, diese in pseudo 3D umzurechnen, die der User dann in Echtzeit manipulieren kann und dann im Anschluss wieder in 2D zurückumgewandelt als SVG ausgeben zu lassen.
Klingt etwas sperrig, aber im Prinzip ist es ganz einfach. Der User kann eine SVG laden und diese dann im dreidimensionalen Raum rotieren und skalieren. Zusätzlich hat der User noch Einfluss auf die im SVG verwendeten Farben. Als Gimmick kann das so vom User manipulierte SVG abgespeichert (Bei den Einstellungen unter „Open Controls“ zu finden) und dann problemlos für andere Zwecke weiterverwendet werden.

(Original SVG File)

Der SVG 3D Viewer ist noch im absoluten Experimentierstadium. So werden aktuell keine Farbverläufe unterstützt. Ebenso kommt es zu Problemen, wenn die Maße der SVG größer sind als die Fläche (480x480px) des Viewers selbst. Besonders detailreiche SVG bringen den Viewer noch an seine Grenzen und lassen die Performance einbrechen.

Im folgenden Screenshot der Browser-Konsole sieht man die neu berechneten Koordinaten im Path-Element einer dynamisch geladenen SVG: 

Das Parsen der SVG ist mit dem SVG Path Parser von Jake Rosoman realisiert.
Die hier gezeigten SVG-Logos sind bis auf 2 Ausnahmen Eigenproduktionen. Das Logo zu Beginn ist das Firmenlogo von anyMOTION GRAPHICS. Das zweite Logo das nicht von mir stammt ist das offizielle Logo von Fortuna Düsseldorf.