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

roadmap

parent 1497a678
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
static/homepage.js
+ 0
− 266
View file @ 8479a4f3
......@@ -270,269 +270,3 @@ function draw(){
draw();
window.addEventListener('scroll', draw);
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 verticalLine_timeline(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_timeline()", 5);
}
else if (canvas_h < current_line){
current_line-=speed;
setTimeout("draw_timeline()", 5);
}
}
else{
ctx.lineTo(x, y2);
if (canvas_h < current_line){
current_line-=speed;
}
}
}
}
function circularArc_timeline(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_timeline()", 5);
}
else if (canvas_h < current_line && lines[lineID] == x){
current_line-=speed;
setTimeout("draw_timeline(), 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_timeline()", 5);
}
else if (canvas_h < current_line){
current_line-=speed;
setTimeout("draw_timeline()", 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_timeline()", 5);
}
else if (canvas_h < current_line){
current_line-=speed;
setTimeout("draw_timeline()", 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_timeline()", 5);
}
else if (canvas_h < current_line){
current_line-=speed;
setTimeout("draw_timeline()", 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_timeline(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_timeline()", 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_timeline()", 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_timeline()", 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_timeline()", 80);
}
}
}
}
function draw_timeline(){
/** @type {HTMLCanvasElement} */
let scrTop = document.documentElement.scrollTop;
var canvas = document.getElementById("timeline")
canvas.width = 1300;
canvas.height = 4500;
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, "#185A4F");
gradient.addColorStop(0.36, "#185A4F");
gradient.addColorStop(0.373, "#05BE85");
gradient.addColorStop(0.381, "#05BE85");
gradient.addColorStop(0.387, "#05BE85");
gradient.addColorStop(0.38, "#05BE85");
gradient.addColorStop(0.41, "#185A4F");
gradient.addColorStop(0.53534, "#185A4F");
gradient.addColorStop(0.57648, "#62D881");
gradient.addColorStop(0.63287, "#62D881");
gradient.addColorStop(0.68127, "#185A4F")
gradient.addColorStop(1,"#185A4F");
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;
}
var centerX = canvas.width / 2;
verticalLine_timeline(centerX, 200, 4500, ctx, canvas_h);
circularArc_timeline(centerX - 30, 1600, ctx, canvas_h, 3, 0);
horizontalLine_timeline(centerX - 30, centerX - 400, 1630, ctx, canvas_h, 2, 0);
circularArc_timeline(centerX + 30, 2400, ctx, canvas_h, 1, 1);
horizontalLine_timeline(centerX + 30, centerX + 400, 2430, ctx, canvas_h, 1, 1);
circularArc_timeline(centerX - 30, 3200, ctx, canvas_h, 3, 2);
horizontalLine_timeline(centerX - 30, centerX - 400, 3230, ctx, canvas_h, 2, 2);
circularArc_timeline(centerX + 30, 4000, ctx, canvas_h, 1, 3);
horizontalLine_timeline(centerX + 30, centerX + 400, 4030, ctx, canvas_h, 1, 3);
ctx.stroke()
canvas.style.backgroundColor="transparent";
}
draw_timeline();
window.addEventListener('scroll', draw_timeline);
\ No newline at end of file
wiki/pages/home.html
+ 1
− 1
View file @ 8479a4f3
......@@ -256,7 +256,7 @@
</a>
</div>
<!-- <canvas id="roadmap"></canvas> -->
<canvas id="roadmap"></canvas>
</div>
<script src="{{ url_for('static', filename = 'homepage.js') }}" type="text/javascript"></script>
......
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