Finished letter B

lab1/src/lab1.js

 // Vertex shader program
 const VSHADER_SOURCE =
-  '\n' +
-  // TODO: Implement your vertex shader code here
-  '\n';
+  'attribute vec4 a_Position;\n' +
+  'attribute vec4 a_Color;\n' + // Attribute variable color to bind the effective vertex color from the model data
+
+  'varying vec4 v_Color;\n' +   // Varying variable color to pass the vertex color to the fragment shader
+
+  'void main() {\n' +
+  '  gl_Position = a_Position;\n' +
+  '  v_Color = a_Color;\n' +    // Set the varying color value with the attribute color value
+  '}\n';
 
 // Fragment shader program
 const FSHADER_SOURCE =
-  '\n' +
-  // TODO: Implement your fragment shader code here
-  '\n';
+  'precision mediump float;\n' + // This determines how much precision the GPU uses when calculating floats
+  'varying vec4 v_Color;\n' +   // Varying variable color to get the vertex color from
+                                // The vertex shader (!!same name as in the vertex shafer)
+  'void main() {\n' +
+  '  gl_FragColor = v_Color;\n' + // Set the fragment color with the vertex shader
+  '}\n';
 
 function main() {
   // Retrieve <canvas> element
@@ -47,17 +56,88 @@ function main() {
 function initVertexBuffers(gl) {
   // This is the model
   const vertices = new Float32Array([
-   // TODO: Complete the vertex buffer with your model
+    // x     y
+    -3/5,  -5/7, 1.0, 0.0, 0.0,
+    -1/5,  5/7, 1.0, 0.0, 0.0,
+    -3/5,  5/7, 1.0, 0.0, 0.0,
+
+    -3/5,  -5/7, 0.0, 1.0, 0.0,
+    -1/5,  5/7, 0.0, 1.0, 0.0,
+    -1/5,  -5/7, 0.0, 1.0, 0.0,
+	
+	-1/5,  5/7, 0.0, 0.0, 1.0,
+    3/5,  5/7, 0.0, 0.0, 1.0,
+    3/5,  3/7, 0.0, 0.0, 1.0,
+	
+	-1/5,  5/7, 1.0, 0.0, 1.0,
+    -1/5,  3/7, 1.0, 0.0, 1.0,
+    3/5,  3/7, 1.0, 0.0, 1.0,
+	
+	-1/5,  1/7, 1.0, 1.0, 0.0,
+    1/5,  1/7, 1.0, 1.0, 0.0,
+    1/5,  -1/7, 1.0, 1.0, 0.0,
+
+    -1/5,  1/7, 0.0, 1.0, 1.0,
+    -1/5,  -1/7, 0.0, 1.0, 1.0,
+    1/5,  -1/7, 0.0, 1.0, 1.0,
+
+    -1/5,  -3/7, 0.5, 0.7, 0.2,
+    3/5,  -3/7, 0.5, 0.7, 0.2,
+    3/5,  -5/7, 0.5, 0.7, 0.2,
+
+    -1/5,  -3/7, 0.7, 0.2 , 0.5,
+    -1/5,  -5/7, 0.7, 0.2 , 0.5,
+    3/5,  -5/7, 0.7, 0.2 , 0.5,
+	
+	1/5,  3/7, 0.2, 0.3, 0.8,
+    1/5,  -3/7, 0.2, 0.3, 0.8,
+    3/5,  -3/7, 0.2, 0.3, 0.8,
+	
+	1/5,  3/7, 0.8, 0.1, 0.2,
+    3/5,  -3/7, 0.8, 0.1, 0.2,
+    3/5,  3/7, 0.8, 0.1, 0.2
   ]);
+  const n = vertices.length / 5; // The number of vertices
+  // Create a buffer object
+  const vertexBuffer = gl.createBuffer();
+  if (!vertexBuffer) {
+    console.log('Failed to create the buffer object');
+    return -1;
+  }
+
+  // Bind the buffer object to target
+  gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
+  // Write date into the buffer object
+  gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
+
+  // Get the storage location of a_Position, assign buffer and enable
+  const a_Position = gl.getAttribLocation(gl.program, 'a_Position');
+  if (a_Position < 0) {
+    console.log('Failed to get the storage location of a_Position');
+    return -1;
+  }
+  // Assign the buffer object to a_Position variable
+  // Read 2 elements of type gl.FLOAT, starting at the offset 0.
+  // Next offset will be 20: after 5 elements (x, y, r, g, and b) of 4 bytes (32 bits) each
+  gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 20, 0);
+  // Enable the assignment to a_Position variable
+  gl.enableVertexAttribArray(a_Position);
+
+  // Get the storage location of a_Color, assign buffer and enable
+  var a_Color = gl.getAttribLocation(gl.program, 'a_Color');
+  if(a_Color < 0) {
+    console.log('Failed to get the storage location of a_Color');
+    return -1;
+  }
+  // Assign the buffer object to a_Color variable
+  // Read 3 elements of type gl.FLOAT, starting at the offset 8 (after 2 elements (x and z) of 4 bytes each).
+  // Next offset will be 20: after 5 elements (x, y, r, g, and b) of 4 bytes (32 bits) each
+  gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, 20, 8);
+  // Enable the assignment to a_Color variable
+  gl.enableVertexAttribArray(a_Color);
+
+  // Unbind the buffer object
+  gl.bindBuffer(gl.ARRAY_BUFFER, null);
 
-  /*
-  TODO:
-   1. Create a WebGL buffer object
-   2. Bind the created buffer object
-   3. Write data into the buffer object
-   4. Bind shader programs attributes with javascript variables.
-      example: if you have an attribute named "a_color", you should
-      call "const varName = gl.getAttribLocation(gl.program, 'a_color');"
-      then "gl.vertexAttribPointer" and "gl.enableVertexAttribArray"
-   */
+  return n;
 }