Monday, February 26, 2018

Dragiano v1.0 - Click your way to music creation

While on a run last Friday, I had an idea for interactive music generation tool. I imagined an extremely stripped down sequencer where you could draw arbitrary lines. As the sequencing head encountered the lines, a musical tone would be played. The vertical position of the line would determine the pitch of the tone. It was sort of sequencer meets violent-thermin.

Much like the thermin I intended to build this on a HTML5 canvas object.

It was only today when I went to implement this concept that I realized that a native HTML5 canvas object wasn't going to do the trick. A canvas would let me draw the shapes I needed, but lacked the ability to add and remove shapes (like the play head and sound-lines), as well as detect mouse clicks on the shapes.

Fortunately, these limitations are addressed in the very slick concrete.js library. This lightweight library makes use of multiple canvas objects to implement object layering and editability. It even uses a clever color hack to allow for hit detection.

With this library in hand, I was able to bring Dragiano to life. Here's how it works:

Click anywhere to set your first point. Now click again. The the line you just created represents a tone to play. Now hit the play button. The play head should eventually hit your line, and if all goes well, you'll hear sweet, sweet music.

Seriously, try it:

I was pleased to see that all of this works without modification on my Android device, too.

So far, I haven't been able to coax anything but screechy noise out of Dragiano. But for now, I'm just satisfied that he's functional.

Feel free to grab and play with the source code here.

No comments:

Post a Comment