Skip to content

An interactive web-based algorithm visualizer built with HTML, CSS, and JavaScript. It provides clear, step-by-step animations for popular sorting and pathfinding algorithms, serving as an educational tool and a portfolio showcase.

Notifications You must be signed in to change notification settings

LokVinay/algorithm-visualizer

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Algorithm Visualizer

  • A web-based application designed to help beginners and students understand how different sorting and pathfinding algorithms work through interactive and dynamic visualizations.

🚀 Live Demo

✨ Features

  • Sorting Visualizer: Watch various sorting algorithms bring an array of bars to order.

  • Pathfinding Visualizer: Explore how pathfinding algorithms navigate a grid to find the shortest path between two points.

  • Dynamic Notes: Click the "Show Notes" button to get a simple, beginner-friendly explanation of the selected algorithm.

  • Customizable Input: Manually enter your own array for sorting or create a random maze for pathfinding.

  • Speed Control: Adjust the animation speed from "Very Slow" to "Very Fast" to observe each step at your own pace.

  • Dark/Light Mode: Toggle between themes for a comfortable viewing experience.

🛠️ Tech Stack

  • HTML5: Provides the foundational structure of the web application.

  • CSS3: Used for all styling, including responsive design, animations, and the dark/light theme.

  • JavaScript (ES6+): Powers all the interactive logic, including the algorithm implementations and real-time visualization.

🧠 Concepts Visualized

Sorting Algorithms:

  • Bubble Sort: A simple algorithm that repeatedly steps through the list, compares adjacent elements, and swaps them if they are in the wrong order.

  • Insertion Sort: Builds the final sorted array one item at a time by inserting each element into its correct position.

  • Merge Sort: A "divide and conquer" algorithm that recursively splits the array and merges the sorted halves.

  • Quick Sort: A highly efficient "divide and conquer" algorithm that uses a pivot element to partition the array.

  • Heap Sort: Uses a binary heap data structure to efficiently sort elements.

Pathfinding Algorithms:

  • Breadth-First Search (BFS): Explores all immediate neighbor nodes before moving to the next level of nodes, guaranteeing the shortest path in an unweighted grid.

  • Depth-First Search (DFS): Explores as far as possible down each branch before backtracking, often used for maze generation.

  • Dijkstra's Algorithm: Finds the shortest paths from a starting node to all other nodes in a weighted graph.

  • A Search:* An intelligent extension of Dijkstra's, using a heuristic function to guide its search and find the shortest path more efficiently.

📂 Project Structure

  • This project is organized into three main files for clarity and modularity.
image

⚙️ How to Run

  1. Clone the repository to your local machine:
image
  1. Navigate to the project directory:
image
  1. Open the index.html file in your preferred web browser.

✍️ Author

  • Thiruveedhula Lok Vinay

About

An interactive web-based algorithm visualizer built with HTML, CSS, and JavaScript. It provides clear, step-by-step animations for popular sorting and pathfinding algorithms, serving as an educational tool and a portfolio showcase.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published