https://github.com/sauravyadav19/bubble-sort-visualizer
A web-based Bubble Sort visualizer using C++ compiled to WebAssembly via Emscripten.
https://github.com/sauravyadav19/bubble-sort-visualizer
cpp data-structures-and-algorithms sorting-visualization web-assembly
Last synced: 4 months ago
JSON representation
A web-based Bubble Sort visualizer using C++ compiled to WebAssembly via Emscripten.
- Host: GitHub
- URL: https://github.com/sauravyadav19/bubble-sort-visualizer
- Owner: sauravyadav19
- Created: 2025-09-23T02:42:38.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-09-23T10:54:47.000Z (4 months ago)
- Last Synced: 2025-09-23T12:37:42.969Z (4 months ago)
- Topics: cpp, data-structures-and-algorithms, sorting-visualization, web-assembly
- Language: JavaScript
- Homepage: https://sauravyadav19.github.io/Bubble-Sort-Visualizer/
- Size: 21.5 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Bubble Sort Visualizer
A web-based Bubble Sort visualizer using **C++ compiled to WebAssembly** via Emscripten.
---
## Features
- Step-by-step visualization of Bubble Sort
- Highlighting bars being compared
- Beginner-friendly and interactive
---
## How to Run Locally
1. **Clone the repository:**
```bash
git clone https://github.com/sauravyadav19/Visualizer.git
cd Visualizer/01_bubbleSort/
```
2. **Open `index.html` in a web browser.**
*(No server required; works directly in Chrome/Firefox/Edge/Safari.)*
---
### Optional: Recompile the C++ Code (Emscripten)
If you want to **modify the Bubble Sort logic** or rebuild the WebAssembly file:
1. **Install Emscripten** (if not already installed).
Follow the official guide: [Emscripten Official Site](https://emscripten.org/)
2. **Compile the C++ file to WebAssembly:**
```bash
emcc bubble_sort.cpp -O3 -s WASM=1 \
-s EXPORTED_FUNCTIONS='["_malloc","_free","_set_array","_get_array_value","_get_array_size","_bubble_sort_step"]' \
-s EXPORTED_RUNTIME_METHODS='["cwrap","ccall","HEAP32"]' \
-o bubble_sort.js
```
3. **Explanation of Flags:**
- `-O3` → Maximum optimization for faster execution
- `-s WASM=1` → Compile to WebAssembly
- `EXPORTED_FUNCTIONS` → Functions your JS code will call
- `EXPORTED_RUNTIME_METHODS` → Runtime helpers for memory access
- `-o bubble_sort.js` → Output JavaScript glue file (also produces `bubble_sort.wasm`)
4. **After compilation, you will get:**
```
bubble_sort.js <-- JS glue code
bubble_sort.wasm <-- WebAssembly binary
```
*Make sure these files are in the same folder as your `index.html`, replacing the previous ones if needed.*
---
## Live Demo
You can view the live demo using GitHub Pages here:
- [Live Demo](https://sauravyadav19.github.io/Bubble-Sort-Visualizer/)