I have made no attempt yet at UI design or even any kind of prettiness, just getting the functionality squared away. This borrows heavily from a blog post by Steven Wittens for how to create and manipulate the audio samples.

I had been separately working on a little processing.js app that was going to make use of soundmanager2. I decided to change it to use html5 (although that is now also supported by sm2).

I am writing the audio directly to the <audio> tags as base64-encoded data URIs (audio samples wrapped in a wave file header), so I can generate them on the client side taking into consideration user choices about frequency, panning, volume, filter sweep to a second frequency, duration, and adsr envelope. There is also a waveform display, using the <canvas> element, that allows you to zoom in and out. As I am about to teach Introduction to Audio at COFA in a week, I had been thinking of this as an educational tool that is easily accessible to anyone on the web. I’m hoping it can be optimized to work on mobile browsers as well. Of course, by the time that happens this will probably be out and make this obsolete before it sees much light of day.

You can name the samples you create, and play them back, yay…boring unless you’re a synth geek! So you can also choose a sound from a dropdown and then click in the dark grey box and create a ball that plays back your sound when it hits something. You can make as many sounds as you want, and attach them to different balls. The balls also absorb other balls and their sound (when I get it working properly) when they collide with smaller ones.

This is all very rough at this point, the UI is god-awful, but will be worked and prettified soon.

Until then have fun.

Note: there is definite bugginess still, let’s say this is alpha stage.

While I was looking around last night, I came across Pulsate, which would have been very inspiring had I seen it before I got this far. I had played with Tonematrix previously. Everything Andre does is pretty sweet (even if it is Flash )

Cheers,

Andre

The one I found worked well but it selected everyone, even those who were already members, so I altered it so it would only select friends who needed the invite. Follow the steps below to create the bookmarklet that makes this work. The instructions are for Firefox, but should be similar for other browsers.

How to create a Firefox Bookmarklet The best way to do it would be to add this as a browser bookmarklet. So in FireFox:

1. Right click next to your other bookmarklets and select New Bookmark.
2. In the Name field type: FaceBook Select All (or whatever you want)
3. In the Location field copy and paste the code you see below in the code box exactly as it is. You can leave the KEYWORDS and DESCRIPTION field blank. They aren’t necessary.

   javascript:elms=document.getElementById('friends').getElementsByTagName('li');for(var fid in elms){if(typeof elms[fid] === 'object' && elms[fid].className != 'disabled'){fs.click(elms[fid]);}}

4. Hit Add.

You can also just drag this link to your bookmark toolbar: FB Select All

Now wherever you are adding friends to an event or group using the Facebook friend selector you can click the bookmarklet and it will select everyone who is not already a member.

Enjoy.