Tag: inspiration
BananaBread: 3D-Ego-Shooter auf WebGL-Basis
Dass WebGL eine vielversprechende Technologie darstellt, zeigen schon seit geraumer Zeit die Demos von Three.js, die inzwischen einige interessante Effekte aufzeigen, die durch OpenGL ermöglicht werden (Shader, Bump-Maps, Normal Mapping, usw.). Einen ersten 3D-Ego-Shooter, der Gerbrauch von WebGL und der Sauerbraten-Engine (Cube 2) macht, stellt BananaBread dar. Das Projekt ist in C++ und OpenGL entwickelt worden und wird durch den LLVM-Compiler Emscripten in JavaScript und WebGL übersetzt.
Das Spiel lässt sich in gewohnter Manier mit den Tasten W, A, S, D und der Maus steuern. Es gibt verschiedene Waffen und Levels, in denen der Spieler gegen Bots antreten kann. Es wurde sogar eine Third-Person-Ansicht integriert, die über die Taste 9 aktiviert werden kann. Die beiden Entwickler Alon Zakai und Ehsan Akhgari von Mozilla möchten mit dem Projekt zeigen, was mit WebGL und modernen Webbrowsern möglich ist.
FightCode: Kampf der JavaScript-Roboter durch GitHub
Dass GitHub nicht nur zum Verwalten von Quellcode genutzt werden kann, zeigt ein aktuelles Projekt, das im Rahmen der "GitHub Game Off" entwickelt wurde. Das Projekt FightCode stellt ein "GitHub-Spiel" dar, das Gebrauch von GitHub-Bereichen (Forking, Pushing) macht, um Spieler gegeneinander antreten zu lassen. Bei dem Spiel geht es darum, einen virtuellen Roboter per JavaScript zu steuern, um damit einen Rivalen besiegen zu können. Die Darstellung erfolgt über HTML5-Canvas.
Ein Roboter kann über eine spezielle API gesteuert werden, bei der verschiedene Ereignisse zur Verfügung stehen. So kann beispielsweise gesteuert werden, wenn der Roboter eine Wand berührt, einen Gegner sichtet oder getroffen wurde. Die Besonderheit liegt darin, dass bei der Entwicklung des Roboters im Vorschau-Modus lediglich ein Beispiel-Roboter geladen wird, gegen den der eigene Roboter antreten kann. Es ist also immer ungewiss, wie der Roboter des anderen Spielers programmiert ist, da beide Entwickler nur auf vordefinierte Ereignisse reagieren können. So bleibt es eine Überraschung, wie der Kampf gegen einen Rivalen letztendlich ausgehen wird.
Wer eigene Roboter erstellen möchte und gegen andere Spieler antreten will, benötigt lediglich einen GitHub-Account. Auf der Website findet sich nach dem Einloggen eine API-Dokumentation, die alle verfügbaren Befehle erläutert.
FloraJS: Simulation von natürlichen Systemen
Intelligente Comptersimulationen sind nicht zwingend an komplexe Programmiersprachen genküpft, sondern lassen sich durchaus auch im Webbrowser darstellen. Das Simulieren von künstlichen Verhaltensweisen innerhalb eines Ökosystems ist ein umfangreiches Themengebiet, zu dem es unterschiedliche Quellen gibt. Eine grafische Umsetzung in JavaScript, die mit der Entwicklung eines Frameworks verbunden war, wäre FloraJS. Der Entwickler Vince Allen zeigt auf seiner Seite Umsetzungen von verschiedenen natürlichen Systemen, die auf Ideen eines Buches basieren.
Grundsätzlich geht es um grafische Objekte, die an unterschiedliche Verhaltensweisen geknüpft sind und sogenannte "Vehikel" repräsentieren. Ein Vehikel bewegt sich also innerhalb einer simulierten Umgebung und erkundet diese auf eine eigene Weise.
Bei FloraJS selbst handelt es sich um ein kleines JavaScript-Framework, mit dem solche natürlichen Systeme umgesetzt werden können. Auf dieser Seite finden sich diverse Beispiele, welche den Einsatz der Bibliothek sehr gut veranschaulichen. Die eigentliche Darstellung und Animation wird über HTML5/Canvas erreicht.
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.
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.
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.
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.
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.
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.
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.
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.
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 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.