Apps by PatternBased

PatternBased creates apps and websites that involve audio experiences and/or data visualization. The following sites are updated regularly, and are open source. Feel free to fork or use them as a template for your projects.

PatternBased Catalog

PatternBased Catalog is a powerful search tool for our music catalog, with build-in player and sharable playlist function. It is a tool designed for film makers and editors. It is built with Vue.js, MongoDB, and Amazon AWS, and is open source. Star, follow, or fork this app on Github.


OnomatoPedal is an audiovisual playground inspired by the Japanese Onomatopoetic words and the music effects pedals of the world-famous EarthQuaker Devices. The user can play a set of sounds with keys and drum pads. For the audio player, we used Howler.js for V1 (released in 2020 June), and Tone.js for V2 (will be released in 2023). The animation is handled by paper.js and p5.js. Star, follow, or fork this app on Github(V1).

Strangers App

Strangers app is made for the documentary series 'Strangers In My Head' which shows the lives and struggles of people who suffer mental illness in Singapore. The app includes an info-art / data visualization piece called 'Perspective' made with p5.js, which uses current statistics on mental health to illuminate how many of us suffer. The framework is React. Star, follow, or fork this app on Github.


Heartbeats. is an info-art piece to make the heartbeats of animals visible and audible. More than 150 species of animals are going extinct every day. Perhaps considering the beating, breathing lives of these animals will help us do what we can to slow this extinction. It is made with simple HTML + Javascript. The animation is made with Lottie, and the music is created with VCV rack. Star, follow, or fork this app on Github.