please format code with </> button * homework policy * asking questions
Is there a possibility of implementing something like this https://analyticsindiamag.com/my-fun-ai-project-how-to-be-invisible/
Is this possible using js framework? I do not want to use python library as Im not aware of
First of all do you mean using p5.js? The category you chose is Processing (Java) so it would be helpful if you change the category of the post. Also if it’s “any” javascript framework, I don’t know if this is the best forum to ask - so I assume that you are using p5.js somehow.
My question would be what you mean by “invisibility” (at first I thought you are talking about HTML/CSS invisibile 
). The link seems to be using color key - and in case of green color, it is called chroma key. Here’s what I did before
In this case I used shader (I used PShader in Processing but p5.shader in case of p5.js) because it performs fast enough in real time compared to OpenCV (I ported one from shadertoy). But if you are not familiar with it, I recommend iterating over pixels by loadPixels and check if it’s close to green (or other color you want to mask) by checking the “distance” between colors and if they are close enough, replace the pixel with another color from an image, and at last run updatePixels. This way it’s slower but you can see the concept, and for a simple example you don’t need OpenCV.
But… this is actually the opposite of being invisible as you make the background or the blanket invisible, not yourself. This is actually tricky because if you want to be “perfectly” invisible, you can take a photo with a webcam without you and claim that there is invisible you in the photo. I know it’s dumb, but actually that’s why I’m asking what you mean by invisible.
If you want to make “special effects” like anime or film, you need to look into body tracking and computer graphics (like, again, shader). Here’s a good example that uses iOS hand tracking
And perhaps it’s not impossible to do it in p5.js. Thanks to ml5.js BodyPix you can track the whole body. So in theory you can create a similar effect, but I don’t know if browsers are powerful enough to handle both tracking and “realistic” rendering at the same time.
also Dr Inami’s work is interesting:
https://www.otaquest.com/masahiko-inami-thermo-optical-camouflage-interview/
Thanks alot @micuat for such a nice example and quick response.
Yes, I want to implement almost the similar one as shown in youtube video link (MEISAI) that you shared.
And for this I have implemented live streaming video using p5.js. And In this video, whenever hand or some object like pen obstructs in the video then I want to make hand and pen as invisible.
Is this possible using p5.js and ml5.js. Please guide me through some references as Im not finding proper document to start this.
Im familiar with js hence I want to know if this is possible using ml5.js and p5.js
When I went through some online stuff, saw this My Fun AI Project - How To Be Invisible? and started to learn python to implement using opencv as in the given url.
See this is the exact way I need to implement https://towardsdatascience.com/turn-yourself-invisible-using-python-and-opencv-3a66dfa8af80 but using p5.js, ml5.js
hmm I don’t know your skills so it’s hard to give you a guidance - fluent in javascript can mean anything, and for example, being a full stack developer doesn’t benefit much when you implement special effects. And there is no such tutorial for “making invisible effect” out there (or maybe, who knows) as this requires quite specialized techniques from different fields.
It’s going to be very difficult and frustrating if you aim straight to create such effect by starting from learning computer vision and shaders simply because it takes time. I would recommend first, forget about the effect, look into examples on ml5.js to see what’s possible and try to make something fun to get used to it. You can also check out their discord and ask questions there (you can ask here as well, but I think there’s a better chance getting more replies there for ml5 specific questions).
If you get the idea of ml5.js and bodypix, perhaps you can start combining shaders (GLSL) to add effects - but if you want to make it “realistic” you need to learn techniques like physically based rendering and Fresnel reflection. Working with shaders is whole another topic and this can be very confusing too. There is always more “fun” (and often refreshing even if you are already familiar with shaders) alternatives like Hydra, which can make similar (but fake) effects in a much easier way.