# Is there any way to implement invisibility using opencv js framework

**URL:** <https://discourse.processing.org/t/is-there-any-way-to-implement-invisibility-using-opencv-js-framework/29079>\
**Category:** Libraries\
**Created:** [April 3, 2021, 7:34am UTC](https://discourse.processing.org/t/is-there-any-way-to-implement-invisibility-using-opencv-js-framework/29079 "2021-04-03T07:34:17Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![bandhavya](https://avatars.discourse-cdn.com/v4/letter/b/958977/32.png) [@bandhavya](https://discourse.processing.org/u/bandhavya)\
**Post date:** [April 3, 2021, 7:34am UTC](https://discourse.processing.org/t/is-there-any-way-to-implement-invisibility-using-opencv-js-framework/29079/1 "2021-04-03T07:34:17Z")

</div>

> please format code with \</\> button \* [homework policy](https://discourse.processing.org/faq/#homework) \* [asking questions](https://discourse.processing.org/t/2147)

Is there a possibility of implementing something like this [https://analyticsindiamag.com/my-fun-ai-project-how-to-be-invisible/](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

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [April 3, 2021, 9:05am UTC](https://discourse.processing.org/t/is-there-any-way-to-implement-invisibility-using-opencv-js-framework/29079/2 "2021-04-03T09:05:53Z")

</div>

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  
[![](https://naotohieda.com/blog/assets/images/2018-03-16-bc-greenscreen.jpg) ](https://naotohieda.com/blog/assets/images/2018-03-16-bc-greenscreen.jpg)  
[![](https://naotohieda.com/blog/assets/images/2018-03-16-bc-composite.jpg) ](https://naotohieda.com/blog/assets/images/2018-03-16-bc-composite.jpg)

In this case I used shader (I used PShader in Processing but [p5.shader](https://p5js.org/examples/3d-shader-using-webcam.html) in case of p5.js) because it performs fast enough in real time compared to OpenCV (I ported [one from shadertoy](https://www.shadertoy.com/view/llBGWc)). But if you are not familiar with it, I recommend iterating over pixels by [`loadPixels`](https://p5js.org/reference/#/p5/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

[![](https://img.youtube.com/vi/rPSkeX4P1Bw/maxresdefault.jpg "MEISAI - AR Effects for iOS / Kitasenju Design") ](https://www.youtube.com/watch?v=rPSkeX4P1Bw)

And perhaps it’s not impossible to do it in p5.js. Thanks to ml5.js [BodyPix](https://ml5js.org/reference/api-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/](https://www.otaquest.com/masahiko-inami-thermo-optical-camouflage-interview/)

---

<div class="post-metadata">

**Author:** ![bandhavya](https://avatars.discourse-cdn.com/v4/letter/b/958977/32.png) [@bandhavya](https://discourse.processing.org/u/bandhavya)\
**Post date:** [April 3, 2021, 9:46am UTC](https://discourse.processing.org/t/is-there-any-way-to-implement-invisibility-using-opencv-js-framework/29079/3 "2021-04-03T09:46:04Z")

</div>

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?](https://analyticsindiamag.com/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](https://towardsdatascience.com/turn-yourself-invisible-using-python-and-opencv-3a66dfa8af80) but using p5.js, ml5.js

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [April 3, 2021, 11:46am UTC](https://discourse.processing.org/t/is-there-any-way-to-implement-invisibility-using-opencv-js-framework/29079/4 "2021-04-03T11:46:45Z")

</div>

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](https://learn.ml5js.org/#/reference/bodypix) to see what’s possible and try to make something fun to get used to it. You can also check out their [discord](https://discord.com/invite/eejKFhuakF) 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](https://en.wikipedia.org/wiki/Physically_based_rendering) and [Fresnel reflection](https://en.wikipedia.org/wiki/Fresnel_equations). 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](https://hydra.ojack.xyz), which can make similar (but fake) effects in a much easier way.