Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit e5c5716

Browse files
author
ARIJIT GOSWAMI
committed
first-commit
0 parents commit e5c5716

File tree

98 files changed

+51495
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

98 files changed

+51495
-0
lines changed

‎Copywrite.txt‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
CREATED BY BISWARUP BHATTACHARJEE
2+
EMAIL : bbiswa471@gmail.com
3+
PHONE NO : 6290272740

‎README.md‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
# SEARCHING-ALGORITHMS-VIUALIZER-PART :star_struck: :open_file_folder: :computer:
2+
3+
[![Generic badge](https://img.shields.io/badge/advance-html5-red)](https://shields.io/) [![Generic badge](https://img.shields.io/badge/advance-css3-green)](https://shields.io/) [![Generic badge](https://img.shields.io/badge/advance-javascript-yellow)](https://shields.io/)
4+
5+
***This new Web application is created by Biswarup Bhattacharjee, student of BTECH, in University of Engineering and Management, Kolkata.***
6+
7+
**Email Id: bbiswa471@gmail.com.**
8+
9+
**Contact No: 916290272740.**
10+
11+
12+
<p align="left">
13+
<a href="https://www.facebook.com/profile.php?id=100070395300810" target="blank"><img align="center" src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/facebook.svg" alt="biswa2210" height="30" width="40" /></a>
14+
<a href="https://instagram.com/biswarup2210" target="blank"><img align="center" src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/instagram.svg" alt="" height="30" width="40" /></a>
15+
<a href="https://github.com/biswa2210/biswa2210" target="blank"><img align="center" src="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/github.svg" alt="" height="30" width="40" /></a>
16+
</p>
17+
18+
## About :point_down:
19+
20+
<div align="justified">
21+
22+
*It is a part of functionality 1 of my project.* Algorithm Visualizer is an online platform that visualizes algorithms from as per user choice. Algorithm-visualizer is a web app written in React. It contains UI components and interprets commands into visualizations. Here are two types of algorithms, searching and sorting. Here user will get a tutorial for using this web application. Here we can set the size, speed, name of algorithm them it will show how the algorithm actually works.
23+
</div>
24+
25+
## FEATURES IN SEARCHING VIUSALIZER :point_down:
26+
27+
1. Algorithms<br>
28+
- Breadth-First Search<br>
29+
- Dijkstra's Algorithm<br>
30+
- Bidirectional Swam Algorithm<br>
31+
- Convergent Swam Algorithm<br>
32+
- Swam Algorithm<br>
33+
- Depth-First Search<br>
34+
2. Patterns<br>
35+
- Simple Stair Pattern<br>
36+
- Basic Weight Maze<br>
37+
- Recursive Division<br>
38+
- Recursive Division(Vertical Skew)<br>
39+
- Recursive Division(Horizental Skew)<br>
40+
3. Adding Bomb<br>
41+
4. Visualize<br>
42+
5. Clear Board<br>
43+
6. Clear Walls & Weights<br>
44+
7. Clear Path
45+
8. Speed
46+
- Fast
47+
- Average
48+
- Slow
49+
50+
## LINK of full project: :point_right: https://algo-visualize-login-signup.vercel.app/login
51+
52+
## Purpose :point_down:
53+
54+
<div align="justified">
55+
56+
Algorithms are used in every part of computer science. They form the field's backbone. In computer science, an algorithm gives the computer a specific set of instructions, which allows the computer to do everything, be it running a calculator or running a rocket. Algorithmic thinking, or the ability to define clear steps to solve a problem, is crucial in many different fields. Even if we’re not conscious of it, we use algorithms and algorithmic thinking all the time. Algorithmic thinking allows students to break down problems and conceptualize solutions in terms of discrete steps. Being able to understand and implement an algorithm requires students to practice structured thinking and reasoning abilities. I have made this website to easily study algorithms. I have made this to make learning algorithms an interesting, facsinating and easy work.
57+
</div>
58+
59+
## Use :point_down:
60+
61+
<div align="justified">
62+
63+
Clicking on Visualize Algorithms user can see searching visualizer and there in the drop down menu user has to choose sorting algorithms to watch and understand working of some specific algorithms. User can read the tutorial which describes how to use that web application. User can change the values to see different working way. User just has to follow the tutorials to use this.
64+
</div>
65+
66+
## Importance :point_down:
67+
68+
<div align="justified">
69+
70+
There are two principal applications of algorithm visualization: research and education. Potential benefits for researchers are based on expectations that algo-rithm visualization may help uncover some unknown features of algorithms. For example, one researcher used a visualization of the recursive Tower of Hanoi algo-rithm in which odd- and even-numbered disks were colored in two different colors. He noticed that two disks of the same color never came in direct contact during the algorithm’s execution. This observation helped him in developing a better non-recursive version of the classic algorithm. The application of algorithm visualization to education seeks to help students learning algorithms. The available evidence of its effectiveness is decisively mixed. Although some experiments did register positive learning outcomes, others failed to do so. The increasing body of evidence indicates that creating sophisticated software systems is not going to be enough. In fact, it appears that the level of student involvement with visualization might be more important than specific features of visualization software. In some experiments, low-tech visualizations prepared by students were more effective than passive exposure to sophisticated software systems. <br>
71+
Searching Algorithms are designed to check for an element or retrieve an element from any data structure where it is stored. Based on the type of search operation, these algorithms are generally classified into two categories:<br>
72+
Sequential Search: In this, the list or array is traversed sequentially and every element is checked. For example: Linear Search.<br>
73+
Interval Search: These algorithms are specifically designed for searching in sorted data-structures. These type of searching algorithms are much more efficient than Linear Search as they repeatedly target the center of the search structure and divide the search space in half. For Example: Binary Search. <br> Learning sorting algorithms get much easier with visualizing it. So it is a great way to study and understand algotihms.
74+
</div>
75+
76+
## Folder Structure :point_down:
77+
78+
```bash
79+
Searching-Visualizer
80+
├── public
81+
| ├── browser
82+
| | ├── animations
83+
| | ├── mazeAlgorithms
84+
| | ├── pathfindingAlgorithms
85+
| | ├── board.js
86+
| | ├── bundle.js
87+
| | ├── getDistance.js
88+
| | └── node.js
89+
| └── styling
90+
| ├── fonts
91+
| ├── cssBasic.css
92+
| ├── cssPokemon.css
93+
| └── svgs and imgs
94+
├── server.js
95+
└── index.html
96+
```
97+
98+
## Making :point_down:
99+
100+
<div align="justified">
101+
102+
It has been created using advance JavaScript, advance CSS3, SCSS, ReactJS, advance HTML5, nodejs. It is fully responsive.<br>
103+
For references for algorithms I have used [geeksforgeeks](https://www.geeksforgeeks.org/searching-algorithms/) and [wikipedia](https://en.wikipedia.org/wiki/Search_algorithm).
104+
</div>
105+
106+
## Screenshots :point_down:
107+
108+
<div align="center">
109+
<a href="login.PNG"><img src="login.PNG" width="400" height= "300"></a> <a href="main.PNG"><img src="main.PNG" width="400" height= "300"></a>
110+
111+
<a href="s1.PNG"><img src="s1.PNG" width="400" height= "300"></a> <a href="s2.PNG"><img src="s2.PNG" width="400" height= "300"></a>
112+
113+
<a href="s3.PNG"><img src="s3.PNG" width="400" height= "300"></a> <a href="load.PNG"><img src="load.PNG" width="400" height= "300"></a>
114+
115+
</div>

‎favicon.png‎

13.6 KB
Loading[フレーム]

‎index.html‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
<html>
2+
<head>
3+
<title>Searching Visualizer</title>
4+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
5+
<link id="cssTheme" rel="stylesheet" href="public/styling/cssBasic.css"/>
6+
<link rel="stylesheet" href="index.css" />
7+
<link rel="shortcut icon" type="image/png" href="favicon.png"/>
8+
</head>
9+
<body>
10+
<div id='navbarDiv'>
11+
<nav class="navbar navbar-inverse">
12+
<div class="container-fluid">
13+
<div class="navbar-header">
14+
<a id="refreshButton" class="navbar-brand" href="#">ALGORITHMS VISUALIZER</a>
15+
</div>
16+
<ul class="nav navbar-nav">
17+
<li class="dropdown">
18+
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Algorithms
19+
<span class="caret"></span></a>
20+
<ul class="dropdown-menu">
21+
<li id='startButtonBFS'><a href="#">Breadth-first Search</a></li>
22+
<li id='startButtonDijkstra'><a href="#">Dijkstra's Algorithm</a></li>
23+
<li id='startButtonBidirectional'><a href="#">Bidirectional Swarm Algorithm</a></li>
24+
<li id='startButtonAStar2'><a href="#">A* Search</a></li>
25+
<li id='startButtonGreedy'><a href="#">Greedy Best-first Search</a></li>
26+
<li id='startButtonAStar3'><a href="#">Convergent Swarm Algorithm</a></li>
27+
<li id='startButtonAStar'><a href="#">Swarm Algorithm</a></li>
28+
<li id='startButtonDFS'><a href="#">Depth-first Search</a></li>
29+
<li><a href="https://biswa2210.github.io/sorting-visualizer/">Sorting Visualizer</a></li>
30+
</ul>
31+
</li>
32+
<li class="dropdown">
33+
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Patterns
34+
<span class="caret"></span></a>
35+
<ul class="dropdown-menu">
36+
<li id='startStairDemonstration'><a href="#">Simple Stair Pattern</a></li>
37+
<li id='startButtonCreateMazeWeights'><a href="#">Basic Weight Maze</a></li>
38+
<li id='startButtonCreateMazeTwo'><a href="#">Recursive Division</a></li>
39+
<li id='startButtonCreateMazeThree'><a href="#">Recursive Division (vertical skew)</a></li>
40+
<li id='startButtonCreateMazeFour'><a href="#">Recursive Division (horizontal skew)</a></li>
41+
<li id='startButtonCreateMazeOne'><a href="#">Basic Random Maze</a></li>
42+
</ul>
43+
</li>
44+
<li id='startButtonAddObject'><a href="#">Adding Bomb</a></li>
45+
<li id='startButtonStart'><button id="actualStartButton" class="btn btn-default navbar-btn" type="button">Visualize!</button></li>
46+
<li id='startButtonClearBoard'><a href="#">Clear Board</a></li>
47+
<li id='startButtonClearWalls'><a href="#">Clear Walls &amp; Weights</a></li>
48+
<li id='startButtonClearPath'><a href="#">Clear Path</a></li>
49+
<li class="dropdown">
50+
<a id="adjustSpeed" class="dropdown-toggle" data-toggle="dropdown" href="#">Speed: Fast
51+
<span class="caret"></span></a>
52+
<ul class="dropdown-menu">
53+
<li id='adjustFast'><a href="#">Fast</a></li>
54+
<li id='adjustAverage'><a href="#">Average</a></li>
55+
<li id='adjustSlow'><a href="#">Slow</a></li>
56+
</ul>
57+
</li>
58+
</ul>
59+
</div>
60+
</nav>
61+
</div>
62+
<div id="tutorial">
63+
<h3 class="sak">Welcome to Searching Visualizer!</h3>
64+
<h6 class="sak">This is basically searching algorithms visualizer section,here we can easily visualize searching algoeithms as path finding structure.Its like a fun with learn concept.Here any learns algos and visualize it thats means how the algo works .. so lets try this..</h6>
65+
<p class="sak">If you want to dive right in, feel free to press the "Skip Tutorial" button below. Otherwise, press "Next"!</p>
66+
<div id="tutorialCounter">1/9</div>
67+
<img id="mainTutorialImage" src="favicon.png">
68+
<button id="nextButton" class="btn btn-default navbar-btn" type="button">Next</button>
69+
<button id="previousButton" class="btn btn-default navbar-btn" type="button">Previous</button>
70+
<button id="skipButton" class="btn btn-default navbar-btn" type="button">Skip Tutorial</button>
71+
</div>
72+
<div id='mainGrid'>
73+
<div id='mainText'>
74+
<ul>
75+
<li>
76+
<div class="start"></div>Start Node</li>
77+
<li>
78+
<div class="target"></div>Target Node</li>
79+
<li id="bombLegend">
80+
<div class="object"></div>Bomb Node</li>
81+
<li id="weightLegend">
82+
<div class="borderlessWeight"></div>Weight Node</li>
83+
<li>
84+
<div class="unvisited"></div>Unvisited Node</li>
85+
<li>
86+
<div class="visited"></div><div class="visitedobject"></div>Visited Nodes</li>
87+
<li>
88+
<div class="shortest-path"></div>Shortest-path Node</li>
89+
<li>
90+
<div class="wall"></div>Wall Node</li>
91+
</ul>
92+
</div>
93+
<div id="algorithmDescriptor">Choose an algorithm and visualize it!</div>
94+
<table id='board'/>
95+
</div>
96+
</body>
97+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
98+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
99+
<script src='public/browser/bundle.js'></script>
100+
</html>

‎load.PNG‎

51.2 KB
Loading[フレーム]

‎login.PNG‎

262 KB
Loading[フレーム]

‎main.PNG‎

192 KB
Loading[フレーム]

‎package.json‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"name": "pathfinding_algorithms",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.js",
6+
"scripts": {
7+
"start": "nodemon server.js",
8+
"test": "echo \"Error: no test specified\" && exit 1",
9+
"watch": "watchify /home/clement/Documents/Fullstack_Academy/Projects/Pathfinding_Algorithms/public/browser/board.js -o /home/clement/Documents/Fullstack_Academy/Projects/Pathfinding_Algorithms/public/browser/bundle.js"
10+
},
11+
"author": "",
12+
"license": "ISC",
13+
"dependencies": {
14+
"express": "^4.14.0"
15+
}
16+
}

‎public/Copywrite.txt‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!--
2+
CREATED BY BISWARUP BHATTACHARJEE
3+
EMAIL : bbiswa471@gmail.com
4+
PHONE NO : 6290272740
5+
-->
6+
7+
8+
9+
/*
10+
CREATED BY BISWARUP BHATTACHARJEE
11+
EMAIL : bbiswa471@gmail.com
12+
PHONE NO : 6290272740
13+
*/
14+
15+

‎public/browser/Copywrite.txt‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!--
2+
CREATED BY BISWARUP BHATTACHARJEE
3+
EMAIL : bbiswa471@gmail.com
4+
PHONE NO : 6290272740
5+
-->
6+
7+
8+
9+
/*
10+
CREATED BY BISWARUP BHATTACHARJEE
11+
EMAIL : bbiswa471@gmail.com
12+
PHONE NO : 6290272740
13+
*/
14+
15+

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /