title: Change color in middle of circle
body: <p>I'm new to WebGL and I'm trying to create a black ring in the middle of this green circle without making additional circles. I believe I can do this by making the normal of those triangles go the other way but I'm not sure exactly how to do this. My friend suggested changing the texture coordinates but I don't really understand how this would help. Can anyone shine some light on these ideas and possible intuition? </p>
  
  <p>_______HTML File__________</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  
  &lt;script id="vertex-shader" type="x-shader/x-vertex"&gt;
  attribute vec4 vPosition;
  
  void
  main()
  {
      gl_Position = vPosition;
  }
  &lt;/script&gt;
  
  &lt;script id="fragment-shader" type="x-shader/x-fragment"&gt;
  precision mediump float;
  
  void
  main()
  {
      gl_FragColor = vec4( 0.0, 1.0, 0.0, 1.0 );
  }
  &lt;/script&gt;
  
  &lt;script type="text/javascript" src="../Common/webgl-utils.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="../Common/initShaders.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="../Common/MV.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="Circle.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;canvas id="gl-canvas" width="512" height="512"&gt;
  Oops ... your browser doesn't support the HTML5 canvas element
  &lt;/canvas&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>_____Javascript File______</p>
  
  <pre><code>var gl;
  var points;
  
  
  window.onload = function init()
  {
      var canvas = document.getElementById( "gl-canvas" );
  
      gl = WebGLUtils.setupWebGL( canvas );
      if ( !gl ) { alert( "WebGL isn't available" ); }
  
  
      // The Vertices
      var pi = 3.14159;
      var x = 2*pi/100;
      var y = 2*pi/100;
      var r = 0.9;
  
      points = [ vec2(0.0, 0.0) ]; //establish origin 
  
      //for loop to push points
      for(var i = 0; i &lt; 100; i++){
          points.push(vec2(r*Math.cos(x*i), r*Math.sin(y*i)));
          points.push(vec2(r*Math.cos(x*(i+1)), r*Math.sin(y*(i+1))));
      }
  
      //
      //  Configure WebGL
      //
      gl.viewport( 0, 0, canvas.width, canvas.height );
      gl.clearColor( 0.3, 0.3, 0.3, 1.0 );
  
      //  Load shaders and initialize attribute buffers
  
      var program = initShaders( gl, "vertex-shader", "fragment-shader" );
      gl.useProgram( program );
  
      // Load the data into the GPU
  
      var bufferId = gl.createBuffer();
      gl.bindBuffer( gl.ARRAY_BUFFER, bufferId );
      gl.bufferData( gl.ARRAY_BUFFER, flatten(points), gl.STATIC_DRAW );
  
      // Associate out shader variables with our data buffer
  
      var vPosition = gl.getAttribLocation( program, "vPosition" );
      gl.vertexAttribPointer( vPosition, 2, gl.FLOAT, false, 0, 0 );
      gl.enableVertexAttribArray( vPosition );
  
      render();
  };
  
  
  function render() {
      gl.clear( gl.COLOR_BUFFER_BIT );
      gl.drawArrays( gl.TRIANGLE_FAN, 0, points.length );
  }
  </code></pre>