HTML5, Vert.x, Leap Motion and other goodies

What follows are some of my favorite presentations/demonstrations of some very fun technology.  Leveraging technologies like HTML5 Canvas, Vert.x - a reactive async platform and Leap Motion for gesture UI.   

Multi-user Painting with Vert.x

One of most fun demos I have created was related to Vert.x 2 and allowing for audience participation...in a live demonstration.   Here is a single-user recording of the demonstration I called "paint" as it is a multi-user painting tool.  Audience members use their phones to touch draw via HTML5 canvas something on their smartphone web browser,  those events were captured via JavaScript, sent up to Vert.x running on Openshift and then back to the dashboard running on my laptop's browser.  

This demonstrates not only the power of HTML5 Canvas, but also Websockets and a reactive async platform like Vert.x.  Warning: some of your audience members may draw some rated R or NC-17 images when you are displaying all the individual images via the dashboard, I have had that happen.  I used this demo at Great Wide Open 2014 and Devoxx 2013 (Vert.x is toward the very end). 

Note: Paint is NOT a representation of great coding - it is cool hacking - to make something work with the least amount of pain.  :-)

Leap Motion Finger Painting

Taking advantage of Leap Motion and Leap.js to capture the figure gestures to draw on my desktop browser but also leverage Vert.x EventBus to reflect the gestures out to mobile devices.  I think of it as a "reach out and touch somebody" kind of demo - where I can put my hands on the audience's phones.   In this case Leap's gestures are being sent up "to the Cloud" (Openshift) and then back out to the mobile devices.  Basically the opposite flow from the multi-user painting demonstration above.

 

Finger painting code

Reveal.js and Leap Motion

The Hitchhikers Guide to the JBoss Galaxy presentation has been used on several occasions and different events and I took some time to move it from PowerPoint to Reveal.js.   Based on the experience with gesture tracking and finger painting,  I thought I can hack in simple gesture-based navigation.  It works fairly well but it is hard to capture via video.  

I used the ZiggiHD USB-powered document camera to make the Leap Motion controller visible in the bottom left corner - see video.