{"id":19287965,"url":"https://github.com/gunjankadu/pathfindingvisualizer","last_synced_at":"2025-02-23T23:24:25.915Z","repository":{"id":106041011,"uuid":"297153189","full_name":"GunjanKadu/PathFindingVisualizer","owner":"GunjanKadu","description":"An application to Visualize various pathfinding algorithm using React.js","archived":false,"fork":false,"pushed_at":"2020-10-28T10:07:38.000Z","size":8389,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-05T19:22:59.756Z","etag":null,"topics":["bellman-ford-algorithm","bfs-algorithm","dfs-algorithm","dijkstra-shortest-path","graph","priority-queue","react","react-hooks","recursive-algorithm","recursive-division","typescript"],"latest_commit_sha":null,"homepage":"https://gunjankadu.github.io/PathFindingVisualizer/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/GunjanKadu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-09-20T19:58:04.000Z","updated_at":"2022-04-18T23:32:08.000Z","dependencies_parsed_at":null,"dependency_job_id":"3cf843dd-4e4b-437f-b89e-b927c301a7ed","html_url":"https://github.com/GunjanKadu/PathFindingVisualizer","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GunjanKadu%2FPathFindingVisualizer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GunjanKadu%2FPathFindingVisualizer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GunjanKadu%2FPathFindingVisualizer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GunjanKadu%2FPathFindingVisualizer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/GunjanKadu","download_url":"https://codeload.github.com/GunjanKadu/PathFindingVisualizer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240392685,"owners_count":19794138,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bellman-ford-algorithm","bfs-algorithm","dfs-algorithm","dijkstra-shortest-path","graph","priority-queue","react","react-hooks","recursive-algorithm","recursive-division","typescript"],"created_at":"2024-11-09T22:07:42.491Z","updated_at":"2025-02-23T23:24:25.903Z","avatar_url":"https://github.com/GunjanKadu.png","language":"TypeScript","readme":"\u003ch1 align=\"center\"\u003ePath Finding Visualizer\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003eLive at - https://gunjankadu.github.io/PathFindingVisualizer/ \u003c/p\u003e\n\u003cp align=\"center\"\u003e This project is live visualiztion of the famous path finding algorithms. \u003c/p\u003e\n\u003cbr/\u003e\n\n![Gif](https://github.com/GunjanKadu/PathFindingVisualizer/blob/master/gif/demo.gif)\n\n\u003ch2 align=\"center\"\u003eAlgorithms Included\u003c/h2\u003e\n\u003cli\u003e* Dijkstra\u003c/li\u003e\n\u003cli\u003e* Bellman-Ford\u003c/li\u003e\n\u003cli\u003e* DFS\u003c/li\u003e\n\u003cli\u003e* 0-1 BFS\u003c/li\u003e\n\n\u003ch2 align=\"center\"\u003eFeatures\u003c/h2\u003e\n\n### Selecting an Algorithm and Running the Visualizer\n\nYou can select a path algorithm using the Algorithms dropdown menu from the navbar.\nThe starting node for the algorithm is represented by the green node on the graph and the end node is represented by the red node.\nYou can alter the positions of the starting and ending nodes, by clicking and dragging them.\nAny changes to the starting and ending node's locations will persist until the \"Clear Board\" button is pressed.\nOnce an algorithm is selected you can visualize the algorithm by pressing the \"Visualize It!\" button.\nDoing so will change the color of nodes on the graph in the order they are visited.\nOnce the end node is reached the shortest path will be displayed in yellow.\nButtons will be disabled for the majority of the animation process.\n\n### Weighted Graphs and Non-Weighted Graphs\n\nThe app will automatically generate edge weights for algorithms that are meant for weighted graphs.\nThese edge weights represent the distance to travel to that node from its neighbors, and are displayed in the center of each node.\nIn the case of this app neighbors are considered to be those nodes directly next to the current node in the four main directions: up, down, left, right.\nIf the algorithm does not need these weights none will be generated, and a \"0\" will be displayed.\n\n### Building Walls\n\nYou can build walls to eliminate some nodes from the graph.\nTo do so simply click on a node in the graph and it will change colors to black, signifying that it is now a wall.\nYou can click your mouse, hold it and drag it in order to create larger walls.\nClicking, or dragging your cursor over, existing walls will turn those walls back to normal nodes.  \nAny walls built will persist through algorithm changes, weight changes, and visualizations.\nTo remove walls you will need to use the \"Clear Board\" button.\n\n### Generating Mazes\n\nCurrently there are two maze algorithms implement: random walls and the recursive division.\nThe random walls method generates a random number in the range [0, 1) for each node.\nBased on this number the node is transformed to a wall.\nThe recursive division method follows the basic [recursive division algorithm](https://en.wikipedia.org/wiki/Maze_generation_algorithm#Recursive_division_method) with one difference.\nThe difference is that instead of generating a single passage in each wall here we generate multiple.\nThis allows for mulitple paths between the start and end node instead of just a single path.\n\n### Changing Speed\n\nThis setting adjusts the animation speed of the app.\nThere are three settings: \"Slow\", \"Average\", and \"Fast.\"\nThe default setting is \"Fast.\"\n\n\u003cbr/\u003e\n\n## Made Using\n\n- [React](https://github.com/facebook/react)\n- [TypeScript](https://github.com/microsoft/TypeScript) - Strongly Typed No JS\n- [CSS Animations] - Animation Effect\n\n\u003cbr\u003e\n\n## Build Guide\n\n```bash\ngit clone https://github.com/GunjanKadu/PathFindingVisualizer.git\ncd Pathfinding-Visualizer\nyarn install\nyarn start\n```\n\n\u003cbr\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgunjankadu%2Fpathfindingvisualizer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgunjankadu%2Fpathfindingvisualizer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgunjankadu%2Fpathfindingvisualizer/lists"}