Sorting Visualizer
Шесть сортировок, анимированных рядом с кодом на Go, который их выполняет
Пузырёк, выбор, вставки, слияние, быстрая и пирамидальная сортировки — каждая анимируется рядом со своим кодом на Go, где подсвечена строка, породившая текущий шаг. Есть общий стенд: один массив, все шесть алгоритмов в такт и таблица сравнений и перемещений.
Что делает
Большинство визуализаторов сортировки показывают, как прыгают столбики. Здесь столбики пришиты к программе, которую можно прочитать: каждое сравнение, обмен и запись на экране — это шаг, который алгоритм действительно сделал, вместе с номером строки, его породившей. Панель кода не иллюстрирует анимацию, а является её источником. Есть play, пауза, шаг вперёд и назад, скорости 0.5x/1x/4x и перетасовка массива.
Как устроено
Четыре слоя, каждый работает и тестируется без верхнего. Внизу go/sorts.go — те же шесть алгоритмов на Go, источник правды для панели кода и для номеров строк. Над ним чистые генераторы на JavaScript: алгоритм не сортирует массив на месте, а выдаёт плоский список шагов. Дальше плеер, который идёт по этому списку и владеет таймлайном и подписями, и рендерер, рисующий одно состояние массива на canvas. Ничто выше генераторов не знает, какой именно алгоритм показывает, — поэтому стенд сравнения умеет проигрывать шесть списков шагов бок о бок и называть точное число шагов ещё до старта забега.
Почему ему можно верить
89 тестов на node --test плюс go test написаны против конкретных способов, которыми такая визуализация могла бы соврать: шаг, назвавший не ту пару, номер строки, съехавший на единицу, сниппет, разошедшийся с настоящим Go-файлом, столбец, оставшийся подсвеченным с прошлого шага. Подписи тоже честные: сравнение называет два прочитанных значения, а не два слота, которых оно коснулось.
Как запустить
Живая демка лежит на GitHub Pages, деплой идёт только после зелёных тестов. Локально страница использует ES-модули, поэтому её нужно отдать по HTTP — двойной клик по index.html не сработает, хватит python3 -m http.server. Ни сборки, ни зависимостей, ни пакетного менеджера. Собрано за два дня с Claude Code.
Редкая для учебных демок дисциплина: код на странице не нарисован для красоты, а взят из тестируемого Go-файла, и тест падает, если копия разошлась с оригиналом. Продолжение Big-O Visualizer, только про конкретные алгоритмы, а не про классы сложности.
<a href="https://vibecoded.ru/products/sorting-viz"> <img src="https://vibecoded.ru/badge.svg" alt="запущено на vibecoded.ru" width="200" height="44"> </a>
Похожие запуски
- ClaudeLimitsЛимиты Claude в меню-баре macOS — три числа вместо похода в настройки
- Волнорезmp3 в вертикальное видео с волной, обложкой и субтитрами — одной командой
- git-nannyУбирает кладбище локальных веток — включая вмёрженные сквошем