We decided to build a simple web page that would show a Welcome to ACES, Inc. sign that we could project on a wall in our large conference room where the hiring event was being held. On the screen, you would see some random particles floating around the wall. If you walked up to the wall and held you hand over the Leap Motion controller, you could interact with the particles. Waving your hand around would select particles and tapping with your hand would cause particles to explode from where you tapped. It was a simple interaction, but gave us something to talk about with other developers who came to our hiring event. We also had our Oculus Rift out for people to play with as well, but it wasn’t part of this demo.
The screenshot above is what the application looked like, but screenshots are no fun to play with! I bet you’d love to see it for yourself huh? Well you’re in luck! Before you jump over, if you have a Leap Motion, be sure to plug it in and you’ll be able to interact with it just like we were, but without the projector.[btn_link url=”https://acesinc.github.io/ACESInteractiveParticleWall/” size=”sm” cls=”primary”]Launch Demo[/btn_link]
If you are interested in the implementation details, keep reading. Otherwise, let us know what you think!
How was this implemented?
First, we are excited to let you know that we have decided to open source our little project for others to play with and you can find it over on github. Before you dive into the code, below is a description of how we built this demo application.
The implementation started with a simple HTML/CSS page that has very little content. It mainly builds the Welcome to ACES, Inc. sign and sets up the scene for the particles.
The same was true about allowing the user to click on the screen with a tap of the hand. We had to convert the click event from the Leap Motion into an event that triggered an explosion of particles on the screen.
All in all, it is a pretty simple solution, but the integration of all these technologies takes a bit of time and digging to find just the right mix of code to make it all work right.
We hope you found this interesting, and if you were able to see it in person, lucky you! If you’d like to come visit ACES, Inc. here in Colorado or in Maryland, don’t hesitate to contact us!