Show HN: Airdraw

269 points by arflikedog 2 years ago | 46 comments

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 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 ¯\_(ツ)_/¯

nadermx 2 years ago |

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

arflikedog 2 years ago | |

Appreciate that, it would probably help tie things together better in the instructions

kashifzaidi1 2 years ago |

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.

neeleshs 2 years ago | |

Azima Dhanjee at ConnectHear (I believe it's a Pakistan based startup) has done some groundbreaking work here.

SushiHippie 2 years ago | |

https://github.com/mgyong/awesome-mediapipe#sign-language-ha...

there are some samples, using the same framework that airdraw uses.

mortenjorck 2 years ago |

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!

arflikedog 2 years ago | |

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/

mortenjorck 2 years ago | | |

Just tried it on an iPad; works great!

russellbeattie 2 years ago |

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.

dmd 2 years ago |

If you unexpectedly get balloons in your video, here's why: https://support.apple.com/en-us/105117

ljm 2 years ago | |

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)

yreg 2 years ago | | |

Would be nice to have a middle finger facetime effect as well.

arflikedog 2 years ago | |

haha this is absolutely hilarious, couldn't have predicted this

mdaniel 2 years ago | |

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.

makeworld 2 years ago | | |

Those FaceTime settings will actually turn it off globally, I'm told.

endisneigh 2 years ago |

Waited 20 seconds - stuck at “model loading.” Closed the page. iOS 17.2 with safari.

arflikedog 2 years ago | |

Added a check for the cameras before prompting the canvas, it looks like that is changing things? Let me know

MoSattler 2 years ago | |

Same on Safari on Mac

arflikedog 2 years ago | | |

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

eternityforest 2 years ago | |

Works close to instantly on Chrome on a Pixel 8

38 2 years ago | |

same

ryen 2 years ago |

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.

ryen 2 years ago | |

This would also be useful for making signatures when needed on a website.

Hewlberno 2 years ago |

I was building something really similar here https://ablepaint.dreammachine.one/ !

k310 2 years ago |

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.

stuckinaloop 2 years ago |

Zot Zot Zot! Nice to see another anteater here!

dopp0 2 years ago |

It would be really helpful if you could make signatures (like signing contracts/etc).

Nowado 2 years ago |

You really don't want to have white text on light grey buttons.

Fun little thing otherwise!

wbobeirne 2 years ago | |

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.

pockybum522 2 years ago |

Okay that's really fun. Awesome interface. Works on latest FF on Win 10.

keithnz 2 years ago |

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.

geniium 2 years ago |

Nice. The interface looks still complex to use to me

purplecats 2 years ago |

would like this on https://excalidraw.com/

1317 2 years ago |

peace + pinky finger is quite difficult for me to do, i would prefer a different gesture for erase if possible

jacob-zietek 2 years ago |

Pretty neat :)

xwowsersx 2 years ago |

This is really cool, nicely done

alwinaugustin 2 years ago |

I acknowledge the effort you put into this, but I'm curious about the practical application or purpose behind it.

arflikedog 2 years ago | |

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

nilsherzig 2 years ago |

Surprisingly intuitive :)

ahmedmobin 2 years ago |

wow. dude you have an awesome idea. Will definitely try it.

tcper 2 years ago |

Great works!

librasteve 2 years ago |

patent this now