Show HN: Airdraw
airdraw.ioHey Everyone! I wanted to show my passion project I made a few years back and recently turned into a web app.
Airdraw is an app that takes in your hand gestures and converts it into real time drawing capabilities.
There are tons of stuff I want to build with this, but most importantly just put it out into the world! Hope you all enjoy :)
Tested on my MacOS with Chrome, Safari, and FF
I included a link to the original GH project I wrote here - https://github.com/arefmalek/airdraw and a link to the blog where I explained how I made it here - https://arefmalek.github.io/blog/Airdraw/
If anyone has issues with loading, try again with this link - https://web-draw-e58vy7q9m-arefmalek.vercel.app/. AFAIK, IOS livestream doesn't allow a canvas overlay so you would be able to draw, but not see anything until you exit the livestream. Hope someone has a sol for that ¯\_(ツ)_/¯ The demo gif in the github, https://github.com/arefmalek/airdraw, is pretty awesome. Thanks for postin the code as well. Perhaps put that demo in home page of the website Appreciate that, it would probably help tie things together better in the instructions my father is deaf and mute, particularly the Pakistani sign language, one particular utility i see this can be really useful for is if the model can be trained on detecting different sign languages, then it would become possible for live translation to happen and in a distant future all people like my dad can talk with each other beyond their small communities. I don't think something like that exists. Azima Dhanjee at ConnectHear (I believe it's a Pakistan based startup) has done some groundbreaking work here. https://github.com/mgyong/awesome-mediapipe#sign-language-ha... there are some samples, using the same framework that airdraw uses. This is a delight to play with; thanks for sharing! One slight UX suggestion: Consider a "start" button before making the camera request. Permission prompts are blocking modals on Safari (unlike Chrome where they're a pop-over from the toolbar), so the user doesn't necessarily have context if it's on page load! good catch! I just put a little button in, give this a try and if it works for you I'll push to production - https://web-draw-e58vy7q9m-arefmalek.vercel.app/ Just tried it on an iPad; works great! Pretty cool and intuitive. I think translation would be more natural between the thumb and index finger, as if you were closing around to pinch the squiggle. Also, look at the many JS drawing samples out there - it's very simple to smooth out the lines - either by adding a small delay to calculate the curves on the fly, or by snapping to the curve when the line stops. If you unexpectedly get balloons in your video, here's why: https://support.apple.com/en-us/105117 It actually knows the difference between the British version of the middle finger (the V) and the peace sign (Peace sign has palm facing out, 'fuck you' sign has palm facing in) Would be nice to have a middle finger facetime effect as well. it saddens me to say it, but the middle finger emoji has long since displaced the thumbs up in my most-recent shortcuts haha this is absolutely hilarious, couldn't have predicted this my colleague always gets this shit during our Zoom calls, and searching for "disable" or "off" on that page only coughs up Facetime-centric settings, and (for good or bad) searching for "zoom" is damn near worthless I sure do hope that made some PM a bazillion dollars, because it's not a good use of glucose, and worse when multiplied by the amount of glucose required by everyone downstream who now needs to expend energy to learn(?) how to turn it off Snow Leopard for life. Those FaceTime settings will actually turn it off globally, I'm told. A menu icon appears in the global menu bar when video is active, you can disable it from there. Waited 20 seconds - stuck at “model loading.” Closed the page. iOS 17.2 with safari. Added a check for the cameras before prompting the canvas, it looks like that is changing things? Let me know Same on Safari on Mac Hey! Was this even with camera enabled? I just ran the site on my Safari MacOS locally and it works. The big thing to wait on is the actual model weights, its ~7.5 MB according to MP website, and i also make requests out to the MP website for WASM stuff Not the OP, but in Chrome, with my camera permission disabled (i.e. set to "Don't allow sites to use your camera"), I also just get that "Model loading" forever. Once I turned it on manually, it loaded instantly. Maybe there could be a permissions check and an error message if it's disabled? https://jamesburnside.github.io/blog/detecting-camera-permis... Edit. My bad. It works on Firefox on Android for me. Not on Vanadium. Works close to instantly on Chrome on a Pixel 8 same I had a lot more fun with that than I expected great work! I found my finger maneuvers not crisp enough to do anything with real detail. One idea I immediately had was to use a key on the keyboard (if not on mobile of course) as triggers for draw, hover, erase, etc. You could also control different colors that way, possibly even draw generated shapes like circles and rectangles (press 'c' to start a circle, then use your finger to drag out the size, stop with 'c' again). and if you want to get really advanced, allow rotation of the drawn object and then choose a new plane to draw on. This would also be useful for making signatures when needed on a website. I was building something really similar here https://ablepaint.dreammachine.one/ ! Regarding the HN post. This is the first time I have seen a clickable URL in an OP. Did something change? It's nice not to have to copy and paste the URL. Zot Zot Zot! Nice to see another anteater here! It would be really helpful if you could make signatures (like signing contracts/etc). You really don't want to have white text on light grey buttons. Fun little thing otherwise! To the OP: It looks like your `button`s have no `color` property, and are just relying on the user agent stylesheet to (hopefully) be a dark text color. This will vary for different users. Okay that's really fun. Awesome interface. Works on latest FF on Win 10. pretty cool, main thing is you really want to do all your drawing above your shoulders. Below your shoulders you start rotating your hand and it loses track. Nice. The interface looks still complex to use to me would like this on https://excalidraw.com/ peace + pinky finger is quite difficult for me to do, i would prefer a different gesture for erase if possible Pretty neat :) This is really cool, nicely done I acknowledge the effort you put into this, but I'm curious about the practical application or purpose behind it. haha originally was just a stupid teenager that liked CV and learned about lin alg for the first time. Still stupid 20 something, but now I'm just looking for ways to put it into good use Surprisingly intuitive :) wow. dude you have an awesome idea. Will definitely try it. Great works! patent this now