Skip to content
Snippets Groups Projects
Commit 8ed05cce authored by Shraddha Raghuram's avatar Shraddha Raghuram
Browse files

roadmap animation fix

parent fba79300
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
static/homepage-roadmap.js
+ 141
− 123
View file @ 8ed05cce
......@@ -11,143 +11,167 @@ function canDraw(y1, y2) {
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 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;
}
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
// 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 circularArc(x, y, ctx, canvas_h, typeID, lineID) {
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;
}
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 && 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;
}
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 (typeID == 1) {
if (current_line >= y && canvas_h >= y) {
if (canDraw(y - 150, y + 150)) {
ctx.moveTo(x1, y);
ctx.lineTo(x2, y); // Ensure that the line ends at x2
ctx.lineTo(x2, y); // Draw the horizontal line to x2 directly
}
}
}
else if (typeID == 2) {
if (current_line >= y && canvas_h >= y) {
} 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); // Ensure that the line ends at x2
ctx.lineTo(x2, y); // Draw the horizontal line to x2 directly
}
}
}
......@@ -297,12 +321,6 @@ function draw() {
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);
// No need to adjust `canvas_h` so aggressively.
// Ensure canvas height stays consistent
if (canvas_h < start_height) {
current_line = start_height;
}
if(!canvas.getContext) return;
var ctx = canvas.getContext("2d");
......@@ -328,7 +346,7 @@ function draw() {
var centerX = canvas.width / 2;
verticalLine(centerX, 200, 3000, ctx, canvas_h);
// Keep branches from extending or changing when scrolling
// 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);
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment