Technische Aspekte

Die Präsentation wurde hauptsächlich mit Webtechnologien umgesetzt:

• vue.js ist ein reaktives Webframework für die Erstelung und Umsetzung von Benutzeroberflächen. vuex und der vue router kamen ebenfalls zum Einsatz.
• screenfull.js ist eine JavaScript Bibliothek zum Steuern der Vollbildfunktion.
• NextCloud wurde eingesetzt, um die Inhalte auf den verschiedenen Präsentations-PCs zu synchronisieren. Weiterhin war es damit möglich, alle Inhalte der Präsentation über einen Webbrowser zu pflegen.
• XAMPP wurde als lokale Serverlösung eingesetzt.
• Das Backend der Applikation wurde in PHP umgesetzt.

Das Team

Beim Studio Float: Janis Aschberger und Martin Fütterer.

Cera Calendar ist ein digitaler Adventskalender mit kreativen Code-Experimenten.

Mein Kollege Mario Heigl und ich schlossen uns zusammen, um für die Adventszeit 2018 einen digitalen Adventskalender zu erstellen.

An jedem Tag im Dezember 2019 veröffentlichten wir abwechselnd ein neues Code-Experiment auf der Seite.

Für alle Experimente verwendeten wir die Schriftart Cera Pro von Jakob Runge als Grundlage.

Technische Aspekte

Für die Webseite und auch die Code-Experimente wurden zahlreiche JavaScript-Bibliotheken eingesetzt, viele davon mit Focus auf creative Coding.

• p5.js ist eine creative Coding JavaScript Bibliothek.
• pixi.js ist eine JavaScript WebGL Bibliothek.
• Paper.js ist eine Bibliothek zum Erstellen, Manipulieren und Animieren von Vektorgrafiken.
• Tone.js ist eine Bibliothek für das Erzeugen und Manipulieren von Music und Tönen.
• Die Webseite sebst wurde mit PHP und JavaScript ES6 umgesetzt.

The Correct Insult ist ein animierter Kurzfilm von Janis Aschberger, in dem eine Passage aus dem Buch How to be a Man (von Glenn O'Brien) visualisiert wird. Es geht darin hauptsächlich um den effektiven Einsatz von Schimpfwörter.

Janis und ich erstellten die Webseite, um den Film auf bei Festivals und in den sozialen Medien zu bewerben.

Die Webseite zeigt hauptsächlich den Filmtrailer und dient weiterhin als Nachschlagewerk für Artikel und Informationen über die im Film gezeigten Schimpfwörter.

Für jedes Schimpfwort wurde auf der Seite ein eigener Abschnitt angelegt, in dem die Besucher mehr über dessen Anwendung erfahren können.

Ein weiteres markantes Feature der Seite ist der Insult-O-Mat, mit dem sich individualiserte GIF-Animationen zu jedem Schimpfwort erstellen und teilen lassen.

Technische Aspekte

Auf der Seite sind eine vielzahl von Bibliotheken und Technoligien im Einsatz, um sicherzustellen, dass sie sauber funktioniert und die Animationen flüssig abgespielt werden:

• vue.js ist ein reaktives Webframework für die Erstelung und Umsetzung von Benutzeroberflächen. vuex und der vue router kamen ebenfalls zum Einsatz.
• Lottie Web ermöglicht es, mit Adobe AfterEffects erstellte Animationen im Browswer abzuspielen.
• Mit Dynamics.js werden physikalisch korrekte Animationen erstellt und abgespielt.
• Mit Animated_Gif können GIFs dynamisch erzeugt werden
• Auf der Seite ist auch eine Vielzahl von PWA-Technologien im Einsatz, wie zum Beispiel eine manifest-Datei und ein serviceworker, um die Seite offline verfügbar zu machen.
• Die Seite setzt auf Progressive Enhancement und funkioniert auch ohne JavaScript.

Die Seite an verschiedenen Stellen Webworker ein, um komplexe Berechnungen im Hintergrund durchzuführen (z.B. beim Erzeugen von GIFs, so dass es bei Animationen nicht zu Rucklern kommt. Einige der verwendeten Bibliotheken unterstützten Webworker noch nicht, so dass ich sie um diese Funktionalität erweiterte. Mehr dazu findet sich auf meinem GitHub-Profil:

• png-es6: PNG-Bilder in WebWorkern decodieren
• circlepacker: Circle Packing Algorithmus in WebWorker

Der Entwicklungsprozess

Als einziger Entwickler an diesem Projekt entschied ich mich für eine iterative Herangehensweise: Ich erstellte viele kleine Animations- und Interaktionsprototypen, um informierte Entscheidungen zur verwendeten Technologie treffen zu können.

Der Code für das dynamische Generieren von GIF-Animationen war besonders komplex. Erst durch die verbreitete Unterstützung von Web Workern, Service Workern and fetch wurde es möglich, die komplette Gif-Generations-Logik im Browser auszuführen.

Auch die Logo-Animation entwickelten wir anhand verschiedener Prototypen.

PI Newsgame ist eine Webapplikation für den Maschinenbauer Physik Instrumente.

Anhand von von Lernspielen, Quizzen und informativen Videos wird das Know-How der Firma präsentiert. Die Webapplikation dient darüber hinaus als Werkzeug zur Anwerbung von Studienabsolventen.

Das Projekt ist nicht öffentlich zugänglich.

Technische Aspekte

Die Webapplikation wurde mithilfe des Vue Frameworks erstellt.

Der Entwicklungsprozess

Das Projekt entstand in Zusammenarbeit mit CaderaDesign und Industrial Newsgames in Würzburg.

Ich war für Architektur und Entwicklung des Frontend-Codes für die Webapplikation verantwortlich. Zusätzlich entwickelte ich einige Interaktions- und Animationsprototypen.

Das Team bei CaderaDesign: Christoph Doering, Thilo Wischmeyer and Ulrich Wirths

Coperion ist ein international aktive Maschinenbauunternehmen, dass sich auf Compoundieranlagen und Schüttgutanlagen spezialisiert hat.

Für den Messestand con Coperion auf der K 2016 Messe in Düsseldorf entwickelte ich zusammen mit dem Forschungsinstutut Design und Systeme an einer Reihe von verschiedenen Applikationen, digitalen Präsentationen und interaktiven Installationen.

Technische Aspekte

Für die Applikationen war eine ganze Reihe verschiedener Technologien und Plattformen im Einsatz, z.B: Unity, OpenFrameworks, und Vue.js.

Die Erstellung von Tablet-Applikationen, die untereinander vernetzt waren, und andere Anzeigen und Bildschirme auf dem Messestand steuern konnten, fielen in meinen Aufgabenbereich. Dazu entwickelte ich unter Anderem eine Backend-Server-Software auf der Basis der Spacebrew Bibliothek, mithilfe dessen die verschiedenen Teile der Präsentation in Echtzeit kommunizieren konnten.

Das Team bei Design und Systeme: Stefan Wagner, Manuel Michel, Christiane Keller, Lucas Dittebrand und Sebasian Gläser.

Melody Jams ist eine iOS Musik-App für Kinder. Benutzer können sich aus verschiedenen Charakteren eine Band zusammenstellen, und mit ihnen gemeinsam musizieren.

Die App war für einige Monate die #1 Kinder-App auf der iOS Plattform.

An der App arbeitete ich zusammen mit dem Technologie-Kollektiv Arbitrary aus San Francisco. In meinen Aufgabenbereich fielen vor Allem die Programmierung verschiedenster Interaktions-, Animations- und Technologieprotoypen. Weiterhin Arbeitet ich auch am Code der App mit, hier kümmerte ich mich um alle Interaktiven und animierten Bereiche.

Technische Aspekte

Die App ist hauptsächlich in der Programmiersprache Swift geschrieben, einige der Prototypen wurden zunächst in JavaScript erstellt.

Das Team: Jamie Kosoy und James Bartley

Gewonnene Preise und & weitere Informationen

Die App gewann den Communication Art's 2017 Award und wurde in zahlreichen Publikationen besprochen. Unter Anderem: The Washington Post, Smashing Magazine und Motionographer.

Mehr zu Lesen gibt es in James Bartley’s Zusammenfassung, einem Interview mit James and Jamie auf dem FreeRange Blog, und einem Artikel von Jamie über underen Arbeitsprozess mit Prototypen im Smashing Magazine.

Das Halo ARG war eine Web app, zur Begleitung der Veröffentlichung des neuen Videospiels Halo 5: Guardians.

Ich arbeitete zusammen mit dem Technologie-Kollektiv Arbitrary an dem Projekt.

Das Spiel erzählte seine Geschichte hauptsächlich über ein futuristisch anmutendes Interface. Spieler konnten verschiedene Wekzeuge wie zum Beispiel ein Code-Terminal benutzen um die Geschichte des Spiels voranzutreiben.

Nach der Veröffentlichung des Spiels erschienen wöchentlich neue Kapitel der Geschichte.

Leider ist die Seite nicht öffentlich zugänglich.

Technische Aspekte

Zusammen mit dem Team arbeitete ich an allen Bereichen des Projektes: 3d-Animationen, Benutzeroberflächen, Backend und Social-Media Integrationen.

Für das Projekt wurden die JavaScript-Bibliotheken Three.js und Flight.js verwendet. Das Backend wurde mit Laravel erstellt.

Das Team: Jamie Kosoy, Matt Cook, Nate Horstmann, und Scott Cook.

Ende 2014 veranstaltete Google ein zweitägiges Event auf dem Times Square in New York, um seine Mobil-Plattform Android zu bewerben. Dabei war das Publikum eingeladen, sich auf einem riesigen Bildschirm an einer Reihe von Geschicklichkeitsspielen zu versuchen. Mit einer Auflösung von 10,048 × 2,368 und einer Größe von 98 × 20 Metern handelte es sich um den größten Bildschirm in Nordamerika.

Ich arbeitete zusammen mit dem Team von Red Paper Heart aus Brooklyn, New York zusammen an einer Reihe von eigens für den großen Bildschirm entwickelten Geschicklichkeitsspielen. Besucher konnten dabei mittels der Androidify-App ihre eigenen Spielcharakere erschaffen, um mit diesen zu spielen. Die Spiele wurden durch Motion Tracking gesteuert.

Technische Aspekte

Das Projekt wurde mithilfe einer Vielzahl verschiedener Technologien verwirklicht. Die Spiele wurden in JavaScript entwickelt, und nutzten Bibliotheken wie zum Beispiel Backbone.js für das Interface, Pixi.js zum Rendern und Animieren, P2.js für physikalisch korrektes Verhalten und Spacebrew für die Kommunikation mit zwischen den verschiedenen Teilen der Instalation. Für das Motion Tracking per Microsoft Kinect wurden C++ und die Cinder Toolbox genutzt.

Ich arbeitete hauptsächlich am Code für die Geschicklichketsspiele sowie dem Animations-Code. Dafür erstellte ich zahlreiche Prototypen.

Das Team bei Red Paper Heart: Daniel Scheibel, Zander Brimijoin, Adrià Navarro López, Matt Kenefick und Phil Sierzega.

Die Lincoln Experimente sind ein persöliches Projekt von mir, dass ich begann, um mehr über die Bildmanipulation und die Zeichen-APIs in modernen Webbrowsern zu lernen. Es ist eine Sammlung von verschiedenen Web-Apps, die es ermöglichen Bilder auf interessante weise zu manipulieren. Dabei können Benutzer ihre eigenen Bilder hochladen. Um die Effekte zu demonstrieren verwenden die Apps jeweils ein weltbekannte (und lizenzfreies) Foto von Abraham Lincoln.

Technische Aspekte

Die Experimente sind alle in HTML, CSS und JavaScript entwickelt. Der Quelltext ist auf GitHub frei verfügbar.

Erwähnungen & weitere Informationen

Das Glitch-Experiment führte zu einer interessante Diskussion auf Hacker News. Weiterhin berichteten Portale wie The Verge, Boingboing, Gizmodo, Buzzfeed und MSN ausführlich darüber.

Coperion ist ein international aktive Maschinenbauunternehmen, dass sich auf Compoundieranlagen und Schüttgutanlagen spezialisiert hat.

Als Teil des Teams von Design und Systeme entwickelte ich eine Reihe von Applikationen und interaktive Installationen für den Coperion Messestand auf der K 2013 in Düsseldorf. Ich arbeitete dabei hauptsächlich an Touch-Screen und Projektions-Anwendungen.

Technische Aspekte

Für die Applikationen und Installationen waren verschiedene Technologien im Einsatz: C++ (mit openFrameworks), GLSL, X3D (mit den instant reality Erweiterungen) und JavaScript.

Das Team bei Design und Systeme: Stefan Wagner, Manuel Michel, Christopher Warnow, Christiane Keller, Mark Nonnenmacher, Lucas Dittebrand und Sebasian Gläser.

Weitere Informationen

Eine detaillierte Beschreibung des Projektes ist aud der Webseite fon Design and Systeme vefügbar.

MoMA starts here war eine Kampagnenseite für das Sommerprogramm des Museum of Modern Art in New York.

Die Webseite hob die verschiednenen Arten von Ausstellungsstücken hervor, die das MoMA zu bieten hat, sowohl online wie auch offline. Die Webseite beleuchtete sowohl die Fotografien, als auch Ausstellungen und die Kunstsammlungen des Museums.

Ich arbeitete an dem Projekt als Freier Mitarbeiter für die Agentur Big Spaceship in Brooklyn, New York. Dabei bearbeitete ich hauptsächlich das Frontend der Seite, insbesondere die Animationen. Dazu erstelle ich auch zahlreiche Interaktions- und Animationsprototypen.

Leider ist die Seite nicht länger online verfügbar.

Technische Aspekte

Das Frontend wurde in JavaScript, HTML und CSS erstellt. Wo möglich, griffen wir auf Bibliotheken und Frameworks zurück, wie zum Beispiel: Backbone.js, Require.jsm Mustache und Modernizr.

Das Team bei Big Spaceship: Stacey Mulcahy, Joey Danluck und Nooka Jones.

Weitere Informationen

Weitere informationen zum Projekt und zur Kamkagne sind beim MoMA Design Studio nachzulesen.

GoGoSqueez ist ein Frucht-Snack für Kinder. Ich arbeitete zusammen mit Big Spaceship an einer verspielten, kinderfreundlichen interaktiven Webseite für das Produkt.

Technische Aspekte

Die Seite wurde mit dem Wordpress CMS umgesetzt, und nutzt das Advanced Custom Fields Plugin, um die verschiedenen Arten der Inhalte effektiv zu verwalten. Der Frontend wurde komplett in HTML, CSS und JavaScript entwickelt. Wo möglich wurde auf existierende Bibliotheken zurückgegriffen, beispielsweise Twitter Bootstrap und Yepnope.js. Die Seite setzte auf responsives CSS um auch auf Smartphones und Tablets gut nutzbar zu sein.

Sowohl Frontend- als auch Backend-Code fielen in meinen Aufgabenbereich. Zusätzlich entwickelte ich auch eine Reihe von Interaktions- und Animationsprototypen.

Leider ist diese Version der Seite nicht länger online verfügbar.

The Expressive Web ist ein Showcase für moderne Webtechnologien für dem Softwarehersteller Adobe.

Die Webseite zeigt auf kreative Art und Weise die Möglichkeiten und Chancen für den Einsatz von neuen Webtechnologien in modernen Browsern.

Das Design der Webseite ist aus kleinen, bunten Würfeln aufgebaut, die sich je nach ausgewähltem Abschnitt neu arrangieren.

Die Seite macht von vielen modernen Webtechnologienn ausgiebig Gebrauch, wie zum Beispiel CSS Transitions, CSS Transforms und Web Storage.

Die Webseite dient auch als Anlaufstelle für nützliche Informationen zum Thema Webtechnologien.

Ich arbeitete an diesem Projekt als Teil des Teams bei Big Spaceship und fokussierte mich vor Allem auf den Code für die Interaktion und Animation von Würfeln, sowie den Code für die Browser-Feature-Demos.

Im Zuge der Entwicklung programmierte ich auch ein Browser-Tool zum Erstellen und Bearbeiten von Objekten in Würfelgrafik, Blocker. Es wurde vor Allem von meinen Kollegen für die Asset-Erstellung für die Webseite verwendet.

Leider ist die Webseite nicht länger öffentlich zugänglich.

Technische Aspekte

Das Frontend der Seite ist in HTML, CSS und JavaScript geschrieben. Alle Würfel werden dynamisch erzeugt und animiert. Jeder Block ist ein eigenes div-Element mit einem Hintergrundbild. Die Animationen werden sowohl über JavaScript als auch über CSS-Transitions gesteuert.

Bei Big Spaceship: Dave Chau, Jay Quercia, Stephen Koch, Lauren Shapiro und Joshua Hirsch.

Eine Sammlung von älteren und/oder kleineren Projekten, an denen ich beteiligt war.

Benchmade Modern App, 2015

Entwicklung einer Point of Sale iOS-App for Benchmade Modern. Die App kommuniziert mit einem Roboterarm, um in einem Showroom ein Sofa bereitzustellen. Sie ist weiterhin mit dem Magento Shop-System verknüpft, und ermöglicht einfache Konfiguration und Zahlungsabwicklung. In Zusammenarbeit mit Arbitrary und Dan Mall.

Janis Aschberger, 2011

Entwicklung der Webseite für den Motion Designer Janis Aschberger.

Hetterich Architekten, 2010

Design und Entwicklung der Webseite für das Architekturbüro Hetterich Architekten.

Haus Tannenburg, 2008

Eine Webseite für ein Restaurant. Zusammen mit Janis Aschberger.

Styckwærk, 2004 – 2008

Meine erstes Webprojekt: Die Website for die Band styckwærk.