Tag: inspiration

201212Nov

The Nature of Code: eBook über Physik und Processing

Die Programmierung von grafischen Anwendungen und interaktiven Animationen erfordert ein gewisses Verständnis für die Grundlagen der Mathematik bzw. Physik. Diese lassen sich in diversen Tutorials aneignen und ausprobieren, wobei die Umsetzung natürlich nicht unbedingt einfacher wird. Wer sich für diese Thematik im Zusammenhang mit der Entwicklungsumgebung Processing interessiert, kann sich das online verfügbare eBook "The Nature of Code" ansehen.

The Nature of Code

In dem umfangreichen Werk von Daniel Shiffman werden Themen wie Vektoren, Kräfte, Schwingungen, Partikelsysteme, Physik-Bibliotheken, Fraktale oder neurale Netzwerke behandelt und anhand von ausführlichen Texten, Zeichnungen und Code-Beispielen unterstützt. Der Autor beginnt auf einer einfachen Ebene und beleuchtet die unterschiedlichen Bereiche sehr gewissenhaft, so dass die Materie gut verständlich ist. Das eBook ist auch für Entwickler interessant, die nicht mit Processing arbeiten möchten, da sich das Wissen auch auf andere Sprachen anwenden lässt, wenn ein paar Anpassungen vorgenommen werden.

201213Sep

Avgrund: CSS3-Konzept für modales Dialogfeld

Auf der Seite des schwedischen Webentwicklers Hakim El Hattab finden sich immer wieder interessante Projekte: Neben dem HTML5-Präsentationstool Reveal.js findet sich dort auch ein CSS3-Konzept für ein modales Dialogfeld, das den Namen Avgrund trägt.

Avgrund - A modal UI concept

Beim Klick auf eine entsprechenden Schaltfläche der Demo-Seite wird die komplette Seitenfläche abgedunkelt in den Hintergrund versetzt und mit einem Unschärfe-Effekt versehen (nur WebKit). Die Dialogbox wird zeitgleich eingeblendet und hebt sich durch die Effekte stärker vom Vordergrund ab. Das Konzept ähnelt etwas dem "Mission Control"-Modul von Mac OS X, was in diesem Fall der Benutzerfreundlichkeit zugutekommt.
Aktuell findet sich ein weiteres Projekt auf der Seite von Hakim, das ein HTML5-Canvas-Experiment darstellt.

201227Aug

oriDomi: DOM-Elemente mit CSS3 falten

Mit CSS3 eröffnen sich gerade durch die perspektivischen Transformationen interessante Möglichkeiten. DOM-Elemente können dadurch räumlicher dargestellt und animiert werden. Ein schönes Anwendungsbeispiel dafür ist das Skript oriDomi, mit dem sich Elemente virtuell falten lassen. Dabei können verschiedene Richtungen und die Perspektive definiert werden.

oriDomi - Fold up the DOM like paper

Weiterhin lassen sich die Anzahl der horizontalen und vertikalen Unterteilungen sowie die Geschwindigkeit anpassen. Ein Code-Beispiel:

  • var $domi = $('.my-div').oriDomi({ vPanels: 3, hPanels: 10, perspective: 200, speed: 500, shading: false });
  • $domi.oriDomi('accordion', -30, 'right');

Das Skript ist nicht von einem Framework abhängig, kann aber bei Bedarf zusammen mit jQuery eingesetzt werden. Wem der Effekt gefällt, der kann sich bei GitHub den Quellcode ansehen.

201227Mär

CSS3D Clouds: Studie über animierte Wolken mit CSS

Die Erzeugung von volumetrischen Wolken zählt hauptsächlich zum Bereich der Spieleentwicklung. Dort gibt es verschiedene Möglichkeiten, um realistisch wirkende Wolken darzustellen. Im Webbrowser hat Mr.doob bereits ein Beispiel auf WebGL-Basis entwickelt, das schon in ROME eingesetzt wurde. Ganz ohne WebGL und nur durch den Einsatz von CSS3D-Transformationen kommt dieses Experiment von Jaume Sánchez aus.

CSS3D Clouds

Im Endeffekt ähnelt das Beispiel der WebGL-Umsetzung von Mr.doob: Es werden einfach zweidimensionale Flächen (Sprites) mit Texturen belegt und durch Verzerrungen im Raum angeordnet. Durch die geschickte Kombination von verschiedenen Texturen entstehen derartige Wolken-Bilder. Das CSS-Beispiel erlaubt zudem, Explosionen und Rauch hinzuzufügen. Der Effekt ist sehr anschaulich und demonstriert, was sich mit relativ wenig Aufwand darstellen lässt.

201208Feb

Mobile UI Patterns: Beispiele für mobile Anwendungen

Inspirationsquellen werden im Bereich des Webdesigns immer wichtiger, da hier stetig neue Trends entstehen. Seiten wie Pattern Tap, Design Meltdown oder MephoBox leisten hier sehr gute Dienste. Wer auch Inspirationen für mobile Anwendungen sucht, ist nun auch mit den Mobile UI Patterns gut bedient: Hier finden sich seit kurzem diverse Screenshots von iPhone-Anwendungen, die in unterschiedliche Kategorien eingeteilt sind.

Mobile UI Patterns

Mobile UI Patterns stellt eine sehr einfache Sammlung ohne besondere Such- oder Filtermöglichkeiten dar. Elemente können durch Kategorien angesehen werden — dazu zählen beispielsweise "Activity Feeds", "Dashboard Navigation", "Grouped Table Views" oder "Custom Tab Navigation".
Die Sammlung ist derzeit noch recht übersichtlich, dürfte aber mit der Zeit wachsen und gehört daher in die Lesezeichen.

201206Feb

ThreeNodes.js: Modulares Node-System für WebGL

Wer grafisch aufwendige Echtzeit-Visualisierungen mit 3D-Szenen realisieren will, ohne dabei Code schreiben zu müssen, greift auf ein Toolkit wie vvvv (v4) zurück: Durch das Verbinden von Knotenpunkten (Nodes) können Effekte aller Art erzeugt werden. Derartige Node-Systeme finden ihre Anwendung eigentlich in komplexen Video- und VFX-Applikationen wie Fusion oder den Compositing-Tools von Autodesk. Aber auch die Textur-Software Filter Forge basiert auf dem Modell der Knotenpunkte.
Mit vvvv lassen sich wie gesagt Echtzeit-Animationen auf 3D-Ebene erstellen und seit geraumer Zeit ist auch eine JavaScript-Portierung vorhanden. Eine weitere Anwendung dieser Gattung, die zudem von WebGL und Three.js Gebrauch macht, stellt ThreeNodes.js dar.

ThreeNodes.js

Die Webanwendung funktioniert ähnlich wie vvvv und erlaubt es, 3D-Animationen durch das Verbinden von Nodes zu erzeugen und in Echtzeit zu verändern. Eine Live-Demo gibt es auf dieser Seite, wobei es sich hierbei noch um eine Alpha-Version handelt. Da durch WebGL die Grafikkarte direkt angesprochen wird, kann es durchaus vorkommen, dass aufgrund intensiver Rechenoperationen der Browser einfrieren kann. Effekte sollten also mit Bedacht ausgeführt werden.
Dennoch stellt das ThreeNodes-Projekt einen interessanten Ansatz dar, um auch ohne Programmierkenntnisse 3D-Szenen mit WebGL zu erstellen und auszuprobieren.

201204Jan

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.

peoplemovin - A visualization of migration flows

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.

201111Dez

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.

Shader Toy

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.