Update file homepage.js

static/homepage.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;
+
+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) {
+        if (canDraw(y1, y2)) ctx.moveTo(x, y1);
+        if (current_line > y2){
+            if (canDraw(y1, y2)) ctx.lineTo(x, y2);
+        }
+        else if(current_line < y2){
+            if (canDraw(y1, y2)) ctx.lineTo(x, current_line);
+            if (canvas_h > current_line){
+                current_line+=speed;
+                setTimeout("draw()", 5);
+            }
+            else if (canvas_h < current_line){
+                current_line-=speed;
+                setTimeout("draw()", 5);
+            }
+        }
+        else{
+            ctx.lineTo(x, y2);
+            if (canvas_h < current_line){
+                current_line-=speed;
+            }
+        }
+    }
+}
+function circularArc(x, y, ctx, canvas_h, typeID, lineID) { // r = 100
+    if (typeID == 1) {
+        if (current_line >= y){ 
+            if (current_line > y+r){
+                if (canDraw(y - 150, y + 150)) ctx.arc(x, y, r, Math.PI, Math.PI/2, true);
+            }
+            else if (current_line < y+r){
+                if (canDraw(y - 150, y + 150)) ctx.arc(x, y, r, Math.PI, Math.PI-Math.asin((Math.min(current_line,y+r)-y) / r), true);
+                if (canvas_h > current_line){
+                    current_line+=speed;
+                    setTimeout("draw()", 5);
+                }
+                else if (canvas_h < current_line && lines[lineID] == x){
+                    current_line-=speed;
+                    setTimeout("draw(), 5");
+                }
+            }
+            else{
+                if (canDraw(y - 150, y + 150)) ctx.arc(x, y, r, Math.PI, Math.PI/2, true);
+                if (canvas_h < current_line && lines[lineID] == x){
+                    current_line-=speed;
+                }
+            }
+        }
+    }
+    else if (typeID == 2) {
+        if (current_line >= y-r && lines[lineID] == x){ 
+            if (current_line > y){
+                if (canDraw(y - 150, y + 150)) ctx.arc(x, y, r, Math.PI*1.5, 0, false);
+            }
+            else if (current_line < y){
+                if (canDraw(y - 150, y + 150)) ctx.arc(x, y, r, Math.PI*1.5, Math.PI*1.5+Math.acos((y-current_line)/r), false);
+                if (canvas_h > current_line){
+                    current_line+=speed;
+                    setTimeout("draw()", 5);
+                }
+                else if (canvas_h < current_line){
+                    current_line-=speed;
+                    setTimeout("draw()", 5);
+                }
+            }
+            else{
+                if (canDraw(y - 150, y + 150)) ctx.arc(x, y, r, Math.PI*1.5, 0, false);
+                if (canvas_h < current_line){
+                    current_line-=speed;
+                }
+            }
+        }
+    }
+    else if (typeID == 3) {
+        if (current_line >= y){ 
+            if (current_line > y+r){
+                if (canDraw(y - 150, y + 150)) ctx.arc(x, y, r, 0, Math.PI/2, false);
+            }
+            else if (current_line < y+r){
+                if (canDraw(y - 150, y + 150)) ctx.arc(x, y, r, 0, Math.asin((current_line-y)/r), false);
+                if (canvas_h > current_line){
+                    current_line+=speed;
+                    setTimeout("draw()", 5);
+                }
+                else if (canvas_h < current_line){
+                    current_line-=speed;
+                    setTimeout("draw()", 5);
+                }
+            }
+            else{
+                if (canDraw(y - 150, y + 150)) ctx.arc(x, y, r, 0, Math.PI/2, false);
+                if (canvas_h < current_line && lines[lineID] == x){
+                    current_line-=speed;
+                }
+            }
+        }
+    }
+    else if (typeID == 4) {
+        if (current_line >= y-r && lines[lineID] == x){ 
+            if (current_line > y){
+                if (canDraw(y - 150, y + 150)) ctx.arc(x, y, r, Math.PI*1.5, Math.PI, true);
+            }
+            else if (current_line < y){
+                if (canDraw(y - 150, y + 150)) ctx.arc(x, y, r, Math.PI*1.5, Math.PI + Math.asin((y-current_line)/r), true);
+                if (canvas_h > current_line){
+                    current_line+=speed;
+                    setTimeout("draw()", 5);
+                }
+                else if (canvas_h < current_line){
+                    current_line-=speed;
+                    setTimeout("draw()", 5);
+                }
+            }
+            else{
+                if (canDraw(y - 150, y + 150)) ctx.arc(x, y, r, Math.PI*1.5, Math.PI, true);
+                if (canvas_h < current_line){
+                    current_line-=speed;
+                }
+            }
+        }
+    }
+}
+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);
+            if (canDraw(y - 150, y + 150) && x1 != lines[lineID]) ctx.lineTo(lines[lineID], y);
+            if (lines[lineID] < x2){
+                lines[lineID] += 10;
+            }
+            if (lines[lineID] < x2){
+                setTimeout("draw()", 120);
+            }
+        }
+        if (canvas_h < y && lines[lineID] > x1 && current_line == y){
+            if (canDraw(y - 150, y + 150)) ctx.moveTo(x1, y);
+            if (canDraw(y - 150, y + 150) && x1 != lines[lineID]) ctx.lineTo(lines[lineID], y);
+            if (lines[lineID] > x1){
+                lines[lineID] -= 10;
+            }
+            if (lines[lineID] > x1){
+                setTimeout("draw()", 80);
+            }
+        }
+    }
+    else if (typeID == 2) { 
+        if (current_line >= y && canvas_h >= y){ 
+            if (canDraw(y - 150, y + 150)) ctx.moveTo(x1, y);
+            if (canDraw(y - 150, y + 150) && x1 != lines[lineID]) ctx.lineTo(lines[lineID], y);
+            if (lines[lineID] > x2){
+                lines[lineID] -= 10;
+            }
+            if (lines[lineID] > x2){
+                setTimeout("draw()", 120);
+            }
+        }
+        if (canvas_h < y && lines[lineID] < x1 && current_line == y){
+            if (canDraw(y - 150, y + 150)) ctx.moveTo(x1, y);
+            if (canDraw(y - 150, y + 150) && x1 != lines[lineID]) ctx.lineTo(lines[lineID], y);
+            if (lines[lineID] < x1){
+                lines[lineID] += 10;
+            }
+            if (lines[lineID] < x1){
+                setTimeout("draw()", 80);
+            }
+        }
+    }
+}
+function draw(){
+    /** @type {HTMLCanvasElement} */
+    let scrTop = document.documentElement.scrollTop;
+    var canvas = document.getElementById("tutorial")
+    canvas.width = 1300;
+    canvas.height = 13600;
+    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_h % 10 == 9) {
+        canvas_h -= 9;
+    }
+    if (canvas_h % 10 == 8) {
+        canvas_h -= 8;
+    }
+    if (canvas_h % 10 == 7) {
+        canvas_h -= 7;
+    }
+    if (canvas_h % 10 == 6) {
+        canvas_h -= 6;
+    }
+    if (canvas_h % 10 == 5) {
+        canvas_h -= 5;
+    }
+    if (canvas_h % 10 == 4) {
+        canvas_h -= 4;
+    }
+    if (canvas_h % 10 == 3) {
+        canvas_h -= 3;
+    }
+    if (canvas_h % 10 == 2) {
+        canvas_h -= 2;
+    }
+    if (canvas_h % 10 == 1) {
+        canvas_h -= 1;
+    }
+
+    if(!canvas.getContext) return;
+    var ctx = canvas.getContext("2d");
+    var gradient = ctx.createLinearGradient(0, 0, 0, 13370);
+    gradient.addColorStop(0, "#2B5D6F");
+    gradient.addColorStop(0.36, "#2B5D6F");
+    gradient.addColorStop(0.373, "#FFFFFF");
+    gradient.addColorStop(0.381, "#FFFFFF");
+    gradient.addColorStop(0.387, "#15EAEE");
+    gradient.addColorStop(0.38, "#15EAEE");
+    gradient.addColorStop(0.41, "#2B5D6F");
+    gradient.addColorStop(0.53534, "#2B5D6F");
+    gradient.addColorStop(0.57648, "#653F05");
+    gradient.addColorStop(0.63287, "#653F05");
+    gradient.addColorStop(0.68127, "#2B5D6F")
+    gradient.addColorStop(1,"#2B5D6F");
+    ctx.strokeStyle = gradient;
+    // ctx.shadowColor = "#00508A";
+    // ctx.shadowBlur = 20;
+    ctx.lineWidth = 17;
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+    ctx.beginPath();
+    // console.log(current_line, canvas_h);
+
+    if (canvas_h < start_height){
+        current_line = start_height;
+    }
+
+    
+    verticalLine(330, 300, 450, ctx, canvas_h);
+
+    circularArc(300, 450, ctx, canvas_h, 3, 0);
+
+    horizontalLine(300, 180, 480, ctx, canvas_h, 2, 0);
+
+    circularArc(180, 510, ctx, canvas_h, 4, 0);
+
+    verticalLine(150, 510, 970, ctx, canvas_h);
+
+    circularArc(180, 970, ctx, canvas_h, 1, 1);
+
+    horizontalLine(180, 1040, 1000, ctx, canvas_h, 1, 1);
+
+    circularArc(1040, 1030, ctx, canvas_h, 2, 1);
+
+    verticalLine(1070, 1030, 1820, ctx, canvas_h);
+
+    circularArc(1040, 1820, ctx, canvas_h, 3, 2);
+
+    horizontalLine(1040, 180, 1850, ctx, canvas_h, 2, 2);
+
+    circularArc(180, 1880, ctx, canvas_h, 4, 2);
+
+    verticalLine(150, 1880, 2800, ctx, canvas_h);
+
+    circularArc(180, 2800, ctx, canvas_h, 1, 3);
+
+    horizontalLine(180, 1120, 2830, ctx, canvas_h, 1, 3);
+
+    circularArc(1120, 2860, ctx, canvas_h, 2, 3);
+
+    verticalLine(1150, 2860, 3250, ctx, canvas_h);
+
+    circularArc(1120, 3250, ctx, canvas_h, 3, 4);
+
+    horizontalLine(1120, 260, 3280, ctx, canvas_h, 2, 4);
+
+    circularArc(260, 3310, ctx, canvas_h, 4, 4);
+
+    verticalLine(230, 3310, 4620, ctx, canvas_h);
+
+    circularArc(260, 4620, ctx, canvas_h, 1, 14);
+
+    horizontalLine(260, 420, 4650, ctx, canvas_h, 1, 14);
+
+    circularArc(420, 4680, ctx, canvas_h, 2, 14);
+
+    verticalLine(450, 4680, 5070, ctx, canvas_h);
+
+    circularArc(480, 5070, ctx, canvas_h, 1, 5);
+
+    horizontalLine(480, 700, 5100, ctx, canvas_h, 1, 5);
+
+    circularArc(700, 5130, ctx, canvas_h, 2, 5);
+
+    verticalLine(730, 5130, 6330, ctx, canvas_h);
+
+    circularArc(700, 6330, ctx, canvas_h, 3, 6);
+
+    horizontalLine(700, 180, 6360, ctx, canvas_h, 2, 6);
+
+    circularArc(180, 6390, ctx, canvas_h, 4, 6);
+
+    verticalLine(150, 6390, 6570, ctx, canvas_h);
+
+    circularArc(180, 6570, ctx, canvas_h, 1, 7);
+
+    horizontalLine(180, 600, 6600, ctx, canvas_h, 1, 7);
+
+    circularArc(600, 6630, ctx, canvas_h, 2, 7);
+
+    verticalLine(630, 6630, 6840, ctx, canvas_h);
+
+    circularArc(600, 6840, ctx, canvas_h, 3, 8);
+
+    horizontalLine(600, 180, 6870, ctx, canvas_h, 2, 8);
+
+    circularArc(180, 6900, ctx, canvas_h, 4, 8);
+
+    verticalLine(150, 6900, 7760, ctx, canvas_h);
+
+    circularArc(180, 7760, ctx, canvas_h, 1, 9);
+
+    horizontalLine(180, 210, 7790, ctx, canvas_h, 1, 9);
+
+    circularArc(210, 7820, ctx, canvas_h, 2, 9);
+
+    verticalLine(240, 7820, 9890, ctx, canvas_h);
+
+    circularArc(210, 9890, ctx, canvas_h, 3, 10);
+
+    horizontalLine(210, 180, 9920, ctx, canvas_h, 2, 10);
+
+    circularArc(180, 9950, ctx, canvas_h, 4, 10);
+
+    verticalLine(150, 9950, 10790, ctx, canvas_h);
+
+    circularArc(180, 10790, ctx, canvas_h, 1, 11);
+
+    horizontalLine(180, 570, 10820, ctx, canvas_h, 1, 11);
+
+    circularArc(570, 10850, ctx, canvas_h, 2, 11);
+
+    verticalLine(600, 10850, 11380, ctx, canvas_h);
+
+    circularArc(630, 11380, ctx, canvas_h, 1, 12);
+
+    horizontalLine(630, 1120, 11410, ctx, canvas_h, 1, 12);
+
+    circularArc(1120, 11440, ctx, canvas_h, 2, 12);
+
+    verticalLine(1150, 11440, 12020, ctx, canvas_h);
+
+    circularArc(1120, 12020, ctx, canvas_h, 3, 13);
+
+    horizontalLine(1120, 180, 12050, ctx, canvas_h, 2, 13);
+
+    circularArc(180, 12080, ctx, canvas_h, 4, 13);
+    
+    verticalLine(150, 12080, 12470, ctx, canvas_h);
+
+    circularArc(180, 12470, ctx, canvas_h, 1, 15);
+    
+    horizontalLine(180, 620, 12500, ctx, canvas_h, 1, 15);
+
+    circularArc(620, 12530, ctx, canvas_h, 2, 15);
+
+    verticalLine(650, 12530, 13500, ctx, canvas_h);
+
+
+    ctx.stroke()
+    canvas.style.backgroundColor="transparent";
+}
+draw();
+window.addEventListener('scroll', draw);
\ No newline at end of file