How to change the color of wave particles dots

Hello everyone,
I am new to three.js. Can anyone help me change the color of particle dots on hovering the waves near the cursor pointer?
I want to change the color of wave-particle dots around 50px of the radius near the cursor pointer.
Below is my codepen link

Having this topic: Getting screen coords in ShaderMaterial shaders
I’ve got this result (without mouse interaction, just in relation to the screen center):


1 Like

Uh… finally, something interactive, though it’s out of the scope of three.js, so you’re on your own with the code now:

Thank you soo much for the solution, and thanks to your referral link @prisoner849 .

@prisoner849 I have copied the script from your codepen and updated mine. Due to the extensive HTML layout, red dots circle appears below the mouse pointer. The mouse pointer should be in the center of the red circle. Can you please guide me on where I can change the position?
FYI in codepen it looks fine
(below are the screenshot)

I have another question, and I’m also trying to do the existing red dots should drag/move with the pointer tip, like a magnetic effect, the mouse pointer is the magnet, and the red dots are trying to stick the pointer when we move the mouse. Is it possible to do this when moving a mouse pointer?

Thanks in advance for your reply.