title: Uncaught ReferenceError: vec2 is not defined
body: <p>I keep getting the following error "Uncaught ReferenceError: vec2 is not defined
      at initVars (triangle.html:57)
      at init (triangle.html:28)"
  I know vec2 is defining a two-dimensional vector so I am not sure why it says its not defined. Any help would be apperciated, thank you!</p>
  
  <p>My code is below:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Twisted Triangle Assignment 1&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;canvas id="gl-canvas" width="600" height="600"&gt;
      Oops ... your browser doesn't support the HTML5 canvas element
      &lt;/canvas&gt;
  
      &lt;script language= "JavaScript"&gt;
          "use strict";
          var points = []; //empty array, we put the points here as we do the subdivision
          var tessellationGrade;
          var angle;
          var renderType;
          var vertices;
          var radios;
  
          window.onload = function init()
          {
              var canvas = document.getElementById( "gl-canvas" );
  
              var gl = canvas.getContext('webgl');
              //var gl = WebGLUtils.setupWebGL(canvas);
              if ( !gl ) { alert( "WebGL isn't available" ); }
  
              initVars();
              initUI();
  
              //tessellation
              tessellation(vertices[0], vertices[1], vertices[2], tessellationGrade);
  
              //  Configure WebGL
              gl.viewport( 0, 0, canvas.width, canvas.height );
              gl.clearColor( 0.0, 0.0, 0.0, 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 initVars(){
              vertices = [
                  vec2 (-0.61,-0.35), // left-down corner
                  vec2( 0,  0.7),  // center-up corner
                  vec2 ( 0.61, -0.35) // right-down corner
              ]; 
  
              // Twist Angle
              var angleValue = document.getElementById("slider-angle").value;
              angle = angleValue * Math.PI / 180;
  
  
              //Render Type
              radios = document.getElementsByName('render-type');
              for (var i = 0, length = radios.length; i &lt; length; i++) {
                  if (radios[i].checked) {
                      renderType = radios[i].value;
                      break;
                  }
              }
  
              //Tessellation Grade
              tessellationGrade = document.getElementById("slider-tessellation").value;
  
  
          }
  
          function initUI(){
  
              // Twist UI
              document.getElementById("slider-angle").addEventListener("input", function(e){
                      angle = this.value * Math.PI / 180;
                      rerender();
              }, false);
  
              // Render Type UI
              for (var i = 0, length = radios.length; i &lt; length; i++) {
                 radios[i].onclick = function() {
                      renderType = this.value;
                      rerender();
                  };
              }
  
              // Tessellation Grade UI
              document.getElementById("slider-tessellation").addEventListener("input", function(e){
                      tessellationGrade = this.value;
                      rerender();
              }, false);
  
  
          }
  
          function twist(vector){
              var x = vector[0],
                  y = vector[1],
                  d = Math.sqrt(x * x + y * y),
                  sinAngle = Math.sin(d * angle),
                  cosAngle = Math.cos(d * angle);
  
                  /*
                      x' = x cos(d0) - y sin(d0)
                      y' = x sin(d0) + y cos(d0)
  
                  */
  
                  return [x * cosAngle - y * sinAngle, x * sinAngle + y * cosAngle];
          }
  
          function triangle (a, b, c){
  
              a = twist(a), b = twist(b), c = twist(c);
  
              if(renderType=="TRIANGLES"){
                  points.push(a, b, c);
              } else {
                  points.push(a, b);
                  points.push(b, c);
                  points.push(a, c);
              }
          }
  
          function tessellation(a, b, c, count){
  
              if(count===0){
                  //when we are at the end of the recursion we push 
                  //the triangles to the array
                  triangle(a,b,c);
  
  
              } else {
                  //bisect the sides
                  var ab = mix( a, b, 0.5 );
                  var ac = mix( a, c, 0.5 );
                  var bc = mix( b, c, 0.5 );
  
                  --count;
  
                  //new triangles
                  tessellation(a, ab, ac, count);
                  tessellation(c, ac, bc, count);
                  tessellation(b, bc, ab, count);
                  tessellation(ac, bc, ab, count);
  
              }
  
          }
  
          function rerender(){
              points = [];
              tessellation(vertices[0], vertices[1], vertices[2], tessellationGrade);
              gl.bufferData( gl.ARRAY_BUFFER, flatten(points), gl.STATIC_DRAW );
              render();
          }
  
          function render() {
              gl.clear( gl.COLOR_BUFFER_BIT );
              if(renderType=="TRIANGLES"){
                  gl.drawArrays( gl.TRIANGLES, 0, points.length );
              }
              else {
                  gl.drawArrays( gl.LINES, 0, points.length );   
              }
          }
      &lt;/script&gt;
  
      &lt;section&gt;
  
          &lt;fieldset&gt;
            &lt;legend&gt;Twist angle&lt;/legend&gt;
            &lt;input id="slider-angle" name="angle" type="range" min="0" max="360" step="1" value="120" /&gt;
          &lt;/fieldset&gt;
  
          &lt;fieldset&gt;
                &lt;legend&gt;Tessellation Grade&lt;/legend&gt;
                &lt;input id="slider-tessellation" name="tessellation" type="range" min="1" max="6" step="1" value="5" /&gt;
          &lt;/fieldset&gt;
  
          &lt;fieldset&gt;
                &lt;legend&gt;Render Type&lt;/legend&gt;
                  &lt;input type="radio" name="render-type" value="LINES" /&gt;Lines&lt;br /&gt;
                  &lt;input type="radio" name="render-type" value="TRIANGLES" checked="checked"/&gt;Triangles&lt;br /&gt;
          &lt;/fieldset&gt;
  
      &lt;/section&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>