Triangle -- hw2 answer

From: https://www.cs.unm.edu/~angel/WebGL/7E/CLASS/triangle.html

by asterix77

HTML

<!DOCTYPE html>
<html>

  <head>
    <script id="vertex-shader" type="x-shader/x-vertex">
      attribute vec4 vPosition; 
      attribute vec4 vColor;
      varying vec4 fColor;
      void main(){ 
        fColor = vColor;
        gl_Position = vPosition; 
      }
    </script>
    <script id="fragment-shader" type="x-shader/x-fragment">
      precision mediump float; 
      varying vec4 fColor;
      void main(){ 
        gl_FragColor = fColor; 
      }
    </script>
    <script type="text/javascript" src="https://www.cs.unm.edu/~angel/WebGL/7E/Common/webgl-utils.js"></script>
    <script type="text/javascript" src="https://www.cs.unm.edu/~angel/WebGL/7E/Common/initShaders.js"></script>
    <script type="text/javascript" src="https://www.cs.unm.edu/~angel/WebGL/7E/Common/MV.js"></script>
  </head>

  <body>
    <canvas id="gl-canvas" width="256" height="256">
Oops ... your browser doesn't support the HTML5 canvas element
</canvas>
  </body>

</html>

JavaScript

var gl;
var vertices;
var colors;

function init() {
  var canvas = document.getElementById("gl-canvas");
  gl = WebGLUtils.setupWebGL(canvas);
  if (!gl) {
    alert("WebGL isn't available");
  }

  // Nine Vertices 
  vertices = [
    vec2(-0.5, -0.75),
    vec2(0.5, -0.75),
    vec2(-0.5, 0.25),

    vec2(0.5, 0.25),
    vec2(0.5, -0.75),
    vec2(-0.5, 0.25),
    
    vec2(-0.75, 0.25),
    vec2(0, 0.75),
    vec2(0.75, 0.25),
  ];
  
  // Nine colors
  colors = [
    vec4(1, 0, 0, 1),
    vec4(1, 0, 0, 1),
    vec4(1, 0, 0, 1),

	  vec4(0, 1, 0, 1),
		vec4(0, 1, 0, 1),
		vec4(0, 1, 0, 1),

		vec4(1, 1, 0, 1),
		vec4(1, 1, 0, 1),
		vec4(1, 1, 0, 1)
  ];


  //  Configure WebGL
  gl.viewport(0, 0, canvas.width, canvas.height);
  gl.clearColor(1.0, 1.0, 1.0, 1.0);

  //  Load shaders and initialize attribute buffers
  var program = initShaders(gl, "vertex-shader", "fragment-shader");
  gl.useProgram(program);

  // Load the vertex data into the GPU
  var bufferId = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, bufferId);
  gl.bufferData(gl.ARRAY_BUFFER, flatten(vertices), 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);
  
  
    // Load the vertex data into the GPU
  bufferId = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, bufferId);
  gl.bufferData(gl.ARRAY_BUFFER, flatten(colors), gl.STATIC_DRAW);

  // Associate out shader variables with our data buffer
  var vColor = gl.getAttribLocation(program, "vColor");
  gl.vertexAttribPointer(vColor, 4, gl.FLOAT, false, 0, 0);
  gl.enableVertexAttribArray(vColor);


  // Go
  render();
}


function render() {
  gl.clear(gl.COLOR_BUFFER_BIT);
  gl.drawArrays(gl.TRIANGLES, 0, vertices.length);
}

init();