title: WebGL shader to color the texture according to mouse position
body: <p>I am trying to make an interesting effect using WebGL.
  In my fragment shader I have the following line which draws my texture in black and white:</p>
  
  <pre><code>gl_FragColor = vec4(vec3(color0.r+color0.g+color0.b)/3.0, color0.a);
  </code></pre>
  
  <p>Where <code>color0</code> is the color of the texture.
  In the shader I also have a <code>uniform vec2 u_mouse</code> which is passed in from my javascript code as the mouse coordinates on the screen.
  Now what I want is to be able to move the mouse, and part of the image would colorize inside the given radius like in the picture:</p>
  
  <p><a href="https://i.stack.imgur.com/S0Ojk.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/S0Ojk.jpg" alt="Picture of effect"></a></p>
  
  <p>My idea is to have a mask, which has a white circle on it, which will move with the mouse, but I have no idea how to do the image processing afterwards...
  I also would like for the animation no be smooth, like an interpolation between the mouse values.</p>
  
  <p>Thanks!</p>