Skip to content

Commit 4dc46a1

Browse files
author
Arpitk98
committed
first commit
0 parents  commit 4dc46a1

22 files changed

+1929
-0
lines changed

‎Logo-removebg.png

12.1 KB
Loading

‎Logo.png

31 KB
Loading

‎Logo1.png

7.02 KB
Loading

‎LogoMeta.png

27.9 KB
Loading

‎graph/graph.html

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<html lang="en">
2+
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="stylesheet" href="../styling/style_graph.css" />
7+
<link rel="stylesheet" href="../styling/style_home.css" />
8+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
9+
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
10+
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@531&display=swap" rel="stylesheet" />
11+
12+
<!-- Primary Meta Tags -->
13+
<title>Algorithm Visualizer</title>
14+
<meta name="title" content="Algorithm Visualizer">
15+
<meta name="description" content="Visualize working of complex algorithms, play with them, and know them better.">
16+
17+
18+
<title>Algorithm Visualizer</title>
19+
</head>
20+
21+
<body>
22+
<div class="navlen">
23+
<div class="navbar">
24+
<box class="element element-left">
25+
<img src="../Logo1.png" alt="logo">
26+
<a href="../index.html">Algorithm Visualizer</a>
27+
</box>
28+
<box class="element">
29+
<a href="https://github.com/Arpitk98/algorithm_visualizer_" target=_blank>
30+
<i class="fab fa-github-square"></i>Github</a>
31+
</box>
32+
</div>
33+
</div>
34+
<div class="flex-labels">
35+
<div class="flex-label-items">
36+
<label for="algo">Path Algorithm:</label>
37+
<select id="algo" name="algo">
38+
<!-- <option value="noneAlgo">Choose</option> -->
39+
<option style="background: #E0E5EC;" value="Dstr">Dijkstra's</option>
40+
<option value="Astr">A*</option>
41+
<option value="dfs">DFS</option>
42+
<option value="bfs">BFS</option>
43+
</select>
44+
</div>
45+
<div class="flex-label-items">
46+
<label for="weight">Graph Edges:</label>
47+
<select id="weight" name="weight">
48+
<!-- <option value="noneWeight">Choose</option> -->
49+
<option value="Unweighted">Unweighted</option>
50+
<option value="weighted">Weighted</option>
51+
</select>
52+
</div>
53+
54+
55+
56+
<div class="flex-label-items">
57+
<label for="speed"> Visual Speed: </label>
58+
<div class="slidecontainer">
59+
<input type="range" min="1" max="20" value="15" class="slider" id="speed">
60+
</div>
61+
</div>
62+
</div>
63+
<div class="flex-buttons">
64+
<div class="flex-button-items"> <button class="start">START</button> </div>
65+
<div class="flex-button-items"> <button class="refresh">RELOAD</button> </div>
66+
<div class="flex-button-items"> <button class="reset">RESET</button> </div>
67+
</div>
68+
</div>
69+
<div class="container">
70+
71+
</div>
72+
<!-- <script type="module" src="./js/createGrid.js"></script> -->
73+
<script type="module" src="./js/main.js"></script>
74+
</body>
75+
76+
</html>

‎graph/js/createGrid.js

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
import {
2+
rowsize,
3+
colsize,
4+
startCol,
5+
startRow,
6+
endCol,
7+
endRow,
8+
} from './main.js';
9+
10+
// Returns a random number between min (inclusive) and max (exclusive)
11+
function getRandomArbitrary(max) {
12+
return (Math.random() * (max - 1)) % max;
13+
} // End getRandomArbitrary
14+
15+
// Create a Node
16+
function createNode(row, col, weight) {
17+
var node = document.createElement('div');
18+
node.setAttribute('class', 'before_start');
19+
node.setAttribute('row', row);
20+
node.setAttribute('col', col);
21+
node.setAttribute('wall', 0);
22+
node.setAttribute('cost', Number.POSITIVE_INFINITY);
23+
node.setAttribute('parent', null);
24+
node.setAttribute('weight', weight);
25+
node.innerText = weight.toString();
26+
return node;
27+
} // End createNode
28+
29+
function updateNode(node, row, col, weight, wall) {
30+
31+
node.setAttribute('row', row);
32+
node.setAttribute('col', col);
33+
node.setAttribute('cost', Number.POSITIVE_INFINITY);
34+
node.setAttribute('parent', null);
35+
node.setAttribute('weight', weight);
36+
node.setAttribute('class', 'before_start');
37+
node.innerText = weight.toString();
38+
if (wall == 1) {
39+
node.setAttribute('wall', 1);
40+
node.className+=' wall';
41+
}
42+
else node.setAttribute('wall', 0);
43+
return node;
44+
}
45+
46+
47+
function createEmptyNode(row, col) {
48+
var node = document.createElement('div');
49+
node.setAttribute('class', 'before_start');
50+
node.setAttribute('row', row);
51+
node.setAttribute('col', col);
52+
node.setAttribute('wall', 0);
53+
node.setAttribute('cost', Number.POSITIVE_INFINITY);
54+
node.setAttribute('parent', null);
55+
node.setAttribute('border', '1px solid black');
56+
return node;
57+
}
58+
59+
function updateEmptyNode(node, row, col, wall) {
60+
61+
node.setAttribute('row', row);
62+
node.setAttribute('col', col);
63+
node.setAttribute('cost', Number.POSITIVE_INFINITY);
64+
node.setAttribute('parent', null);
65+
node.setAttribute('border', '1px solid black');
66+
node.setAttribute('class', 'before_start');
67+
node.innerText = '';
68+
if (wall == 1) {
69+
node.setAttribute('wall', 1);
70+
node.className+=" wall";
71+
}
72+
else node.setAttribute('wall', 0);
73+
return node;
74+
}
75+
76+
// Create Board and insert into HTML
77+
export function createBoard() {
78+
var grid = document.querySelector('.container');
79+
grid.innerHTML = '';
80+
for (var row = 0; row < rowsize; row++) {
81+
for (var col = 0; col < colsize; col++) {
82+
let weight = Math.round(getRandomArbitrary(5));
83+
let temp = createNode(row, col, weight);
84+
grid.appendChild(temp);
85+
}
86+
}
87+
}
88+
89+
export function createEmptyBoard() {
90+
var grid = document.querySelector('.container');
91+
grid.innerHTML = '';
92+
for (var row = 0; row < rowsize; row++) {
93+
for (var col = 0; col < colsize; col++) {
94+
let weight = 0;
95+
let temp = createEmptyNode(row, col);
96+
grid.appendChild(temp);
97+
}
98+
}
99+
}
100+
// Set start and end node
101+
export function changeStart(x1 = 0, y1 = 0) {
102+
var startNode = document.querySelector(`div[row='${x1}'][col='${y1}']`);
103+
startNode.setAttribute('cost', 0);
104+
startNode.setAttribute('class', 'ends');
105+
startNode.innerHTML = 'S';
106+
}
107+
export function changeEnd(x2 = rowsize - 1, y2 = colsize - 1) {
108+
var endNode = document.querySelector(`div[row='${x2}'][col='${y2}']`);
109+
endNode.innerHTML = 'E';
110+
endNode.setAttribute('class', 'ends');
111+
} // End createBoard
112+
113+
//refreshBoard
114+
export function refreshBoard() {
115+
console.log("hello");
116+
for (var row = 0; row < rowsize; row++) {
117+
for (var col = 0; col < colsize; col++) {
118+
var node = document.querySelector(`div[row="${row}"][col="${col}"]`);
119+
let weight = Math.round(getRandomArbitrary(5));
120+
if (node.getAttribute('wall') == 1) updateNode(node, row, col, weight, 1);
121+
else updateNode(node, row, col, weight, 0);
122+
}
123+
}
124+
changeStart(startRow, startCol);
125+
changeEnd(endRow, endCol);
126+
}
127+
128+
//refreshEmptyBoard
129+
export function refreshEmptyBoard() {
130+
for (var row = 0; row < rowsize; row++) {
131+
for (var col = 0; col < colsize; col++) {
132+
var node = document.querySelector(`div[row="${row}"][col="${col}"]`);
133+
if (node.getAttribute('wall') == 1) updateEmptyNode(node, row, col, 1);
134+
else updateEmptyNode(node, row, col, 0);
135+
// node.style.background="transparent";
136+
}
137+
}
138+
changeStart(startRow, startCol);
139+
changeEnd(endRow, endCol);
140+
}

‎graph/js/main.js

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
// importing functions
2+
import {
3+
createEmptyBoard,
4+
createBoard,
5+
changeStart,
6+
changeEnd,
7+
refreshBoard,
8+
refreshEmptyBoard,
9+
} from './createGrid.js';
10+
import {
11+
setWallAttribute
12+
} from './wall.js';
13+
import {
14+
dijkstra
15+
} from './pathFindingAlgorithms/dijkstra.js';
16+
import {
17+
Astr
18+
} from './pathFindingAlgorithms/AStar.js';
19+
20+
import {
21+
dfs
22+
} from './pathFindingAlgorithms/dfs.js';
23+
//variables
24+
var resetbtn = document.querySelector('.reset');
25+
var refreshbtn = document.querySelector('.refresh');
26+
var startbtn = document.querySelector('.start');
27+
var container = document.querySelector('.container');
28+
var weightbtn = document.getElementById('weight');
29+
var algobtn = document.getElementById('algo');
30+
31+
// export variables
32+
export var rowsize = 20;
33+
export var colsize = 40;
34+
export var startRow = 10;
35+
export var endRow = 10;
36+
export var startCol = 10;
37+
export var endCol = 30;
38+
export var mouseIsDown = false;
39+
export var weighttype = weightbtn.options[weightbtn.selectedIndex].value;
40+
export var algorithm = algobtn.options[algobtn.selectedIndex].value;
41+
42+
//Initializing eventListeners
43+
resetbtn.addEventListener('click', reset);
44+
startbtn.addEventListener('click', start);
45+
refreshbtn.addEventListener('click', refresh);
46+
container.addEventListener('mousedown', function () {
47+
mouseIsDown = true;
48+
});
49+
container.addEventListener('mouseup', function () {
50+
mouseIsDown = false;
51+
});
52+
container.addEventListener('mouseover', setWallAttribute);
53+
weightbtn.addEventListener('change', updateweight);
54+
algobtn.addEventListener('change', updatealgo);
55+
56+
// reset function
57+
function reset() {
58+
location.reload();
59+
} // End refresh
60+
61+
//refresh function
62+
function refresh() {
63+
container.addEventListener('mousedown', setWallAttribute);
64+
container.addEventListener('mouseup', setWallAttribute);
65+
container.addEventListener('mouseover', setWallAttribute);
66+
if (weighttype == 'Unweighted') refreshEmptyBoard();
67+
else refreshBoard();
68+
startbtn.style.visibility = 'visible'
69+
} //end refresh function
70+
71+
function updateweight() {
72+
weighttype = weightbtn.options[weightbtn.selectedIndex].value;
73+
if (weighttype == 'Unweighted') refreshEmptyBoard();
74+
else {
75+
if (algorithm != 'Dstr') {
76+
algobtn.value = 'Dstr';
77+
algorithm = algobtn.options[algobtn.selectedIndex].value;
78+
}
79+
refreshBoard();
80+
}
81+
changeStart(10, 10);
82+
changeEnd(10, 30);
83+
}
84+
85+
function updatealgo() {
86+
algorithm = algobtn.options[algobtn.selectedIndex].value;
87+
if (algorithm != 'Dstr') {
88+
weightbtn.value = 'Unweighted';
89+
weighttype = weightbtn.options[weightbtn.selectedIndex].value;
90+
refreshEmptyBoard();
91+
}
92+
else if (algorithm == 'Dstr') {
93+
if (weightbtn.value == 'Unweighted') refreshEmptyBoard();
94+
else refreshBoard();
95+
}
96+
changeStart(10, 10);
97+
changeEnd(10, 30);
98+
}
99+
100+
function start() {
101+
console.log(algorithm);
102+
if (algorithm === 'Dstr') dijkstra(startRow, startCol, endRow, endCol);
103+
else if (algorithm === 'Astr') Astr(startRow, startCol, endRow, endCol);
104+
else if (algorithm === 'bfs') dijkstra(startRow, startCol, endRow, endCol);
105+
else if (algorithm === 'dfs') dfs(startRow, startCol, endRow, endCol);
106+
} // End start
107+
108+
// Initialize
109+
window.onload = () => {
110+
container.addEventListener('mousedown', setWallAttribute);
111+
container.addEventListener('mouseup', setWallAttribute);
112+
container.addEventListener('mouseover', setWallAttribute);
113+
if (weighttype == 'Unweighted') createEmptyBoard();
114+
else createBoard();
115+
changeStart(10, 10);
116+
changeEnd(10, 30);
117+
};

0 commit comments

Comments
 (0)