title: Radial reveal of image in OpenGL shader
body: <p>I'm playing with a shader concept to radially reveal an image using a shader in OpenGL ES. The end goal is to create a circular progress bar by discarding fragments in a fragment shader that renders a full circular progress texture.</p>
  
  <p>I have coded my idea <a href="https://www.shadertoy.com/view/XlsSDN" rel="nofollow">here in ShaderToy</a> so you can play with it. I can't seem to get it to work, and since there's no way to debug I'm having a hard time figuring out why.</p>
  
  <p>Here's my glsl code for the fragment shader:</p>
  
  <pre><code>float magnitude(vec2 vec)
  {
      return sqrt((vec.x * vec.x) + (vec.y * vec.y));
  }
  
  float angleBetween(vec2 v1, vec2 v2)
  {
      return acos(dot(v1, v2) / (magnitude(v1) * magnitude(v2)));
  }
  
  float getTargetAngle() 
  {
      return clamp(iGlobalTime, 0.0, 360.0);
  }
  
  // OpenGL uses upper left as origin by default
  bool shouldDrawFragment(vec2 fragCoord)
  {
      float targetAngle = getTargetAngle();
  
      float centerX = iResolution.x / 2.0;
      float centerY = iResolution.y / 2.0;
      vec2 center = vec2(centerX, centerY);
  
      vec2 up = vec2(centerX, 0.0) - center;
      vec2 v2 = fragCoord - center;
  
      float angleBetween = angleBetween(up, v2);
  
      return (angleBetween &gt;= 0.0) &amp;&amp; (angleBetween &lt;= targetAngle);
  }
  
  void mainImage( out vec4 fragColor, in vec2 fragCoord )
  {
    vec2 uv = fragCoord.xy / iResolution.xy;
    if (shouldDrawFragment(fragCoord)) {
      fragColor = texture2D(iChannel0, vec2(uv.x, -uv.y));
    } else {
      fragColor = texture2D(iChannel1, vec2(uv.x, -uv.y));
    }
  }
  </code></pre>
  
  <p>It sweeps out revealing from the bottom on both sides. I just want it to sweep out from a vector pointing straight up, and moving in a clockwise motion.</p>