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 models Quasar Alpha (which was an early test version of OpenAI GPT-4.1) and OpenAI GPT-4.1. The development was structured into milestones, each implemented step-by-step by the AI. After completing each milestone, the human operator, Marc Ketel, 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.

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]

Loading

---

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

npx serve

Open http://localhost:3000 in your browser.

Using Python

python3 -m http.server

Open http://localhost:8000.

---

Documentation

• Setup Instructions
• Implementation Guide
• Architecture Overview
• Sorting Algorithms
• Troubleshooting & FAQ
• Contributing Guidelines

---

Testing

This project uses Jest for unit testing of sorting algorithms.

Install dependencies

If you haven't already, install all dependencies (including Jest):

npm install

Run tests

To execute all unit tests:

npx jest

Or, if you have configured an npm script named test:

npm test

Generate coverage report

To generate a code coverage report:

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.