Generative Liquid Paintings in TouchDesigner

[@jojop.molinyawe2241]

It makes me happy that a lot of you art youtubers out here are just giving out free tutorials for everyone to watch and enjoy. Thank you!

[@TheInteractiveImmersiveHQ]

We're glad to hear it - hope you find it inspirational and useful :) Cheers!

[@diandrakathyusha]

Hi, nice tutorial! I got a syntax error from the GLSL code, specifically from the 'uniform float uRmb;' line. I put the content language as GLSL with frag extension. Any idea why this happened? Thanks

[@TheInteractiveImmersiveHQ]

Since you're receiving a syntax error, the first thing I would check is that you've got the code written exactly as _uniform float uRmb;_ Spelling mistakes, extra characters, or a missing semicolon at the end of the line can generate a syntax error. Start there and let us know how you get on!

[@jarmen1105]

Could you touch on how/where input from a Kinect or camera could be used to add interactivity? Appreciate the tutorial! I can’t afford the cost of the lessons but maybe down the road.

[@TheInteractiveImmersiveHQ]

For sure, you could use control signals from the Kinect to control the Mouse UV coordinates, or you could grab the player index texture from the Kinect and input that into the feedback loop to have the user's silhouette impact the effect. If you don't have a Kinect, you could approach the silhouette option by using something like the Nvidia Background TOP (or some other means of background removal) followed by a Threshold TOP, and run the resulting texture into the feedback loop. Hope that helps!

[@ysy69]

This was truly amazing and therapeutical :) Thanks. Interactive Lava Lamp like. I was wondering how to make it so that there's an image hidden underneath the canvas and when using the brush to paint, each stroke would reveal the part of the image. So when doing rapid brushstrokes, the entire image can be revealed. Wonder if I am making sense.

[@TheInteractiveImmersiveHQ]

It'll likely take a lot of finessing to get the result you're looking for, but you can start moving in this direction by using a Composite TOP set to Subtract to composite a Circle TOP into the feedback loop. Then, you can use the mouse click to turn the Alpha parameter from zero to one, so that it'll only be "visible" when the mouse is clicked down, and thus composited into the feedback. The mouse position can be used for the Circle's position. The above will allow you to "erase" the feedback. Another tricky aspect will be getting the image to appear. You can try compositing it under the final feedback image (prior to recoloring with noise), but as it's slightly transparent already YMMV. You might have to experiment with other methods like chroma/luma keying. Hope that helps!

[@alexandertrattler2115]

Cool thank you!

[@TheInteractiveImmersiveHQ]

You bet! :)

[@CultureDrift]

dang.. looks good! would love to try it out but im on mac, this uses Glsl 4.3?

[@TheInteractiveImmersiveHQ]

This should run fine on Mac -- with the shift to Vulkan in the May 2022 release, TouchDesigner now supports up to GLSL 4.60 in macOS. 🙂

[@CultureDrift]

@@TheInteractiveImmersiveHQ omg! no way! I must confess.. i actually stopped playing with TD back in 2021 partly because of glsl. wow must be about time i updated haha thanks! awesome tut!

[@peepjynx]

Can existing LeapMotion networks be used to replace the mouse function in this case? Using the same GLSL code for controls?

[@TheInteractiveImmersiveHQ]

For sure! Just replace the CHOP references to the mouse uniforms in the GLSL TOP with CHOP references to the LeapMotion channels you want to use and you should be good to go! Note that you may have to use Math CHOPs to get the output to fall in the 0-1 range that the mouse was.