roadmap animation

static/homepage-roadmap.js

-var current_line = 300; 
-var lines = [300, 180, 1040, 180, 1120, 480, 700, 180, 600, 180, 210, 180, 630, 1120, 260, 180];
-var r = 30; 
-var start_height = 300; 
-var speed = 10;
-var top_screen;
-var bottom_screen;
+// var current_line = 300; 
+// var lines = [300, 180, 1040, 180, 1120, 480, 700, 180, 600, 180, 210, 180, 630, 1120, 260, 180];
+// var r = 30; 
+// var start_height = 300; 
+// var speed = 10;
+// var top_screen;
+// var bottom_screen;
 
-function canDraw(y1, y2) {
-    if (y2 < top_screen || y1 > bottom_screen) return false;
-    else return true;
-}
+// function canDraw(y1, y2) {
+//     if (y2 < top_screen || y1 > bottom_screen) return false;
+//     else return true;
+// }
 
 // function verticalLine(x, y1, y2, ctx, canvas_h) {
 //     if (current_line >= y1 && canvas_h >= start_height) {
@@ -36,14 +36,6 @@ function canDraw(y1, y2) {
 //         }
 //     }
 // }
-function verticalLine(x, y1, y2, ctx, canvas_h) {
-    if (current_line >= y1 && canvas_h >= start_height) {
-        if (canDraw(y1, y2)) {
-            ctx.moveTo(x, y1);
-            ctx.lineTo(x, y2);  // Directly draw the line to y2 without delay
-        }
-    }
-}
 // function circularArc(x, y, ctx, canvas_h, typeID, lineID) { // r = 100
 //     if (typeID == 1) {
 //         if (current_line >= y){ 
@@ -142,40 +134,6 @@ function verticalLine(x, y1, y2, ctx, canvas_h) {
 //         }
 //     }
 // }
-function circularArc(x, y, ctx, canvas_h, typeID, lineID) {
-    if (typeID == 1) {
-        if (current_line >= y) {
-            if (canDraw(y - 150, y + 150)) {
-                ctx.arc(x, y, r, Math.PI, Math.PI/2, true);
-            }
-        }
-    }
-    // Similar logic for other arc types, but no dynamic updates or timeouts
-    else if (typeID == 2) {
-        if (current_line >= y - r) {
-            if (canDraw(y - 150, y + 150)) {
-                ctx.arc(x, y, r, Math.PI * 1.5, 0, false);
-            }
-        }
-    }
-}
-function horizontalLine(x1, x2, y, ctx, canvas_h, typeID, lineID) {
-    if (typeID == 1) {
-        if (current_line >= y && canvas_h >= y) {
-            if (canDraw(y - 150, y + 150)) {
-                ctx.moveTo(x1, y);
-                ctx.lineTo(x2, y);  // Draw the horizontal line to x2 directly
-            }
-        }
-    } else if (typeID == 2) {
-        if (current_line >= y && canvas_h >= y) {
-            if (canDraw(y - 150, y + 150)) {
-                ctx.moveTo(x1, y);
-                ctx.lineTo(x2, y);  // Draw the horizontal line to x2 directly
-            }
-        }
-    }
-}
 // function horizontalLine(x1, x2, y, ctx, canvas_h, typeID, lineID) {
 //     if (typeID == 1) { 
 //         if (current_line >= y && canvas_h >= y){ 
@@ -310,17 +268,39 @@ function horizontalLine(x1, x2, y, ctx, canvas_h, typeID, lineID) {
 //     canvas.style.backgroundColor="transparent";
 // }
 
+function verticalLine(x, y1, y2, ctx) {
+    // Directly draw the line from y1 to y2
+    ctx.moveTo(x, y1);
+    ctx.lineTo(x, y2);
+}
+
+function circularArc(x, y, ctx, typeID) {
+    // Draw circular arcs based on the typeID
+    if (typeID == 1) {
+        ctx.arc(x, y, 30, Math.PI, Math.PI/2, true);  // top-left curve
+    }
+    else if (typeID == 2) {
+        ctx.arc(x, y, 30, Math.PI * 1.5, 0, false);   // top-right curve
+    }
+    else if (typeID == 3) {
+        ctx.arc(x, y, 30, 0, Math.PI/2, false);       // bottom-right curve
+    }
+    else if (typeID == 4) {
+        ctx.arc(x, y, 30, Math.PI * 1.5, Math.PI, true); // bottom-left curve
+    }
+}
+
+function horizontalLine(x1, x2, y, ctx) {
+    // Directly draw the horizontal line from x1 to x2 at height y
+    ctx.moveTo(x1, y);
+    ctx.lineTo(x2, y);
+}
+
 function draw() {
     /** @type {HTMLCanvasElement} */
-    let scrTop = document.documentElement.scrollTop;
-    var canvas = document.getElementById("roadmap");
+    let canvas = document.getElementById("roadmap");
     canvas.width = 1300;
     canvas.height = 3000;
-    let cvs_h = canvas.getBoundingClientRect().top + scrTop;
-    let cur_h = document.documentElement.clientHeight / 1.8 + scrTop;
-    top_screen = Math.floor(-canvas.getBoundingClientRect().top);
-    bottom_screen = Math.floor(document.documentElement.clientHeight + scrTop - cvs_h);
-    let canvas_h = Math.floor(cur_h - cvs_h);
 
     if(!canvas.getContext) return;
     var ctx = canvas.getContext("2d");
@@ -343,24 +323,25 @@ function draw() {
     ctx.lineJoin = 'round';
     ctx.beginPath();
 
+    // Draw vertical line from the center of the canvas
     var centerX = canvas.width / 2;  
-    verticalLine(centerX, 200, 3000, ctx, canvas_h);
+    verticalLine(centerX, 200, 3000, ctx);
 
-    // Render each branch without any dynamic adjustments
-    circularArc(centerX - 30, 600, ctx, canvas_h, 3, 0);
-    horizontalLine(centerX - 30, centerX - 400, 630, ctx, canvas_h, 2, 0);
+    // Draw branches
+    circularArc(centerX - 30, 600, ctx, 3);
+    horizontalLine(centerX - 30, centerX - 400, 630, ctx);
     
-    circularArc(centerX + 30, 1200, ctx, canvas_h, 1, 1);
-    horizontalLine(centerX + 30, centerX + 400, 1230, ctx, canvas_h, 1, 1);
+    circularArc(centerX + 30, 1200, ctx, 1);
+    horizontalLine(centerX + 30, centerX + 400, 1230, ctx);
     
-    circularArc(centerX - 30, 1800, ctx, canvas_h, 3, 2);
-    horizontalLine(centerX - 30, centerX - 400, 1830, ctx, canvas_h, 2, 2);
+    circularArc(centerX - 30, 1800, ctx, 3);
+    horizontalLine(centerX - 30, centerX - 400, 1830, ctx);
     
-    circularArc(centerX + 30, 2400, ctx, canvas_h, 1, 3);
-    horizontalLine(centerX + 30, centerX + 400, 2430, ctx, canvas_h, 1, 3);
+    circularArc(centerX + 30, 2400, ctx, 1);
+    horizontalLine(centerX + 30, centerX + 400, 2430, ctx);
   
     ctx.stroke();
-    canvas.style.backgroundColor="transparent";
+    canvas.style.backgroundColor = "transparent";
 }
 draw();
 window.addEventListener('scroll', draw);