HN Explorer

Show HN: Airdraw (airdraw.io)

269 points by arflikedog ↗ HN
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 ¯\_(ツ)_/¯

48 comments

[ 3.4 ms ] story [ 107 ms ] thread
endisneigh
Waited 20 seconds - stuck at “model loading.” Closed the page. iOS 17.2 with safari.
MoSattler
Same on Safari on Mac
arflikedog
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
Gerard0
Edit. My bad. It works on Firefox on Android for me. Not on Vanadium.
solardev
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...

38
same
arflikedog
Added a check for the cameras before prompting the canvas, it looks like that is changing things? Let me know
kashifzaidi1
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
Azima Dhanjee at ConnectHear (I believe it's a Pakistan based startup) has done some groundbreaking work here.
pockybum522
Okay that's really fun. Awesome interface. Works on latest FF on Win 10.
mortenjorck
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!

russellbeattie
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.

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

Fun little thing otherwise!

wbobeirne
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.
dmd
If you unexpectedly get balloons in your video, here's why: https://support.apple.com/en-us/105117
ljm
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
Would be nice to have a middle finger facetime effect as well.
noduerme
it saddens me to say it, but the middle finger emoji has long since displaced the thumbs up in my most-recent shortcuts
mdaniel
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
Those FaceTime settings will actually turn it off globally, I'm told.
tedd4u
A menu icon appears in the global menu bar when video is active, you can disable it from there.
arflikedog
haha this is absolutely hilarious, couldn't have predicted this
stuckinaloop
Zot Zot Zot! Nice to see another anteater here!
xwowsersx
This is really cool, nicely done
nadermx
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
Appreciate that, it would probably help tie things together better in the instructions
keithnz
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.
ryen
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
This would also be useful for making signatures when needed on a website.
alwinaugustin
I acknowledge the effort you put into this, but I'm curious about the practical application or purpose behind it.
arflikedog
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
geniium
Nice. The interface looks still complex to use to me
1317
peace + pinky finger is quite difficult for me to do, i would prefer a different gesture for erase if possible
dopp0
It would be really helpful if you could make signatures (like signing contracts/etc).
k310
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.