title: Determining the center of the screen in a WEBGL fragment shader
body: <p>I started learning WebGL a couple of weeks ago and as I am trying to learn by practice, I stumbled upon a simple example of a shader that I could implement using p5.js.</p>
  <p>In this example, I am creating concentric circles starting from the center of the screen, using this fragment, where <code>u_resolution</code> and <code>u_time</code> are uniforms passed down from p5 script as [windowWidth, windowHeight] and respectively <code>frameCount</code> as below:</p>
  <pre><code>void main(void) {
      float maxAxis = max(u_resolution.x, u_resolution.y);
      vec2 uv = gl_FragCoord.xy / maxAxis;
      vec2 center = u_resolution / maxAxis;
      
      gl_FragColor = vec4(
          vec3(sin(u_time + distance(uv, center) * 255.0)),
          1.0);
      }
  </code></pre>
  <p>Using this example, I can achieve what I want, but I cannot understand why I cannot calculate the center of the fragment using the formula:</p>
  <p><code>vec2 center = vec2(u_resolution.x * 0.5, u_resolution.y * 0.5);</code></p>
  <p>If I do this, then it will mess up the whole rendering.</p>
  <p>Is there a coordinate system mismatch that I am missing, or something else?</p>
  <p>For a better explanation, I included a snippet of the original experiment that I am doing in CodePen right <a href="https://codepen.io/ggluta/pen/ExWjPJa" rel="nofollow noreferrer">here</a>.</p>