From 0772500b8b4bed65ee1cf702d3ea561bff51f9a3 Mon Sep 17 00:00:00 2001
From: Shraddha <shraddharaghuram@student.tudelft.nl>
Date: Mon, 26 Aug 2024 08:18:41 +0000
Subject: [PATCH] Update file homepage.js
---
static/homepage.js | 386 +++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 386 insertions(+)
create mode 100644 static/homepage.js
diff --git a/static/homepage.js b/static/homepage.js
new file mode 100644
index 0000000..2adae4a
--- /dev/null
+++ b/static/homepage.js
@@ -0,0 +1,386 @@
+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
--
GitLab