title: Shading anti-clockwise in QML CircularGaugeStyle using thge fragmentShader property of ShaderEffect
body: <p>I want to create a CircularGauge in QML in which the needle moves anti-clockwise and the shader is drawn from +145 deg to needle position.</p>
  <p>I implemented a CircularGaugeStyle for the style property of CircularGauge. I used the below code to make the shader effect on the gauge:</p>
  <pre><code>background: Canvas {
      onPaint: {
          var ctx = getContext(&quot;2d&quot;);
          ctx.reset();
          paintBackground(ctx);
      }
  
      ShaderEffect {
          id: gauge
          anchors.fill: parent
  
          opacity: 0.75
  
          // Angles measured clockwise from up, in range -pi to pi
          property real angleBase: -2.53073
          property real angle: degToRad(needleRotation)
  
          vertexShader: &quot;
            uniform highp mat4 qt_Matrix;
            attribute highp vec4 qt_Vertex;
            attribute highp vec2 qt_MultiTexCoord0;
            varying highp vec2 coord;
            void main() {
              coord = qt_MultiTexCoord0;
              gl_Position = qt_Matrix * qt_Vertex;
            }&quot;
  
          fragmentShader: &quot;
            uniform lowp float qt_Opacity;
            uniform highp float angleBase;
            uniform highp float angle;
            varying highp vec2 coord;
            void main() {
              gl_FragColor = vec4(0.0,0.0,0.0,0.0);
              highp vec2 d=2.0*coord-vec2(1.0,1.0);
              highp float r=length(d);
              if (0.55&lt;=r &amp;&amp; r&lt;=0.95) {
                highp float a=atan2(d.x,-d.y);
                if (angleBase&lt;=a &amp;&amp; a&lt;=angle) {
                  highp float p=(a-angleBase)/(angle-angleBase);
                  gl_FragColor = vec4(0.0,0.0,p,p) * qt_Opacity;
                }
              }
            }&quot;
        }
  }
  </code></pre>
  <p>In this code the needle moves anti-clock  wise setting the min max angle but the shader effect is drawn clock-wise. I changed the following:</p>
  <pre><code>property real angleBase: 2.53073 // +145 deg
  </code></pre>
  <p>making the baseAngle to +145 deg.</p>
  <pre><code>if (0.55&lt;=r &amp;&amp; r&lt;=0.95) { // the area in gauge that should be painted
    highp float a=atan2(d.y,-d.x); //getting the other side of the angle (pi/2 - theta)
    if (a&gt;=angleBase &amp;&amp; angle&gt;=a) { //since we want to draw from +2.5 to needle position (in radians)
      highp float p=(angleBase-a)/(angleBase-angle);
      gl_FragColor = vec4(0.0,0.0,p,p) * qt_Opacity;
    }
  }
  </code></pre>
  <p>Here is the image of the output with the shader going clock-wise:
  <a href="https://i.stack.imgur.com/MXzYc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MXzYc.png" alt="QML CircularGauge" /></a></p>
  <p>The change in code to draw anti-clockwise is not working. What am I doing wrong? Is my understanding of calculating the atan2 not correct?</p>