Home > Computing, News > How I learned to love arrays – featuring Tracker2D

How I learned to love arrays – featuring Tracker2D

Tracker2D Publicity Shot 11Recently, I’ve been working on a huge update for my pet programming project. Since development is still pretty steady, this probably isn’t much of a surprise – recent commits have included a teleport tile that can send bugs to arbitrary points on the canvas, improvements to the style of menus, limited UI customization functionality, and so forth. I spent much of the last week overhauling Tracker2D’s audio ‘system’ by more comprehensively exposing the HTML5 Web Audio API’s various audio convolution and filtering features. This has been quite a task, and I thought writing about the process would be interesting as well.

Before the overhaul, Tracker2D allowed you to apply one single audio filter to each tile; furthermore, you could only edit one relevant property, which was usually related to frequency/pitch. Reading the documentation might give you an idea of what altering the property would do, but this was still a very basic system; in fact, at the time, I believed that a more robust system would be too complex and that furthermore, it would be prohibitively difficult to create an intelligible, usable UI for adding and removing effects within the constraints of Tracker2D’s overall UX. If I remember correctly, I hadn’t figured out one of my major UI elements (overlay windows) at that point, so the gradual implementation of ever more of those was most likely at least helpful to me for this task. After a while, though, I started sketching out a system for representing and storing lists of audio effects using arbitrary length arrays (hence the title of the article), and I was off to the races.

This task required me to make comprehensive modifications to many of Tracker2D’s subsystems. Merely displaying effects and UI to the user required some tricky work with event delegation in jQuery – an arbitrary amount of filters with varying properties would be necessary, and hopefully I managed to avoid enormous amounts of code duplication with my solution. Placing multiple filters into a note was also something of a hurdle for similar reasons – every time a note is played, Tracker2D parses the array of relevant audio effects and converts it into what the Web Audio API uses before linking them all together. The actual representation of filters was simpler – each tile now has an array of such associated with it, although formatting and parsing such also took some time. Javascript has something of a data formatting standard built into it (JSON) that I was able to apply to that end. In general, I found it very helpful to break the overhaul up into small subtasks and focus on one at a time, especially since there were countless opportunities to test changes to the subsystems.

A few points of interest that came up during the development process:

  • Javascript, like many ‘high level’ languages, handles the memory side of arrays and similar for the programmer. Were I writing Tracker2D in a language like C, I may have had to handle this manually, creating a great deal of busywork, at least if I wanted to avoid inefficiency.
  • I tackled the aforementioned subtasks approximately in the order that Tracker2D would execute them – creating and displaying the UI, parsing input, performing filtered sound, saving and loading from files, etc. This admittedly required me to make some assumptions about how the node system would work and scale that I might’ve had to actually test in a more formal programming environment.
  • I ended up setting an arbitrary limit of 8 audio effects per tile. It would be fairly simple to remove this limitation, but at this point I feel each expansion would provided diminishing utility in return for ballooning filesizes and very likely increased CPU usage.
  • The original audio filter system is still mostly inside the program. While you can no longer define oldstyle effects, you can still load up files that use it, and they should sound equivalent to what they did beforehand. In general, the fact that Tracker2D needs a server stack to run (even if it’s just a local HTTP one) has encouraged me to add more backwards compatibility than I might otherwise.

While this system is still in need of further refinement to improve the overall experience, you can already play around with it in the live version of Tracker2D. Hopefully it’ll give you more power to make your music sound the way you want it to.

Advertisements
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: