How Developers Start Conversations

How Developers Start Conversations

During our last hiring event here at ACES, Inc. in Colorado, we decided to geek out a little and do something fun. Since we were hoping to have some software developers show up, we wanted to have something that would grab their attention when they walked into the room.  I ended up throwing together a quick demo that we could project on the wall during the hiring event that people could interact with. ACES, Inc. develops many applications, but we have a good deal of experience developing web applications, using JavaScript frameworks, and other web technologies. Our R&D department also get’s to play with some cool things, like the Leap Motion controller, so we decided to throw the two together in an interactive way. We ended up calling it the ACES, Inc. Interactive Particle Wall.  

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.  

Demo Time

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.

Launch Demo

 

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 particles are generated using a cool javascript libray called particles.js. We started with an example they had and changed the styling a bit to be more visible on the projector.

Next we had to integrate the Leap Motion controller, and luckily there is a great JavaScript driver for the Leap Motion we were able to use. We also found a great plugin for the Leap Motion JavaScript driver called Leap Cursor. Leap Cursor just provides us a visual representation of where the users hand its on the screen. It does not provide the interaction with the particles or the clicking action we were after.

In order to get the hand movement to affect the particles on the screen, we had to use the Leap Motion JavaScript library and dig into particles.js a bit. The Leap Motion will provide the users Hand Position on the screen, and while particles.js will let you interact with the particles with your mouse out of the box, it doesn’t recognize the movement of the Leap Motion. So we had to convert the screen position events, which we get every frame in the Leap.loop handler, into mouse positions and make particles.js think the mouse moved. We also did a little bit of scaling on the position to match the screen a little better. This bioled down to a pretty simple bit of JavaScript you can see here:

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!

Share this post