Paint with the mouse

In this website in the footer there is a really cool animation when moving the mouse, can anybody help me create this effect?

1 Like

Here you have implementation of those watercolors…

3 Likes

Thank you…

I have tried to recreate this but it is too complicated I want to create this on a shader he is complicating things to a point I don’t understand what I going on…

You don’t (probably) understand that, because not full code is public, some part if I good remember, Yuri publishing on Patreon. The second thing is that this is a complex implementation per se…

If you want help, it’s best to ask specific questions. What can you figure out by yourself / with google / chat GPT?

Break down the problem into smaller problems, work through these, and ask questions when you get stuck.

Can you create a webpage that uses THREE.js to display something super basic, like a cube?

When that’s done, can you figure out how to get the user’s mouse input?

Then can you display an object where the user’s mouse is?

When you’ve done that, you can figure out how to start working on the drawing logic.

This effect is fairly complex to recreate, maybe you should try a simpler version first? Not even using THREE.js, just drawing basic lines on a 2D canvas.

Then come back to Yuri’s tutorial, and when it starts getting too complex, pause it, do some research, experiment. And eventually you’ll make it through the whole thing.

1 Like

I have followed the tutorial but swapping all those scenes it is can’t be used in a production website, except if it is the only thing you use, I have other stuff and this is killing the performance.

Can’t this be done in a shader without manipulating so many scenes and cameras it makes no sense

If you find a way to use only a single scene (no render targets) please do let us know! :slight_smile:

I am still a beginner with shaders but I am sure that this can be done in a normal shader with no render targets…

The way Yuri did it is just too much, it can be used as a single canvas in one of the webpages but combined with something else it will kill performance, it is cool but is not usable that way…

I have managed to do what I wanted, thank you

https://webdesign-flash.ro/ht/fwd/