Camera Shader

This is a camera filter with shader and ML5 that I wrote with p5js
My Sharingan needs 20 seconds to load. Be patient!

Play it in editor
Github Link (shorter load time if you open it with a local server in VS code)
The algorithm that I used on ML5:

Version 1 Documentation:

My idea comes from the anime called Naruto. The effect mimics Kamui, a space-time ninjutsu. It can suck stuff into different time-space like a black hole.

The Kamui can only be triggered if people have Sharingan. Thus, the
face tracking algorithm help stick a Sharingan onto my right eye

Shader code:

This is the most challenging part of this shader. This equation in
the fragment shader determines the degree to rotate for each UV
pixel.

Version 2 Documentation:

In the previous experimental camera, I didn't give users the choice to use their Chakra or not. As Kamui is an extreme ninjutsu, it used up a lot of Chakra. If not careful, users may pass out using too much Chakra. Thus, the effect needs users to consent to use their Chakra.

Now, users need to actively choose to use their Chakra by making the hand sign.
Freely Given: There is no pressure to use chakra
Reversible: If users change their mind, they just undo the hand sign. Their Chakra will no longer be used
Informed: Users are reminded to use hand sign, and they are informed that this ninjutsu uses a lot of Chakra
Enthusiastic: Nothing so exciting and pushing.
Specific: it's pretty straight forward

In the previous design, users feel passive or forced to use Kamui. It's not a good thing for every user. Thus now, users need to actively consent to use their Chakra to use Kamui. It's safer and more informed to users.