iOS, Javascript, Members
Leave a comment

Patatap – Portable animation and sound kit by jonobr1 and Lullatone

petatap_screenshots_06 copy 2

Created as a collaboration between Jono Brandel (aka jonobr1) and Lullatone, Patatap is a portable animation and sound kit that allows you to play with versatile melodies charged with colourful geometric graphics.

Patatap is a progression from Neuronal Synchrony and built using a library Jono developed called Two.js. The library offers a simple drawing API to render content in various contexts: SVG, Canvas, and WebGL. Patatap also harnesses technology that is still relatively nascent on the web, Web Audio API. Some of the benefits of these standardised services is that they can be compiled and deployed to other environments.

Jono chose Cordova to help him in this process. It is a command line tool maintained by Apache that exposes device functionality to a website built with HTML, CSS, and JavaScript. Since it wraps your site in a WebView much of the functionality is the same without the hassle of a URL bar and other shortcomings of a website. With a few tweaks of the source code to the site and a couple simple Cordova commands Jono had an XCode project generated ready to be deployed to iOS. Adding developer certificates Jono easily deployed Patatap to his personal device. After adding static assets for the icon and loading page, Jono followed Apple’s Developer Guide to publish the binaries. In a short weekend it was compiled, uploaded, and ready to be reviewed by the App Store.


It should be noted that Jono did try to build the project for Android as well, but at the time of writing there is a bug and the Web Audio API is not supported in the WebView of Android. Effectively making Patatap just a visualizer. In addition to this there are many limitations on resources because we are such a small team, effectively one developer.

The film, embedded below was filmed at the new location of Gray Area Foundation, an Arts + Technology organisation located in San Francisco. Welcome Stranger did the styling, showcasing their Spring / Summer 2014 line and the film was produced by Crooked Letter Films.

Here is also a compilation of interesting and varying performances recorded using Patatap on YouTube, Souncloud, Instagram (#patatap) and Twitter.

We have 10 promocodes for CAN members and you can get them here: Members Only / Login or Become a Member.

Download from the AppStore for iPhone/iPod Touch or iPad ($0.99).

Project Page | Jono Brandel | Lullatone | Two.Js on CAN

See also T • E • T • H • E • R, created by Jono Brandel for Plaid.