6 ms·
Show HN: Airdraw
Hey 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 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/ https://arefmalek.github.io/blog/Airdraw/
If anyone has issues with loading, try again with this link - https://web-draw-e58vy7q9m-arefmalek.vercel.app/ 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 ¯\_(ツ)_/¯
- jacob-zietek 3y agoPretty neat :)
- endisneigh 3y agoWaited 20 seconds - stuck at “model loading.” Closed the page. iOS 17.2 with safari.
- MoSattler 3y agoSame on Safari on Mac
- arflikedog 3y agoHey! 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
- Gerard0 3y agoEdit. My bad. It works on Firefox on Android for me. Not on Vanadium.
- solardev 3y agoNot 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-permissions-and-in-use https://jamesburnside.github.io/blog/detecting-camera-permis...
- eternityforest 3y agoWorks close to instantly on Chrome on a Pixel 8
- 38 3y agosame
- arflikedog 3y agoAdded a check for the cameras before prompting the canvas, it looks like that is changing things? Let me know
- kashifzaidi1 3y agomy 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.
- neeleshs 3y agoAzima Dhanjee at ConnectHear (I believe it's a Pakistan based startup) has done some groundbreaking work here.
- SushiHippie 3y agohttps://github.com/mgyong/awesome-mediapipe#sign-language-hand-gesture-related https://github.com/mgyong/awesome-mediapipe#sign-language-ha... there are some samples, using the same framework that airdraw uses.
- pockybum522 3y agoOkay that's really fun. Awesome interface. Works on latest FF on Win 10.
- fiiisssh 3y ago[dead]
- mortenjorck 3y agoThis 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!
- arflikedog 3y agogood 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/ https://web-draw-e58vy7q9m-arefmalek.vercel.app/
- mortenjorck 3y agoJust tried it on an iPad; works great!
- russellbeattie 3y agoPretty 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.
- Nowado 3y agoYou really don't want to have white text on light grey buttons. Fun little thing otherwise!
- wbobeirne 3y agoTo 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.
- purplecats 3y agowould like this on https://excalidraw.com/ https://excalidraw.com/
- nilsherzig 3y agoSurprisingly intuitive :)
- dmd 3y agoIf you unexpectedly get balloons in your video, here's why: https://support.apple.com/en-us/105117 https://support.apple.com/en-us/105117
- ljm 3y agoIt 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)
- mdaniel 3y agomy 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.
- stuckinaloop 3y agoZot Zot Zot! Nice to see another anteater here!
- xwowsersx 3y agoThis is really cool, nicely done
- nadermx 3y agoThe demo gif in the github, https://github.com/arefmalek/airdraw 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
- arflikedog 3y agoAppreciate that, it would probably help tie things together better in the instructions
- keithnz 3y agopretty 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.
- ryen 3y agoI 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.
- ryen 3y agoThis would also be useful for making signatures when needed on a website.
- Hewlberno 3y agoI was building something really similar here https://ablepaint.dreammachine.one/ https://ablepaint.dreammachine.one/ !
- tcper 3y agoGreat works!
- alwinaugustin 3y agoI acknowledge the effort you put into this, but I'm curious about the practical application or purpose behind it.
- arflikedog 3y agohaha 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
- the100rabh 3y ago[dead]
- geniium 3y agoNice. The interface looks still complex to use to me
- librasteve 3y agopatent this now
- 1317 3y agopeace + pinky finger is quite difficult for me to do, i would prefer a different gesture for erase if possible
- dopp0 3y agoIt would be really helpful if you could make signatures (like signing contracts/etc).
- k310 3y agoRegarding 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.
- ahmedmobin 3y agowow. dude you have an awesome idea. Will definitely try it.