What it does

Using the Leap motion api, we were able to create a webpage in which the user can customize the background color of a webpage using hand motions

How I built it

Using JavaScript, html, and the leap motion api, we were able to track the coordinates of the center of the users hand above the leap motion sensor. These values x,y, and z were then inserted as the red, green, and blue values of the RGB color system for the background. By making a taping motion with your finger, the user can lock in the color at that moment. Making the taping motion again will unlock the background again for customization.

Challenges I ran into

The most challenging aspect was utilizing the API. When gestures are inputted, they are often logged multiple times for a single action. So trying to make a single change after a single motion was made, often resulted in the change applied an unknown number of times. This was also the team's first time really working with API's so understanding how to go about our task was a major hurdle.

Accomplishments that I'm proud of

The project took on many iterations. It started with a simple switch from a black to a white background. Then when the user would swipe their hand across the sensor, it would cycle through the colors of the rainbow with each swipe. We even spent some time trying to create a simple synthesizer. But through all of those iterations the most rewarding and challenging was getting the background to be continually updated based on the location of the users hands in real time.

What I learned

As a team each got experience utilizing API's and some basic JavaScript and html

What's next for Leap Motion Lights

What sparked this whole project was trying to adjust the lights in your house using simple hand gestures. If we were to continue to work on this project we would try to integrate with house hold lighting

Share this project:

Updates