Skip to content

README.md

Latest commit

 

History

History
86 lines (64 loc) · 2.63 KB

README.md

File metadata and controls

86 lines (64 loc) · 2.63 KB
Raw

Visual Algorithm Studio

An interactive browser-based visualizer for data structures and algorithms, built with HTML, CSS, Canvas, and vanilla JavaScript.

Visual Algorithm Studio turns core computer science concepts into step-by-step visual animations. It includes sorting algorithms, stack and queue demos, linked list operations, binary search tree operations, tree traversals, and BFS pathfinding on an editable grid.

Live Demo

https://fazal305.github.io/visual-algorithm-studio/

Features

  • Canvas-based algorithm visualizations
  • Step-by-step playback controls
  • Play, pause, next, back, and reset actions
  • Adjustable animation speed
  • Custom comma-separated number input
  • Random data generator
  • Sorting visualizers for Bubble, Selection, and Insertion Sort
  • Circular Queue simulator
  • Stack push/pop simulator
  • Linked List insert, search, and delete demo
  • Binary Search Tree insert and search visualizers
  • In-order, pre-order, and post-order traversal visualizers
  • BFS grid pathfinding visualizer
  • Editable pathfinding grid with start, end, wall, and erase tools
  • Algorithm info panel with time and space complexity
  • Responsive layout for smaller screens

Included Algorithms

Category Visualizers
Sorting Bubble Sort, Selection Sort, Insertion Sort
Queue Circular Queue
Stack Stack Push / Pop
Linked List Linked List Demo
Binary Tree BST Insert, BST Search, In-order, Pre-order, Post-order
Pathfinding BFS Grid

Tech Stack

  • HTML5
  • CSS3
  • Vanilla JavaScript
  • Canvas API
  • HTML form controls

Project Structure

visual-algorithm-studio/
|-- index.html
|-- algo-styles.css
|-- algo-script.js
|-- LICENSE
`-- README.md

What I Practiced

  • Recording algorithm states before rendering
  • Drawing data structures on Canvas
  • Building playback controls for step-based animations
  • Visualizing time and space complexity
  • Handling custom input data
  • Managing grid editing for pathfinding
  • Keeping UI state in sync with algorithm state
  • Designing an educational developer tool

Run Locally

Open index.html in a browser.

No dependencies, package installation, or build step are required.

Author

Built by Fazal Abbas.

License

This project is licensed under the MIT License.