Liquid Layers with Hand/Body Tracking via Webcam

Demo: grantkot.com/d...
Tracking with Google's MediaPipe. It operates purely off the RGB image from the laptop webcam, no special equipment needed.

[@m.i.c.h.o]

Yeah this is wild. So cool

[@Mark_Rober]

I did not expect this to be so fun! when my brother walked past even he decided to try it out!

[@GrantKot]

Awesome! You have an integrated GPU, right? Looks like maybe webtech really is ready

[@Mark_Rober]

@@GrantKot yep! It is surprisingly performant too! It runs at like 20 fps but i did have a lot of tabs open, and i was using opera not chrome

[@idontwantahandlethough]

this is so sick

[@dragoons_net]

Brillant idea! So fun!!!

[@EqualToBen]

WOW!

[@duanepetersen8776]

This is so cool, but I'm stuck with a white background on my laptop. Don't know how to get a black one.

[@GrantKot]

I'll try to fix it soon. The canvas that draws the user lines isn't paying attention to the browser's light/dark mode preference. Maybe i should just make it all dark mode anyway.

[@duanepetersen8776]

@@GrantKot My kids LOVE this! I think I play with it more than them.

[@GrantKot]

Awesome, happy to hear!

[@cyber-gate]

Epic, how do you come up with these ideas?

[@GrantKot]

I did some Kinect experiments in the past, and then I recently saw a demo called Floating Hands by Johnathan Chiu on Twitter and was made aware of MediaPipe. I thought it was super cool that it just runs locally on-device in the browser and decided to add it to my own app. The line collision handling was already there so I just used that.

[@markifi]

i'm sorry but now you just have to implement cat detection

[@GrantKot]

That should actually be possible lol. I also wanted to train some swimming creatures in there