Add triangle letter

src/main.ts

@@ -10,6 +10,8 @@ import { createBasicVao } from "./utils/vao";
 import Shape2D from "./geometry/Shape2D";
 
 import outline from "./data/letter_outline.json";
+import solid from "./data/letter_triangle.json";
+
 import { Timeline, Track } from "./utils/sequence";
 
 function render() {
@@ -45,39 +47,72 @@ function render() {
   const aBuffer = loadBuffer(gl, aVerts);
   const aVao = createBasicVao(gl, aBuffer, vertexPositionAttribLocation);
 
+  const KVerts = new Float32Array(solid.k.vertices);
+  const KBuffer = loadBuffer(gl, KVerts);
+  const KVao = createBasicVao(gl, KBuffer, vertexPositionAttribLocation);
+
+  const EVerts = new Float32Array(solid.e.vertices);
+  const EBuffer = loadBuffer(gl, EVerts);
+  const EVao = createBasicVao(gl, EBuffer, vertexPositionAttribLocation);
+
+  const AVerts = new Float32Array(solid.a.vertices);
+  const ABuffer = loadBuffer(gl, AVerts);
+  const AVao = createBasicVao(gl, ABuffer, vertexPositionAttribLocation);
+
   const shapes: Shape2D[] = [
     new Shape2D(new Vector2D(0, 0), 200, [0.22745, 0.35294, 0.25098], kVerts.length / 2, kVao, gl.LINES),
     new Shape2D(new Vector2D(0, 0), 200, [0.22745, 0.35294, 0.25098], eVerts.length / 2, eVao, gl.LINES),
     new Shape2D(new Vector2D(0, 0), 200, [0.22745, 0.35294, 0.25098], aVerts.length / 2, aVao, gl.LINES),
+    new Shape2D(new Vector2D(0, 0), 800, [0.98823, 0.30980, 0.21960], KVerts.length / 2, KVao, gl.TRIANGLES),
+    new Shape2D(new Vector2D(0, 0), 800, [0.98823, 0.30980, 0.21960], EVerts.length / 2, EVao, gl.TRIANGLES),
+    new Shape2D(new Vector2D(0, 0), 800, [0.98823, 0.30980, 0.21960], AVerts.length / 2, AVao, gl.TRIANGLES),
   ]
 
   const pTrackK = new Track([
-    { time: 0, value: [300, -200] },
+    { time: 0.0, value: [300, -200] },
-    { time: 1, value: [300, 300] }, 
+    { time: 0.5, value: [300, 300] }, 
   ]);
 
   const pTrackE = new Track([
-    { time: 1, value: [600, 900] },
+    { time: 0.5, value: [625, 900] },
-    { time: 2, value: [600, 300] },
+    { time: 1.0, value: [625, 300] },
   ]);
 
   const pTrackA = new Track([
-    { time: 2, value: [900, -200] },
+    { time: 1.0, value: [900, -200] },
-    { time: 3, value: [900, 300] },
+    { time: 1.5, value: [900, 300] },
+  ]);
+
+  const qTrackK = new Track([
+    { time: 4.5, value: [100, -500] },
+    { time: 5.0, value: [100, 100] }, 
+  ]);
+
+  const qTrackE = new Track([
+    { time: 5.0, value: [450, 600] },
+    { time: 5.5, value: [450, 100] },
+  ]);
+
+  const qTrackA = new Track([
+    { time: 5.5, value: [800, -500] },
+    { time: 6.0, value: [800, 100] },
   ]);
 
   const bgTrack = new Track([
-    { time: 0, value: [0.1, 0.1, 0.1, 1.0] },
+    { time: 0, value: [0.0, 0.0, 0.0] },
-    { time: 3, value: [0.1, 0.1, 0.1, 1.0] },
+    { time: 3, value: [0.0, 0.0, 0.0] },
-    { time: 4, value: [0.2, 0.9, 0.2, 1.0] },
+    { time: 4, value: [0.22745, 0.35294, 0.25098] },
   ]);
 
   const timeline = new Timeline({
     "position0": pTrackK,
     "position1": pTrackE,
     "position2": pTrackA,
+    "position3": qTrackK,
+    "position4": qTrackE,
+    "position5": qTrackA,
     "backgroundColor": bgTrack
-  }, 10, true);
+  }, 8, true);
 
   const fragmentColorUniform = gl.getUniformLocation(program, "uColor");
   const canvasSizeUniform = gl.getUniformLocation(program, "uCanvasSize");
@@ -102,6 +137,7 @@ function render() {
 
     canvas.width = canvas.clientWidth;
     canvas.height = canvas.clientHeight;
+    
     gl.clearColor(r, g, b, a);
     gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);