Home

DSP

JavaScript audio synthesis with HTML 5

Aug 12, 2009

HTML5 gives us a couple new toys to play with, such as <audio> and <video> tags. On the visual side, we've already seen live green-screening with Canvas and JS, and in terms of audio there's been several JS drum machines already. But the question I was interested in was: can you use JavaScript to stream live data into these media tags?

Enter the JavaScript audio synth. It generates a handful of samples using very basic time-domain synthesis, wraps them up in a WAVE file header and embeds them in <audio> tags using base64-encoded data URIs. Each sample is then triggered using timers to play the drum pattern. It's quite simple to do and runs fast enough in HTML5 capable browsers to be unnoticeable. Yes, it sounds tinny, but that's just because I'm too lazy to design proper filters for toys like this.

Taming complex numbers in Grapher.app

Sep 24, 2008

Of all the free extras that Mac OS X has, Grapher has to be one of the coolest. This little app, hidden away in the Applications/Utilities folder, is a powerful graphing tool for mathematical equations and data sets.

As you might expect from Apple, it typesets symbolic math beautifully and produces smooth, anti-aliased graphs. But this isn't just a little tech demo to showcase some of OS X's technologies: Grapher's features blow away your crusty old TI-83, and it comes with its own set of surprises. For example, not only can you save graphs as PDF or EPS, but it can export animations and even doubles as a LaTeX formula editor.

In fact, it does so much that its main weakness is the documentation, which only covers the very basics. The best way to learn Grapher is to look at the handful of included examples, although it might take you a while to find out how to replicate them from scratch.

The other day I needed to quickly graph a couple of things involving complex numbers, and it seemed that Grapher was doing some very freaky shit. Either that, or my math was really rusty. It turned out I'm not as stupid as I thought, and there are some weird caveats with using complex numbers in Grapher. Oddly, there is very little information online about it, so I figured for future reference, I should document the workarounds I discovered.

Let's dive in. Fuck MS Paint, I've got math to do.

(Note: this post assumes you know and like math.)

Images