Exhibit 0 glMatrix

What We Did

• Nothing fancy, we just drew some triangles and lines in the shape of a cat.
• You have seen similar code before, but we used glMatrix to store the uniform variables on the JavaScript side.

  var catData = {
      // ... geometry data ...
      lineColor: [0.2, 0.2, 0.2],
      fillColor: [1.0, 0.9, 0.7]
  };
  
  // ...
  
  function createShape(gl, data) {
      var shape = {};
  
      // ... store geometry data in shape ...
  
      shape.lineColor = vec3.clone(data.lineColor);
      shape.fillColor = vec3.clone(data.fillColor);
  
      return shape;
  }
  
  // ...
  
  gl.uniform3fv(gl.getUniformLocation(program, "color"), shape.fillColor);
  // ... draw the triangles ...
  
  gl.uniform3fv(gl.getUniformLocation(program, "color"), shape.lineColor);
  // ... draw the lines ...

Exercise

The cat has a bow for its head that is commented out in the Javascript. Put the bow in and generalize the program so that it can draw the bow filled in red. Also give the nose and eyes better colors.