add H

src/script.js

@@ -4,6 +4,7 @@ let cv, gl;
 
 let program;
 
+let vertices;
 let vertexBuffer;
 
 let lastFrame = Date.now();
@@ -27,19 +28,72 @@ async function init() {
 	console.log("linking shader program...");
 	program = linkShaderProgram(gl, vertexShader, fragmentShader);
 
+	/**
+	 * -0.35              0.35
+	 * |     -0.2    0.2  |
+	 * |    |        |    |
+	 * 
+	 * +----+        +----+    ---  0.6
+	 * |    |        |    |    
+	 * |    |        |    |
+	 * |    +--------+    |    ---  0.1
+	 * |                  |
+	 * |    +--------+    |    --- -0.1
+	 * |    |        |    |
+	 * |    |        |    |
+	 * +----+        +----+    --- -0.6
+	 *
+	 * +------------------+    --- -0.7
+	 * |                  |
+	 * +------------------+    --- -0.9
+	 *   
+	 */    
 
-	let triangleVertices = [
-		 // X  // Y  // R // G // B
-		 0.0,  0.5,  0.0, 1.0, 1.0,
-		-0.5, -0.5,  1.0, 0.0, 1.0,
-		 0.5, -0.5,  1.0, 1.0, 0.0
+	vertices = [
+		// X  // Y
+
+		// left vertical bar
+		-0.35, -0.6,
+		-0.35, 0.6,
+		-0.2, 0.6,
+
+		-0.35, -0.6,
+		-0.2, 0.6,
+		-0.2, -0.6,
+
+		// right vertical bar
+		0.35, -0.6,
+		0.35, 0.6,
+		0.2, 0.6,
+
+		0.35, -0.6,
+		0.2, 0.6,
+		0.2, -0.6,
+
+		// middle bar
+		-0.2, -0.1,
+		-0.2, 0.1,
+		0.2, 0.1,
+
+		-0.2, -0.1,
+		0.2, 0.1,
+		0.2, -0.1,
+
+		// bottom bar
+		-0.35, -0.7,
+		-0.35, -0.9,
+		0.35, -0.9,
+
+		-0.35, -0.7,
+		0.35, -0.9,
+		0.35, -0.7
 	];
 
 	console.log("creating vertex buffer");
 
 	vertexBuffer = gl.createBuffer();
 	gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
-	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVertices), gl.STATIC_DRAW);
+	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
 
 	// get location of vertPosition attribute
 	let positionAttribLocation = gl.getAttribLocation(program, "vertPosition");
@@ -49,24 +103,13 @@ async function init() {
 		2, // number of values to read
 		gl.FLOAT, // type of values
 		gl.FALSE, // whether to normalize
-		5 * Float32Array.BYTES_PER_ELEMENT, // size of individual vertex / distance between values to read
+		2 * Float32Array.BYTES_PER_ELEMENT, // size of individual vertex / distance between values to read
 		0 // offset where to start reading
 	);
 
 	// enable attribute
 	gl.enableVertexAttribArray(positionAttribLocation);
 
-	let colorAttribLocation = gl.getAttribLocation(program, "vertColor");
-	gl.vertexAttribPointer(
-		colorAttribLocation,
-		3,
-		gl.FLOAT,
-		gl.FALSE,
-		5 * Float32Array.BYTES_PER_ELEMENT,
-		2 * Float32Array.BYTES_PER_ELEMENT
-	);
-	gl.enableVertexAttribArray(colorAttribLocation);
-
 	// unbind buffer
 	gl.bindBuffer(gl.ARRAY_BUFFER, null);
 
@@ -111,7 +154,7 @@ async function draw() {
 
 	gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
 
-	gl.drawArrays(gl.TRIANGLES, 0, 3);
+	gl.drawArrays(gl.TRIANGLES, 0, vertices.length / 2);
 
 	lastFrame = now;
 	requestAnimationFrame(draw);