GLSL plot disk sector. Problem with clamp'ing angle - glsl

Question

My glsl code to plot disk sector:
const float PI = 3.141592653;
vec4 white = vec4(1.0,1.0,1.0,1.0);
vec4 black = vec4(0.0,0.0,0.0,1.0);
vec2 p = (gl_FragCoord.xy * 2.0 - resolution)/min(resolution.x,resolution.y);
float sector(vec2 c, vec2 p, float r, float sa, float alpha){
float l = abs(distance(p,c));
float t = smoothstep(r, r + bl, l);
vec2 uv = p - c;
a = atan(uv.y,uv.x);
t = a >= sa ? t : 1.0;
t = a <= sa + alpha ? t : 1.0;
return t;
}
float t = sector(vec2(0.0,0.1),p,0.1,PI/2.0,PI/3.0);
gl_FragColor = mix(white,black,t);
The code works. But it has a flaw that atan(y,x) returns values in a range of [-π,π].
To circumvent this issue, I am trying to clamp the atan result angle in a range of [0,2π]:
a = clamp(2.0*PI + atan(uv.y,uv.x), 0.0, 2.0*PI);
After above replacement there is nothing that is showed on screen. The disk sector did not show up even for legal atan values. What am I doing wrong?
EDIT
Thanks to the person who answered this topic. I spent too much time on this mistake. In case someone is interested in the solution to this, I made some code changes to reflect that the result angle can be in different unit circle quadrants.
float sector(vec2 c, vec2 p, float r, float sa, float alpha){
float l = abs(distance(p,c));
float t = smoothstep(r, r + bl, l);
vec2 uv = p - c;
float a = atan(uv.y,uv.x);
a = step(sign(a),0.0)*TWO_PI + a;
t = a >= sa ? t : 1.0;
t = a <= sa + alpha ? t : 1.0;
return t;
}

Answer 1

The result of
a = clamp(2.0*PI + atan(uv.y,uv.x), 0.0, 2.0*PI);
is in range [PI, 2*PI], because the result of 2.0*PI + atan(uv.y,uv.x) is in range [PI, 3*PI].
It has to be
a = clamp(PI + atan(uv.y,uv.x), 0.0, 2.0*PI);
But since the result of atan is always in range [-PI, PI], it is sufficient to do:
a = PI + atan(uv.y, uv.x);
If you just want to make the negative range ([0.0, 2*PI]) become positive, then you've to add 2*PI in case when the angle is negative:
e.g.
a = atan(uv.y, uv.x);
if (a < 0.0) a += 2.0*PI;
or
a = atan(uv.y, uv.x);
a = step(sign(a),0.0)*2.0*TWO_PI + a;
or even
a = PI - atan(uv.y, -uv.x);
(function loadscene() {
var canvas, gl, vp_size, prog, bufObj = {};
function initScene() {
canvas = document.getElementById( "ogl-canvas");
gl = canvas.getContext( "experimental-webgl" );
if ( !gl )
return;
progDraw = gl.createProgram();
for (let i = 0; i < 2; ++i) {
let source = document.getElementById(i==0 ? "draw-shader-vs" : "draw-shader-fs").text;
let shaderObj = gl.createShader(i==0 ? gl.VERTEX_SHADER : gl.FRAGMENT_SHADER);
gl.shaderSource(shaderObj, source);
gl.compileShader(shaderObj);
let status = gl.getShaderParameter(shaderObj, gl.COMPILE_STATUS);
if (!status) alert(gl.getShaderInfoLog(shaderObj));
gl.attachShader(progDraw, shaderObj);
gl.linkProgram(progDraw);
}
status = gl.getProgramParameter(progDraw, gl.LINK_STATUS);
if ( !status ) alert(gl.getProgramInfoLog(progDraw));
progDraw.inPos = gl.getAttribLocation(progDraw, "inPos");
progDraw.u_time = gl.getUniformLocation(progDraw, "time");
progDraw.u_resolution = gl.getUniformLocation(progDraw, "resolution");
gl.useProgram(progDraw);
var pos = [ -1, -1, 1, -1, 1, 1, -1, 1 ];
var inx = [ 0, 1, 2, 0, 2, 3 ];
bufObj.pos = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, bufObj.pos );
gl.bufferData( gl.ARRAY_BUFFER, new Float32Array( pos ), gl.STATIC_DRAW );
bufObj.inx = gl.createBuffer();
bufObj.inx.len = inx.length;
gl.bindBuffer( gl.ELEMENT_ARRAY_BUFFER, bufObj.inx );
gl.bufferData( gl.ELEMENT_ARRAY_BUFFER, new Uint16Array( inx ), gl.STATIC_DRAW );
gl.enableVertexAttribArray( progDraw.inPos );
gl.vertexAttribPointer( progDraw.inPos, 2, gl.FLOAT, false, 0, 0 );
gl.enable( gl.DEPTH_TEST );
gl.clearColor( 0.0, 0.0, 0.0, 1.0 );
window.onresize = resize;
resize();
requestAnimationFrame(render);
}
function resize() {
vp_size = [window.innerWidth, window.innerHeight];
canvas.width = vp_size[0];
canvas.height = vp_size[1];
}
function render(deltaMS) {
gl.viewport( 0, 0, canvas.width, canvas.height );
gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT );
gl.uniform1f(progDraw.u_time, deltaMS/2000.0);
gl.uniform2f(progDraw.u_resolution, canvas.width, canvas.height);
gl.drawElements( gl.TRIANGLES, bufObj.inx.len, gl.UNSIGNED_SHORT, 0 );
requestAnimationFrame(render);
}
initScene();
})();
<script id="draw-shader-vs" type="x-shader/x-vertex">
precision mediump float;
attribute vec2 inPos;
varying vec2 ndcPos;
void main()
{
ndcPos = inPos;
gl_Position = vec4( inPos.xy, 0.0, 1.0 );
}
</script>
<script id="draw-shader-fs" type="x-shader/x-fragment">
precision mediump float;
varying vec2 ndcPos; // normaliced device coordinates in range [-1.0, 1.0]
uniform float time;
uniform vec2 resolution;
const float PI = 3.141592653;
float sector(vec2 c, vec2 p, float r, float sa, float alpha){
float bl = 0.1;
float l = abs(distance(p, c ));
float t = smoothstep(r-bl, r + bl, l);
vec2 uv = p - c;
//float a = atan(uv.y, uv.x);
//if (a < 0.0) a += 2.0*PI;
float a = PI - atan(uv.y, -uv.x);
t = a >= sa ? t : 1.0;
t = a <= sa + alpha ? t : 1.0;
return t;
}
void main()
{
vec4 white = vec4(1.0,1.0,1.0,1.0);
vec4 black = vec4(0.0,0.0,0.0,1.0);
vec2 p = (gl_FragCoord.xy * 2.0 - resolution)/min(resolution.x,resolution.y);
float t = sector(vec2(0.0), p, 0.9, 0.0, mod(time, 2.0*PI));
gl_FragColor = mix(white,black,t);
}
</script>
<canvas id="ogl-canvas" style="border: none"></canvas>