TrackPerformer: Conflagration

Canvas + Audio + Performers + Filters = Awesome

Built using JavaScript, Canvas, CSS3, Audio,

  • 184 views
  • 0 comments

More About This Demo From The Author


TrackPerformer provides a stage for the visualisation of music. Rather than analysing the audio content of the music, though, TrackPerformer uses the notation — the abstract representation of the music — and allows one or more performers to “play” each instrument visually.

There are a number of unique performers, as well as various pre- and post-filters that can be applied. TrackPerformer uses HTML5 Audio, and employs requestAnimationFrame (where available!) to keep things ticking along quickly and in time. Unfortunately, some of the filters require pixel-by-pixel manipulation of the canvas, which is generally quite slow. In testing, Firefox provides the best performance, followed by Chrome and Opera.

This demo uses a piece of music entitled “Conflagration”, by Barry van Oudtshoorn (also the author of TrackPerformer). The music was written using OpenMPT (an open-source tracker) and various Native Instruments VST instruments and effects.

You can find out more about TrackPerformer on GitHub -- including more performances and all the instructions and resources you'll need to build your own performances.

Features added specifically for this performance include automation (the ability to alter a performer's parameters automatically during a performance), a box-shadow performer (called "Glow" -- used for the kick drum here), a new "Shift" filter (which pushes the entire canvas around), a new "Fixed" performer (which doesn't really do all that much), and lots of tweaks and new features for existing performers and filters.

No comments yet.

Log in to add your own.

About this Demo

Download the Source 21785.56 KB · ZIP File

Browse the Source

This demo is released under the GPL license.

More by barryvan