Smudge Effect Using Jitter

Noah Mitchell's icon

Hello,

I am looking to recreate this effect (https://www.shadertoy.com/view/3l3yDn ) using jitter.

I am not too good with text coding for shaders so if there is a way to do this with max objects that would help me a lot. I am a pretty advanced jitter user, but I cannot figure out how to do additive effects with jitter (I can do some 'smudging' but the smudge effect goes away when I remove the object manipulating the UV coordinates)

Any help is appreciated. Thank you
Noah

Rob Ramirez's icon

there's some tricky bits to how they are storing the previous mouse position that I don't quite understand and must be shadertoy specific, so I made some minor edits, but otherwise pasted straight in and provided proper mouse info.

smudger.zip
application/zip 6.66 KB

Noah Mitchell's icon

Thanks a ton rob. I’m away from my computer for a few days. I will test it out soon and get back to you. jit.gl.pix is my go to for making shaders. I still have a difficult time doing shaders without visual scripting

Noah Mitchell's icon

That effect is amazing. Wish I knew the basis of shaders better. I am attempting to repurpose that code into unity. I will keep working. Thanks for the help!

👽'tW∆s ∆lienz👽's icon

was looking at this myself, in case it helps, i notice i can remove everything having to do with the 'iTime' variable from this Jitter version and it still works perfectly(just mentioning in case it helps declutter while learning from).

and thanks, Rob, definitely an amazing effect(been wanting something like this but that bleeds in certain predefined directions depending on specified color: this gets me so much closer).

Noah Mitchell's icon

It is a truly great effect. Recreating the liquify filter from photoshop. My goal with this effect was to have a texture on a plane in a video game and once a character slides, it does the same smudge as moving the mouse in this example.

Been using jitter for awhile and I am still learning text based shaders :)

Rob Ramirez's icon

I reworked this a bit to use only a single jit.gl.pix object in a way that is hopefully easier to understand. shadertoy shaders are force to incorporate their mouse logic in the glsl code, but we are not so encumbered, and therefore I moved that logic out of the shader. We can also utilize multiple outputs in a single shader pass.

Something that was tripping me up here is that mouse data was asynchronous to draw frames causing wrong mouse delta values to be calculated and flimsy streaks. after synching the mouse data with the frame draw I got parity with the shadertoy behavior.

smudger-pix.maxpat
Max Patch

Noah Mitchell's icon

Yes, this is definitely easier to understand. I will try to explain in non mathematical terms to check my logic. We are taking the change of the mouse position over time and then offsetting the UV my that 'delta' The delta calculation is the bulk of this patch, and we retain the smudge effect via a feedback mechanism. Am I understanding it correctly?

To extend this. If I wanted to use another input instead of the mouse I would follow the same distance logic for the delta calculation in pixel space?