The Technology

The showcase was built using mostly web technology:

• vue.js is a progressive framework for building user interfaces. vuex for state management and vue router were used as well.
• screenfull.js is a JavaScript library that facilitates the use of browser fullscreen API.
• NextCloud was used to quickly synchronize the movie files and the content (the showcase included multiple Gigabytes of content) between the different client PCs.
• XAMPP was used to locally host the showcase HTML code.
• The backend was written in PHP.

The Team

At Studio Float: Janis Aschberger and Martin Fütterer.

Cera Calendar is a digital advent calendar with creative code experiments.

For the holiday season 2018 Mario Heigl and I teamed up to create a digital advent calendar with creative code sketches.

Every day in December 2018, a new code sketch would appear on the site.

We used the Cera Pro font face (created by type designer Jakob Runge) das a basis for all of the creative code sketches.

The Technology

For the site and the sketches, we used a number of JavaScript libraries, most of them focussed on creative coding:

• p5.js is a creative coding library.
• pixi.js is JavaScript libary for creating WebGL content.
• Paper.js is a library for creating and animating vector shapes.
• Tone.js is a library for creating and manipulating music and sounds.
• The site itself was built in PHP and JavaScript ES6.

The Correct Insult is an animated short by animator and motion designer Janis Aschberger that visualises a passage from the book How to be a Man (by Glenn O'Brien). It discusses the effective use of swearwords.

To promote the film at festivals and on social media, Janis and I teamed up to create a web site.

The site shows the movie trailer, and also serves as an information hub for articles and information about the terms and insults shown in the movie.

Each insult used in the film has a dedicated section on the site where users can learn more about usecases in videos and texts.

The site prominently features an interactive component: The Insult-o-Mat. Users can create customized insult GIF animations that include scenes from the movie and share them on social media.

The Technology

Many libraries, frameworks and technologies were used to ensure the site animates smoothly and works properly. The most important amongst them:

• The site was built using the Vue JavaScript framework.
• Lottie Web makes it possible to export animation sequences from AfterEffects (an animation editor) to the browser.
• To make transitions work smoothly, Dynamics.js was used. It enables physics-based animations and makes animations look more interesting.
• Animated_Gif to create animated gifs
• The site also uses a number of PWA technologies, like manifest file to make the site installable, and a serviceworker to make the site work offline.
• The site works well with JavaScript disabled.

The site makes heavy use of WebWorkers for computationally expensive tasks (like GIF file generation). Some of the existing libraries needed for those tasks were not suporting webworkers in a way needed for the project. This led me to create, rewrite, publish and contribute to a number of libraries on GitHub:

• png-es6: Decode PNG files in webworker
• circlepacker: Circle packing animation in webworker

The Process

Being sole web developer on this project, I took an iterative approach to development: I used many small animation- and interaction prototypes to guide my choices of the technology stack for the web site.

The GIF generation code was especially tricky to get right. The arrival of new technologies such as Web Workers, Service Workers and fetch in modern web browsers made it possible to move all of the logic to the client.

The logo animation was another area where we spent some time prototyping, to find the best way to animate items programatically.

PI Newsgame is a web app for Physik Instrumente, a German mechanical engineering company.

It educates students and recent graduates in the field about the technology and know-how in the company, using puzzles, interactive videos and estimation games, and serves as a recruitment tool.

The project is not publicly accessible.

The Technology

The web app was built using the Vue JavaScript framework and modern web technologies.

The Process

I worked on the project with CaderaDesign and Industrial Newsgames in Würzburg.

I was responsible for planning, architecting and writing the front end code as well as creating a number of interaction and animation prototypes.

The team: Christoph Doering, Thilo Wischmeyer and Ulrich Wirths

Coperion is an internationally operating engineering company that specializes in plastics compounding and extrusion technology.

For their booth at the K 2016 plastics trade show in Düsseldorf, I worked with Design and Systems to design and develop a series of touch enabled web applications, interactive billboard screen displays and vr installations.

The Technology

The web apps were built in JavaScript using modern web technologies. The real time communication between the different apps was implemented using WebSockets, using the Spacebrew framework. I was responsible for the networking code and worked on the web apps.

The team at Design and Systems: Stefan Wagner, Manuel Michel, Christiane Keller, Lucas Dittebrand and Sebasian Gläser.

Melody Jams is an iOS music app for kids. Users can mix and match between various characters in fun combinations to create their own songs, and then jump in and play along.

For several months in 2016, Melody Jams was the worldwide #1 kids app on iOS.

Together with the technology collective Arbitrary I created interaction and animation prototypes and coded the final app.

The Technology

I worked on all parts of the app, but mainly focused on the animation code and prototyopes. The app is written in the Swift programming language, many of the prototypes also were written in JavaScript

The Team: Jamie Kosoy and James Bartley

Awards & Further Reading

The app won an Communication Art's 2017 Award and was featured in numerous publications, amongst them The Washington Post, Smashing Magazine and Motionographer.

You can also read more about the project on James Bartley’s writeup, an interview with James and Jamie with the FreeRange blog, and an article by Jamie about the prototyping process for Melody Jams, also in Smashing Magazine.

The Halo ARG was an alternate reality game web app to promote the 2015 installment of the Halo video game franchise, Halo 5: Guardians.

I worked with Arbitrary on this project. The game told its story via a futuristic looking User Interface. Players could use tools like a code terminal and a message console to complete interact with the game and to move the story forward.

Each week after the launch of the game, a new chapter would be accessible to the players.

Unfortunately, the game was never publicly released after its completion. I'm happy to share a link to a working online version upon request.

The Technology

I worked as a part of the team on all code related aspects of the project: 3D-Animations, User Interface, Backend and Social Media integration.

The project was built using the Three.js and Flight.js JavaScript libraries. The backend was built with the Laravel framework.

The Team: Jamie Kosoy, Matt Cook, Nate Horstmann, and Scott Cook.

In late 2014 Google held a 2 day event in Times Square to celebrate all that is Android. During the event, the public was invited to create custom characters that could be played in a series of games on the largest screen in North America. Its resolution is 10,048 × 2,368 pixels, measuring more than 98 × 20 meters.

I worked with Red Paper Heart to create a series of unique and interactive games specifically for the massive screen. Users were able to create an avatars using the Androidify app, and control them via live motion tracking.

The Technology

The project was realized using a variety of different technologies: the games were written in JavaScript, using libraries like Backbone.js, Pixi.js for animation, P2.js for simulating physics and Spacebrew for communicating with other parts of the installation. Other parts of the installation, like the code for video capturing were written in C++, using the Cinder toolbox.

I worked mainly on interactive game prototypes as well game and animation code.

The team at Red Paper Heart: Daniel Scheibel, Zander Brimijoin, Adrià Navarro López, Matt Kenefick and Phil Sierzega

Lincoln Experiments is a personal project I did to explore the possibilities of the drawing APIs in modern browsers. It is a collection of image processing and manipulation web apps.

Users can upload their own photos; the default image is an iconic photograph of President Lincoln.

The Technology

The experiments are written in HTML, CSS and Javascript. Their source code is freely available on GitHub.

Mentions & Further Reading

The glitch experiment sparked an interesting discussion on Hacker News and has been featured on sites like The Verge, Boingboing, Gizmodo, Buzzfeed and MSN.

Coperion is an internationally operating engineering company that specializes in plastics compounding and extrusion technology. I worked with Design and Systems to design and develop a series of applications and installations for the Coperion booth at the K 2013 plastics trade show.

On this project I worked primarily on code for the touch screen and projection applications.

The Technology

The applications are written in C++ (using openFrameworks), GLSL, X3D (with the instant reality extensions) and JavaScript.

The Team at Design and Systems: Stefan Wagner, Manuel Michel, Christopher Warnow, Christiane Keller, Mark Nonnenmacher, Lucas Dittebrand and Sebasian Gläser.

Further Reading

A more detailed writeup of this project is available on the website of Design and Systems.

MoMA starts here was a campaign site for the summer campaign of the Museum of Modern Art in New York.

The campaign website showcases the different kinds of content that MoMA has to offer, both online and offline. It shows everything from exhibitions to photographs, from art collections to the quotes of recognized artists.

I worked on this project as a freelancer with Big Spaceship, focussing on the front end code of the site. In addition to that, I also created prototypes for animations and interactions.

Unfortunately, an online version of the website is no longer available.

The Technology

All of the front end code was written in JavaScript, HTML and CSS. We used libraries and frameworks where possible, for example: Backbone.js for application structure, Require.js for dependency handling, Mustache for templates and Modernizr for browser feature detection.

The team at Big Spaceship: Stacey Mulcahy, Joey Danluck and Nooka Jones.

Further Reading

More information on the project and the campaign is available at the MoMA Design Studio.

GoGoSqueez is a fruit snack for children. I worked with Big Spaceship to create their fun, playful and interactive web site.

The Technology

The site is using Wordpress as CMS and a handful of custom plugins like Advanced Custom Fields for easily managing the different kinds of content. All of the front end code is written in JavaScript, HTML and CSS. Where possible, existing frameworks and libraries are used, for example: the Twitter Bootstrap framework for UI elements and Yepnope.js for conditional loading. The site is responsive and adapts to different screen sizes and devices.

I worked on this project as a freelancer with Big Spaceship, writing both front end and back end code.

The site's design has since been replaced.

The team at Big Spaceship: Jay Quercia, Danielle Little and Stephen Koch.

The Expressive Web is a showcase of modern web technologies for Adobe.

It shows the capabilities of new web technologies in action and demonstraties new features that are available in modern browsers today.

The design of this website is based around colored blocks that rearrange and animate for each different section of the site. It makes extensive use of new features like CSS3 transitions, CSS3 transforms, web storage and others.

The website also provides useful information about each demonstrated feature, like the current browser support and a list with of demos and implementations.

On this project, my work was focussed around developing the HTML5, CSS3 and JavaScript demos and the front end of the site. I also wrote a browser tool called Blocker to help the designers on the team to create the block assets for the site.

Unfortunately the site is no longer accessible publicly.

The Technology

The front end of the site is written in HTML, CSS and JavaScript. All blocks are dynamically created div elements with a background image. They are animated using CSS transitions and JavaScript.

At Big Spaceship: Dave Chau, Jay Quercia, Stephen Koch, Lauren Shapiro and Joshua Hirsch

A list of older and smaller projects I was involved with.

Benchmade Modern App, 2015

Developed an point of sale iOS app for Benchmade Modern that communicates with a robotic arm for sofa selection and integrates with the Magento shop system. With Arbitrary and Dan Mall.

Janis Aschberger, 2011

Developed the website for German motion designer Janis Aschberger.

Hetterich Architekten, 2010

Designed and developed the web site for architure firm Hetterich Architekten.

Haus Tannenburg, 2008

A restaurant web site. With Janis Aschberger.

Styckwærk, 2004 – 2008

My very first web project: Website for the band styckwærk.