https://github.com/atoomnetmarc/3d-sorting-algorithm-visualizer
Interactive 3D visualizer for sorting algorithms built with Three.js.
https://github.com/atoomnetmarc/3d-sorting-algorithm-visualizer
javascript sorting-algorithms sorting-visualization threejs vibe-coding
Last synced: 7 months ago
JSON representation
Interactive 3D visualizer for sorting algorithms built with Three.js.
- Host: GitHub
- URL: https://github.com/atoomnetmarc/3d-sorting-algorithm-visualizer
- Owner: atoomnetmarc
- License: apache-2.0
- Created: 2025-04-09T19:09:10.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2025-04-10T18:49:35.000Z (7 months ago)
- Last Synced: 2025-04-10T18:50:36.989Z (7 months ago)
- Topics: javascript, sorting-algorithms, sorting-visualization, threejs, vibe-coding
- Language: JavaScript
- Homepage: https://atoomnetmarc.github.io/3D-Sorting-Algorithm-Visualizer/
- Size: 80.1 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: docs/Contributing.md
- License: LICENSE
Awesome Lists containing this project
README
# 3D Sorting Algorithm Visualizer
An interactive 3D visualization of sorting algorithms built with Three.js. It demonstrates how different algorithms sort an array, with smooth animations, rainbow colors, and user controls.
---
## Implementation Process
This project was developed collaboratively with the AI model [Quasar Alpha](https://openrouter.ai/openrouter/quasar-alpha). The development was structured into milestones, each implemented step-by-step by the AI. After completing each milestone, the human operator, [Marc Ketel](https://github.com/atoomnetmarc/), reviewed the implementation and discussed the AI's experiences and challenges. These insights were then incorporated back into the milestone, creating an iterative feedback loop that refined the development process. Throughout development, approximately 15 full retries were necessary. Each retry involved discarding the entire implementation while preserving the documentation, then starting anew with improved insights. This iterative approach led to progressively better implementations with each cycle.
```mermaid
flowchart LR
A[Start] --> B[Implement Milestone]
B --> C[Human Review]
C --> D[AI Reflection]
D --> E[Improve Documentation]
E --> F{Retry Needed?}
F -- Yes --> B
F -- No --> G[Complete]
```
---
## Features
- Visualizes **over 25 sorting algorithms**, including Bubble Sort, Insertion Sort, Quicksort, Merge Sort, TimSort, Bitonic Sort, and more
- All algorithms implemented as **async generators** yielding visualization steps
- Each algorithm exports **metadata** (`name`, `description`, `isSlow`, etc.) used for UI and testing
- Adjustable speed slider
- Responsive, optimized layout with fixed rainbow gradient colors
- Dark theme
- Sorting indicators and highlighting
- Start/Pause and Step controls
- **Change algorithm during sorting** (mid-sort switching)
- Automatic cycling with countdown timer
- Camera controls (rotate, zoom, pan)
- **Finite State Machine (FSM)** manages sorting states (planned or implemented)
---
## Quick Start
Because ES module imports require a server context, **do not** open `index.html` directly. Instead, serve the project with a local web server.
### Using Node.js
```bash
npx serve
```
Open [http://localhost:3000](http://localhost:3000) in your browser.
### Using Python
```bash
python3 -m http.server
```
Open [http://localhost:8000](http://localhost:8000).
---
## Documentation
- [Setup Instructions](docs/Setup.md)
- [Implementation Guide](docs/Implementation.md)
- [Architecture Overview](docs/Architecture.md)
- [Sorting Algorithms](docs/Algorithms.md)
- [Troubleshooting & FAQ](docs/Troubleshooting.md)
- [Contributing Guidelines](docs/Contributing.md)
---
## Testing
This project uses [Jest](https://jestjs.io/) for unit testing of sorting algorithms.
### Install dependencies
If you haven't already, install all dependencies (including Jest):
```bash
npm install
```
### Run tests
To execute all unit tests:
```bash
npx jest
```
Or, if you have configured an npm script named `test`:
```bash
npm test
```
### Generate coverage report
To generate a code coverage report:
```bash
npx jest --coverage
```
The coverage report will be saved in the `coverage/` directory.
---
## License
This project is open source and free to use, see [LICENSE](LICENSE).