Tag: inspiration

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.

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.