title: GLSL Fit Fragment Shader Mask Into Vertex Coordinates
body: <p>I have this smiley face mask in my fragment shader that takes up the entire window <strong>(1)</strong>.</p>
  <p>I passed in smaller coordinates to the vertex shader in an attempt to shrink the smiley face into a smaller box <strong>(2)</strong> (desired result).</p>
  <p>However, the result is <strong>(3)</strong>.</p>
  <p><a href="https://i.stack.imgur.com/UIn3l.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UIn3l.png" alt="enter image description here" /></a></p>
  <p>How can I make it so that the fragment shader fits into the coordinates I pass to the vertex shader so it looks like <strong>(2)</strong> and not <strong>(3)</strong>?</p>
  <p>Below are the relevant pieces of code. Let me know if you require more code.</p>
  <p>-- Vertex Shader --</p>
  <pre><code>#version 300 es
                             
  layout(location=0) in vec3 vPosition;
  
  void main() {
      gl_Position = vec4(vPosition, 1.0);
  } 
  </code></pre>
  <p>-- Fragment Shader --</p>
  <pre><code>#version 300 es
                                 
  precision mediump float;       
  
  uniform float width;           
  uniform float height;          
  
  out vec4 fragColor;            
  
  float Circle(vec2 uv, vec2 p, float r, float blur) {
      float d = length(uv - p);  
      return smoothstep(r, r-blur, d);
  } 
  
  void main() {                  
      vec2 uv = gl_FragCoord.xy / vec2(width, height);
  
      uv -= 0.5;                 
      uv.x *= width / height;
        
      float blur = 0.005;        
        
      float c = Circle(uv, vec2(0., 0.), 0.25, blur);
      c -= Circle(uv, vec2(-0.1, 0.1), 0.05, blur);
      c -= Circle(uv, vec2(0.1, 0.1), 0.05, blur);
      
      float mouth = Circle(uv, vec2(0., 0.), 0.15, blur);
      mouth -= Circle(uv, vec2(0., 0.05), 0.15, blur);
    
      c -= clamp(mouth, 0., 1.); 
    
      fragColor = vec4(vec3(1., 1., 0.) * c, 1.0);
  }
  </code></pre>
  <p>Thanks!</p>
  <p>edit 1:</p>
  <p>Here are the two sets of coordinates being passed to the vertex shader before/after.</p>
  <p><a href="https://i.stack.imgur.com/G5wlz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/G5wlz.png" alt="enter image description here" /></a></p>
  <p>edit 2:</p>
  <p>Thank you to Rabbid76 for the solution! Below shows the uv coordinates I ended up passing to the vertex shader.</p>
  <pre><code>    // location = 0
      GLfloat vertices[] = { 
          -0.8, -0.8, 0.0,
          -0.2, -0.8, 0.0,
          -0.2, -0.2, 0.0,
          -0.8, -0.2, 0.0
      };
  
      // location = 1
      GLfloat uv[] = { 
          0.0, 0.0,
          1.0, 0.0,
          1.0, 1.0,
          0.0, 1.0
      };
  </code></pre>