Tag: inspiration

Peoplemov.in: Visualisierung von Wanderungsströmen

Zwar noch aus dem letzten Jahr, aber dennoch interessant, ist das experimentelle Projekt Peoplemov.in von Carlo Zapponi: Bei der Seite handelt es sich um eine interaktive Visualisierung, welche die weltweiten Ein- und Auswanderungen darstellt und erforschbar macht. Das riesige Flussdiagramm, das auf offenen Daten der World Bank basiert, wurde anfangs mit SVG umgesetzt. Allerdings stellte der Entwickler bald fest, dass sich derartig komplexe Grafiken nicht effektiv mit SVG darstellen lassen und wechselte schließlich zu HTML5 und Canvas.

Entstanden ist eine anschauliche Darstellung von Graphen, welche die Einwohnerzahl verschiedener Länder sowie deren Ein- und Auswanderer repräsentieren. Während auf der linken Seite des Diagramms die Auswanderungen angesehen werden können, finden sich auf der rechten Seite die Einwanderer, die ebenfalls nach Land sortiert sind. Die Zahlen stammen aus dem Jahr 2010, weshalb die Visualisierung nicht mehr ganz aktuell ist. Dennoch zeigt das Projekt die Möglichkeiten von HTML5 und Carlo Zapponi plant zudem, das Toolkit zu veröffentlichen, mit dem er das Ganze realisiert hat.

Shader Toy: Interaktive Beispiele für WebGL-Shader

WebGL steckt inzwischen nicht mehr in den Kinderschuhen, sondern erfreut sich immer mehr Akzeptanz. Frameworks, Tutorials und diverse Projekte zeigen schon heute, was mit dem Webstandard möglich ist. Und dennoch gibt es auch ältere Projekte, die schon mit den experimentellen Versionen von WebGL beeindruckende Effekte aufgezeigt haben. Dazu zählt etwa das Shader Toy von Iñigo Quilez, mit dem sich 43 vordefinierte Shader ausprobieren und verändern lassen.

Bei einem Shader handelt es sich um ein Programm, das durch GLSL (OpenGL Shading Language) Anweisungen an die Grafikkarte übermitteln kann. Damit wird also die GPU direkt angesprochen und hier liegt der eigentliche Vorteil, denn erst dadurch wird Hardwarebeschleunigung möglich. Im Bezug auf WebGL wird dies durch HTML5 bzw. "canvas.getContext('webgl')" realisiert: GLSL-Befehle (so auch die Hauptfunktion "void main()") können an einen Vertex- und einen Fragment-Prozessor übergeben werden, die dann entweder einzelne Eckpunkte (Vertices) oder Fragmente (Pixel) gezielt verändern können. Das Shader Toy macht genau davon Gebrauch und bietet verschiedene Shader, die sowohl zwei- als auch dreidimensional eingesetzt werden können. Die Shader werden als Fragment-Shader ausgeführt, da sie nur Pixel-Transformationen durchführen. Ein Blick auf die anderen Anwendungen und Projekte von Iñigo Quilez lohnt sich, da er sehr interessante Anwendungen in diesem Bereich entwickelt hat.

Mozilla Popcorn: HTML5-Videos interaktiv machen

Seit Anwendungen wie Adobe Edge oder Radi ist die Bearbeitung von HTML5-Videos sehr komfortabel geworden. Auch bei Mozilla werden in diesem Bereich interessante Projekte entwickelt, die zukunftsweisend sein könnten. Ein Projekt, das kürzlich in verschiedenen Varianten veröffentlicht wurde, stellt Popcorn dar: Dazu gehört zum einen der Popcorn Maker, der als eine grafische Webanwendung für das Erstellen von interaktiven HTML5-Videos zu verstehen ist. Damit lassen sich Videos in entsprechenden Formaten (WebM, OGV, MP4) mit verschiedenen Elementen (Texte, Bilder, etc.) versehen, ohne dass dabei Code geschrieben werden muss. Die Bearbeitung mit dem Werkzeug ähnelt einem klassischen Video-Editor und ist sehr intuitiv. Angetrieben wird der Popcorn Maker von "Butter.js", einer separaten JavaScript-Bibliothek von Mozilla, die unter Anderem eine Timeline und Live-Previews bietet.

Den anderen Teil des Popcorn-Projekts stellt das JavaScript-Framework Popcorn.js dar, mit dem sich Videos sehr einfach mit HTML-Elementen versehen und erweitern lassen. Zudem bietet das Framework eine Plugin-Schnittstelle, so dass auch sehr leicht Erweiterungen geschrieben werden können. Im Blog-Eintrag von Mozilla finden sich weitere Informationen und Details zum Projekt.

WebGL Water: Fallstudie über Wasser und Reflektionen

Erst kürzlich beeindruckte Evan Wallace mit seiner Web-Anwendung WebGL Filter, mit der sich per HTML5 diverse Effekte auf Bilder anwenden lassen. Nun hat der Entwickler ein zweites Projekt veröffentlicht, das als weitere Fallstudie für WebGL angesehen werden kann: Sein Experiment "WebGL Water" zeigt eine simple 3D-Szene, die Gebrauch von Raytracing, Ambient Occlusion, Soft Shadows, Height-Maps und Kaustik macht.

In dem Beispiel befindet sich eine Sphäre in einem Behälter, der mit Wasser gefüllt ist. Per Tastatur können Gravitation und Lichter verändert werden und sobald die Kugel auf der Wasseroberfläche auftritt, entstehen entsprechende Wellen und Deformationen. Das Experiment ist sehr gelungen, allerdings wird die Grafikkarte auch gefordert, weshalb beim Betrachten des Beispiels eventuell etwas Geduld gefordert ist.

jQuery Timelinr: Plugin für interaktive Zeitstrahlen

Um besondere Ereignisse oder den Verlauf eines Projekts visuell darzustellen, eignen sich Zeitstrahlen sehr gut. Besonders interaktive Timelines erfreuen sich immer größerer Beliebtheit. Mit jQuery lässt sich ein solches Widget gut umsetzen und genau darum handelt es sich bei jQuery Timelinr von CSSLab. Mit dem Plugin können sowohl vertikale als auch horizontale Zeitstrahlen erstellt und mit Interaktionen versehen werden.

Das Plugin bietet eine Autoplay-Funktion und blendet die verschiedenen Zeitabschnitte bzw. Ereignisse durch unterschiedliche Effekte ein. Innerhalb eines Zeitabschnitts kann über die Jahreszahlen oder alternative Schaltflächen navigiert werden. Die Effekte, die Dauer sowie Navigationsmöglichkeiten lassen sich über die Optionen des Skripts einstellen. Die horizontale Beispiel-Version eines Zeitstrahls findet sich auf dieser Seite.

SpryMap: Widget für Click-and-Drag-Funktionalität

Schon etwas älter, aber immer noch interessant dürfte das JavaScript-Widget SpryMap sein, mit dem sich ein beliebiges DOM-Element mit einer Click-and-Drag-Funktionalität (ähnlich wie in Google Maps) belegen lässt. Eine solche Funktionalität eignet sich besonders gut für größere Grafiken (wie etwa Karten oder detaillierte Abbildungen), die mit einer Interaktion verknüpft werden sollen.

SpryMap bietet verschiedene Optionen, die ähnlich wie bei einem jQuery-Plugin beim Aufruf des Skripts als Parameter übergeben werden können:

• var map = new SpryMap({
• id : "",
• width: 800,
• height: 800,
• startX: 0,
• startY: 0,
• scrolling: true,
• scrollTime: 300,
• lockEdges: true,
• cssClass: ""
• });

Eine Demo von SpryMap findet sich auf dieser Seite. Das Skript kann auf der Website des Entwicklers heruntergeladen werden und beträgt gerade einmal 2,8 KB.

The Heads-Up Grid: Responsives Raster einblenden

Mit Hashgrid steht bereits ein nützliches jQuery-Plugin zur Verfügung, mit dem sich dynamisch ein Raster auf der gewünschten Website einblenden lässt. Ähnlich arbeitet auch das Heads-Up Grid, das noch etwas besser angepasst werden kann und zudem für responsive Layouts eingesetzt werden kann.

In den Optionen des Skripts können diverse Einstellungen vorgenommen werden, darunter die Breite des kompletten Rastersystems, die Anzahl der Spalten, die Breite der Spalten oder die Breite der Zwischenräume. Eine Beispiel-Konfiguration kann so aussehen:

• pageUnits = "px";
• colUnits = "px";
• pagewidth = 960;
• columns = 6;
• columnwidth = 140;
• gutterwidth = 24;
• pagetopmargin = 35;
• rowheight = 20;
• makehugrid();

Ein responsives Raster wird mithilfe von "$(window).width()" erzeugt und je nach Breite des Browserfensters werden andere Einstellungen geladen. Das Plugin lässt sich über eine Schaltfläche ganz bequem ein- und ausschalten und blendet zudem ein Grundlinienraster ein, das bei der Layout-Gestaltung sehr hilfreich sein kann.

Slicebox: jQuery Image Slider mit CSS3-3D-Effekten

Sie heißen Slideshows, Image Slider oder Carousels: Skripte, mit denen sich interaktiv Bilderreihen ansehen und durchblättern lassen, gibt es mittlerweile mehr als genug. Daher überzeugen aktuelle Projekte dieser Art wie der Flux Slider mit neuartigen Effekten und Übergängen (Transitions).
Ein weiterer Image Slider, der in Form eines jQuery-Plugins vorliegt und mit CSS3-3D-Effekten überrascht, ist die Slicebox von Codrops: Das Skript ist ein sehr gutes Beispiel dafür, wofür sich CSS3 einsetzen lässt.

Die Transformationen sind so angelegt, dass ein virtueller Quader in einzelne Streifen aufgeteilt und anschließend um 90° gedreht wird. Das erscheinende Bild hängt dadurch mit der aktuell gezeigten Grafik zusammen. Betrachten lässt sich die Animation auf der Demo-Seite.
Die Bilder müssen für den Image Slider als img-Elemente innerhalb eines Containers (div) angelegt sein. Ein Beispiel mit allen möglichen Optionen:

• $("#sb-slider").slicebox({
• orientation: "v",
• perspective: 1200,
• slicesCount: 5,
• disperseFactor: 0,
• colorHiddenSides: "#222",
• sequentialRotation: false,
• sequentialFactor: 0,
• speed3d: 800,
• speed: 600,
• fallbackEasing: "easeOutExpo",
• slideshow: false,
• slideshowTime: 2000
• });

Aktuell funktionieren die CSS3-3D-Transformationen lediglich in Google Chrome und Safari. In anderen Browsern kommt ein Fallback zum Tragen, das auch ohne 3D-Effekte eine gute Figur macht.