Tag: inspiration

201419Aug

PlayCanvas: WebGL-Game-Engine für HTML5/JS-Games

Auch wenn sich in Sachen JavaScript-3D-Engines THREE.js inzwischen zum Platzhirsch gemausert haben dürfte, kann es nicht schaden, Alternativen auszuprobieren. Die im April 2011 gestartete WebGL-Game-Engine PlayCanvas ist Mitte diesen Jahres bei GitHub als Open-Source-Projekt unter der MIT-Lizenz veröffentlicht worden. Im Gegensatz zu THREE.js kommt PlayCanvas gleich noch mit einer integrierten Physik-Engine, mit der sich Rigid Bodies, Joints und auch Fahrzeuge umsetzen lassen.

PlayCanvas - 3D HTML5 Game Engine

Natürlich sind auch die Grundfunktionalitäten einer Game-Engine in PlayCanvas vertreten: 3D-Model Loading, Shadow Mapping, Post-Effekte, Keyframes, Skeletal Blending, Skinning, Audio-Integration sowie Support für sämtliche Eingabegeräte (Maus, Tastatur, Touch, Gamepad, Leap Motion) sind in PlayCanvas integriert. Weiterhin steht ein Entity-Component-System zur Verfügung, mit dem sich im Szenengraph sehr leicht Objekte hinzufügen lassen. Ein Beispiel:

  • var game = new pc.fw.Application(canvas, {});
  • game.start();
  •  
  • var cube = new pc.fw.Entity();
  • game.context.systems.model.addComponent(cube, {
  • type: "box"
  • });
  •  
  • game.context.root.addChild(cube);

Weiterhin steht mit dem "PlayCanvas Designer" ein Echtzeit-Editor zur Verfügung, in den 3D-Modelle per Drag 'n' Drop importiert werden können und auch Änderungen in einem kollaborativen Projekt direkt für andere Teilnehmer sichtbar werden.
Demos von bestehenden PlayCanvas-Projekten finden sich hier.

201302Nov

Webdesign: Sammlung mit über 4000 Foto-Texturen

Viele moderne Websites überzeugen durch ein gut abgestimmtes Design, das in der Regel mit feinen Texturen und Mustern aufgewertet wird. Obwohl das "Flat-Design" durch Windows 8 und iOS 7 im Trend liegt, besteht hier die Gefahr, in der Masse unterzugehen. Daher sollten immer Muster oder Foto-Hintergründe in Betracht gezogen werden: Wenn eine Textur auch nur dezent im Hintergrund zu sehen ist, so macht dies einen großen Unterschied zu einer farbigen Fläche oder einem Farbverlauf. Umso wichtiger ist eine große Auswahl an verschiedenen Foto-Texturen, die im Netz zwar vertreten, aber nicht immer leicht zu finden sind.
Bei TonyTextures.de gibt es nun einen Bereich, in dem über 4000 kostenlose Texturen zum Download bereitstehen und sowohl privat als auch kommerziell genutzt werden dürfen.

TonyTextures.de - Kostenlose Foto-Texturen für Webdesign und Architekturvisualisierung

Die Foto-Texturen stehen in einer Auflösung von durchschnittlich 1600 × 1200 Pixeln zur Verfügung und können direkt heruntergeladen werden. Ein Blick in die Sammlung lohnt sich auf jeden Fall, da sich hier interessante Motive aus unterschiedlichen Bereichen finden: Erde, Sand, Holz, Stein, Metall, Moos, Gebäude, Wolken, Landschaften, Innenräume, Pflanzen oder Wasser stellen Einige der Kategorien dar, in welche die Sammlung untergliedert ist. Viel Spaß beim Stöbern.

201331Jul

Geometee: Online-Konfigurator für abstrakte Grafiken

Das HTML5-Canvas-Element in Verbindung mit JavaScript eignet sich bestens für Online-Zeichenanwendungen: Grafiken können in Echtzeit verändert werden und Resultate lassen sich dank Base64-Enkodierung als PNG-Dateien abspeichern. Dem Erstellen von abstrakten Visualisierungen sind daher keine Grenzen gesetzt und so könnten die erzeugten Werke beispielsweise auch Platz auf einem T-Shirt finden. Das könnte der Grundgedanke hinter dem experimentellen Online-Konfigurator Geometee sein: Hier stehen grafische Presets zur Auswahl, die dann per Drehregler angepasst werden können.

Geometee

Bei Geometee handelt es sich wieder um eine klassische JavaScript-Anwendung, die Gebrauch von HTML5 und dem Canvas-Element macht. Die abstrakten geometrischen Darstellungen werden durch ein paar Zeilen JavaScript-Code erzeugt und dürfen dann über das Verändern von definierten Parametern angepasst werden. Zudem können Farbe, Größe, Drehung und Position eines Werks verändert werden. Die "Preview"-Schaltfläche zeigt eine Vorschau an, bei der die Grafik auf einem stilisierten T-Shirt zu sehen ist. Über den Link "Export" lässt sich eine Grafik schließlich als transparente PNG-Datei abspeichern und weiter verwenden.

201315Jul

Silk: Interaktive generative Kunst im Browser

Experimentelle Online-Tools für das Erstellen von generativer Kunst gibt es inzwischen mehr als genug: Vor über 4 Jahren berichtete ich über die Flash-Anwendung MyOats, mit der sich abstrakte Gebilde zeichnen lassen. Livebrush stellt eine ähnliche Anwendung dar und wer Java installiert hat, ist mit dem Flame Painter gut bedient.
Eine weitere Anwendung dieser Art wäre Silk, die im Gegensetz zu den anderen Tools nicht installiert werden muss und auch kein Plugin benötigt, da sie auf dem HTML5-Canvas-Element basiert.

Silk - Interactive Generative Art

Mit der Zeichenanwendung können abstrakte Formen erzeugt werden, die durch einfache Mausbewegungen generiert werden können. Lediglich ein Spiegel-Modus, die Zeichenfarbe und die Anzahl der gleichzeitig gezeichneten Formen können eingestellt werden. Zusammen mit der entspannenden Hintergrundmusik stellt Silk einen netten Zeitvertreib für zwischendurch dar.

201308Jan

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.

BananaBread - 3D-Ego-Shooter auf WebGL-Basis

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.

201209Dez

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.

FightCode - Killing Robots for Fun

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.

201227Nov

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.

FloraJS - Simulate natural systems with JavaScript

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.

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.