Inspiration: I wanted to create an immersive creative experience with as little limitation as possible.
What it does: Allows users to "paint" a canvas with their own hands. Alternate through a color wheel with the twisting of a fist, and save your creations by placing two hands over the motion sensor. Finally, when you want to start from a blank slate, crush the canvas in your hands and tear it down (lower hands and close fists).
How I built it: I used a Javascript library for the Leap Motion to get directional unit vectors and positions of various fingers and hands throughout the process of painting. To determine which fingers were "painting" and which were wavering to the side of the canvas, I took dot products of vectors and evaluated results. To spin the color wheel, I took a similar dot product approach with the x and y axis to determine the colors chosen.
It was difficult keeping track of the color that was being used to paint. To do this, I saved the color as the class name of a div in the html body. This class name would be dynamically updated as the color wheel is spun to adjust colors. It was also difficult Maintaining pointers for the tips of the index and middle finger used to paint. To do this, I created a high order function in Javascript which contained a function necessary to continuously update the pointer selected.
Accomplishments that I'm proud of: I'm proud of how intuitive I got the entire web app to work. From the painting, to the process of changing colors and saving images/clearing the canvas. Everything is extremely user friendly and seamless to use.
What I learned: I learned a ton about the Leap Motion, and just how user friendly all their documentation is. I learned all about the html canvas element, and the cool ability it has to be converted to .png data.
What's next for TouchPaint: I'll keep the website up on a different domain, so one day when I get a Leap Motion I can come back and draw.
Log in or sign up for Devpost to join the conversation.