{"id":27264258,"url":"https://github.com/atoomnetmarc/3d-sorting-algorithm-visualizer","last_synced_at":"2026-04-29T19:31:47.656Z","repository":{"id":287242656,"uuid":"963494483","full_name":"atoomnetmarc/3D-Sorting-Algorithm-Visualizer","owner":"atoomnetmarc","description":"Interactive 3D visualizer for sorting algorithms built with Three.js.","archived":false,"fork":false,"pushed_at":"2025-04-10T18:49:35.000Z","size":82,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-10T18:50:36.989Z","etag":null,"topics":["javascript","sorting-algorithms","sorting-visualization","threejs","vibe-coding"],"latest_commit_sha":null,"homepage":"https://atoomnetmarc.github.io/3D-Sorting-Algorithm-Visualizer/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/atoomnetmarc.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"docs/Contributing.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-04-09T19:09:10.000Z","updated_at":"2025-04-10T18:49:39.000Z","dependencies_parsed_at":"2025-04-10T18:50:40.502Z","dependency_job_id":"9ce0ab5d-bcde-48c0-b286-3dd0ca2b1e34","html_url":"https://github.com/atoomnetmarc/3D-Sorting-Algorithm-Visualizer","commit_stats":null,"previous_names":["atoomnetmarc/3d-sorting-algorithm-visualizer"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atoomnetmarc%2F3D-Sorting-Algorithm-Visualizer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atoomnetmarc%2F3D-Sorting-Algorithm-Visualizer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atoomnetmarc%2F3D-Sorting-Algorithm-Visualizer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atoomnetmarc%2F3D-Sorting-Algorithm-Visualizer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/atoomnetmarc","download_url":"https://codeload.github.com/atoomnetmarc/3D-Sorting-Algorithm-Visualizer/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248358548,"owners_count":21090401,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","sorting-algorithms","sorting-visualization","threejs","vibe-coding"],"created_at":"2025-04-11T06:53:01.940Z","updated_at":"2026-04-29T19:31:47.647Z","avatar_url":"https://github.com/atoomnetmarc.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 3D Sorting Algorithm Visualizer\n\nAn 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.\n\n---\n\n## Implementation Process\n\nThis project was developed collaboratively with the AI models [Quasar Alpha](https://openrouter.ai/openrouter/quasar-alpha) (which was an early test version of OpenAI GPT-4.1) and [OpenAI GPT-4.1](https://openrouter.ai/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](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.\n\n```mermaid\nflowchart LR\n    A[Start] --\u003e B[Implement Milestone]\n    B --\u003e C[Human Review]\n    C --\u003e D[AI Reflection]\n    D --\u003e E[Improve Documentation]\n    E --\u003e F{Retry Needed?}\n    F -- Yes --\u003e B\n    F -- No --\u003e G[Complete]\n```\n\n---\n\n## Features\n\n- Visualizes **over 25 sorting algorithms**, including Bubble Sort, Insertion Sort, Quicksort, Merge Sort, TimSort, Bitonic Sort, and more\n- All algorithms implemented as **async generators** yielding visualization steps\n- Each algorithm exports **metadata** (`name`, `description`, `isSlow`, etc.) used for UI and testing\n- Adjustable speed slider\n- Responsive, optimized layout with fixed rainbow gradient colors\n- Dark theme\n- Sorting indicators and highlighting\n- Start/Pause and Step controls\n- **Change algorithm during sorting** (mid-sort switching)\n- Automatic cycling with countdown timer\n- Camera controls (rotate, zoom, pan)\n- **Finite State Machine (FSM)** manages sorting states (planned or implemented)\n\n---\n\n## Quick Start\n\nBecause ES module imports require a server context, **do not** open `index.html` directly. Instead, serve the project with a local web server.\n\n### Using Node.js\n\n```bash\nnpx serve\n```\n\nOpen [http://localhost:3000](http://localhost:3000) in your browser.\n\n### Using Python\n\n```bash\npython3 -m http.server\n```\n\nOpen [http://localhost:8000](http://localhost:8000).\n\n---\n\n## Documentation\n\n- [Setup Instructions](docs/Setup.md)\n- [Implementation Guide](docs/Implementation.md)\n- [Architecture Overview](docs/Architecture.md)\n- [Sorting Algorithms](docs/Algorithms.md)\n- [Troubleshooting \u0026 FAQ](docs/Troubleshooting.md)\n- [Contributing Guidelines](docs/Contributing.md)\n\n---\n\n## Testing\n\nThis project uses [Jest](https://jestjs.io/) for unit testing of sorting algorithms.\n\n### Install dependencies\n\nIf you haven't already, install all dependencies (including Jest):\n\n```bash\nnpm install\n```\n\n### Run tests\n\nTo execute all unit tests:\n\n```bash\nnpx jest\n```\n\nOr, if you have configured an npm script named `test`:\n\n```bash\nnpm test\n```\n\n### Generate coverage report\n\nTo generate a code coverage report:\n\n```bash\nnpx jest --coverage\n```\n\nThe coverage report will be saved in the `coverage/` directory.\n\n---\n\n## License\n\nThis project is open source and free to use, see [LICENSE](LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatoomnetmarc%2F3d-sorting-algorithm-visualizer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fatoomnetmarc%2F3d-sorting-algorithm-visualizer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatoomnetmarc%2F3d-sorting-algorithm-visualizer/lists"}