After my initial fooling around with combining the Leap Motion JavaScript library with Paper.js – and some gentle prompting from Kerry Brown – I started looking at how it might be possible to integrate Leap Motion support into the Meta Balls and Voronoi samples from the Paper.js website.
These are both somewhat more complex samples, with Voronoi requiring an external JavaScript library. As usual with the Paper.js samples the posted versions are coded in PaperScript, so I realised I was wrong about needing to code in pure JavaScript to integrate LeapJS with Paper.js. Happy days! :-)
Anyway, so it turns out much of the work I did last time was redundant, even if it was an interesting exercise to convert a PaperScript sample to JavaScript. I therefore decided to take the posted versions of the Lines, Meta Balls and Voronoi samples – all coded in PaperScript rather than pure JavaScript – and create versions that integrate LeapJS in the lightest possible way (i.e. with the code staying in PaperScript).
I made relatively few modifications to the originals, mainly to make them fit better in the width of the blog. Meta Balls and Voronoi were actually slightly trickier to get working than Lines: Lines had a constant onFrame() callback animating the lines on each browser frame that the other two were missing (as they didn't need to have their graphics animated continuously). Once I added an onFrame() handler to regenerate the graphics on a repeated basis - using a "dirty" flag to keep performance reasonably snappy - both these samples worked well with input from LeapJS. Overall the code additions are nothing at all special – the code to integrate Leap Motion was trivial.
Here they all are, embedded and linked to their source files. Just as last time, none of these samples actually need a Leap Motion device to be viewable – they will also respond to mouse movements across their respective windows.
What's quite cool is that if you are using a Leap Motion controller each of the three embedded views, below, will respond to the hand movements in sync. Although you'll see smoother performance if you load each page in turn, of course.
Fun stuff! At some point I plan to take a look at using Paper.js inside AutoCAD, to see what interesting UI capabilities it brings when implementing a palette-based UI in HTML and JavaScript.
