Beads.js experiments: clock

About

This clock was made by Ben Morgan (my brother) in 2008 with Processing for a university assignment. Since then he tried once or twice to port it to Processing.js, but it's never worked properly due to issues in Processing.js. With my recent development porting Beads to JavaScript, I decided to have a try porting it, with the plan of adding sound to it when complete. So I did. It was actually quite difficult, because there were a number of significant bugs in Processing.js, mainly to do with inheritance. After reporting them (if you ever find bugs in a library, please report them - we like to know so that we can fix them, don't just work around it; the same goes for my own Beads.js), I had to work around them for the moment. Firstly I did that by flattening the class structure - so that SecondBall contained all of the members of Ball and DrawingObject as well. As you can imagine, this made the code very messy. So then I went and redid it all in native JavaScript, ending up with a clean class structure which Processing.js could use - having skipped the Processing compiler. Then there were some optimisations I made, so that the code doesn't actually quite match what Ben had in how it does things in a few places. The final result is visually the same though.

Sound

First of all, I designed the alarm (with one particular old digital alarm clock in mind). It was fairly easy, as a square wave matches the noise fairly well, and the results weren't too bad. At 30fps, however, the sound doesn't tend to be smooth.

Unfortunately, Beads.js uses a reasonable amount of processor power (especially when constantly adding and removing inputs) - and so does Processing.js. My first port of the clock was unusably slow due to super attribute access overheads in the way Processing.js tries to maintain Processing compatibility rather than using normal JavaScript prototype inheritance. The flattened version worked considerably better, not having that overhead. But still, the clock graphics combined with the clock noises didn't perform very well. Before this clock will have audio for all aspects of it, significant optimisation of Beads.js will need to take place.