Для большинства разработчиков Bubble Sort – один из первых алгоритмов, которые мы изучаем. Поэтому визуализация это может быть очень удовлетворительной и немного похоже на встречу с старым другом через долгое время.
Эта статья проведет вас через визуализацию алгоритма сортировки пузырьков с использованием HTML5 Canvas API Анкет
Если вы хотите прыгнуть прямо к результатам и взглянуть на код, Вот кодепен Анкет
В то же время, ниже приведен небольшой взгляд на то, что мы собираемся сделать здесь.
Если вы хотите следовать, запустите следующую команду, чтобы получить начальный код шаблона, сгенерированный в ваш рабочий каталог.
npx scaffolder-cli i --from-github https://github.com/galElmalah/scaffolder-canvas-template.git --template canvas && cd visualizing-bubble-sort
Это будет использовать Скафолдер Чтобы создать начальную настройку.
Или создать базовый index.html Файл и script.js Анкет
Теперь давайте прыгнем прямо вперед и начнем кодирование
Весь код JavaScript написан в script.js Анкет
Первое, что нам понадобится, это несортированный массив для сортировки. Давайте напишем вспомогательную функцию для создания перетасованных массивов.
Прохладно. Теперь мы напишем простую реализацию алгоритма сортировки пузырьков.
Далее мы получим наш холст и создадим контекст.
Таким образом, мы получили все основы, и теперь мы должны решить, как визуализировать массив. Наиболее простым способом является просто нарисовать прямоугольник, соответствующий каждому элементу массива, и установить высоту в соответствии с этим значением элемента (чем выше значение, тем выше будет прямоугольник).
Вот представление нашего пользовательского прямоугольника.
Давайте проверим, что все работает, как и ожидалось, нарисовав нашу перетасованную массив.
Умножьте каждый парашют высоты на 5, чтобы получить хороший масштаб, чтобы каждый пиксель будет равным 5 пикселям.
Мы можем сделать высоту и ширину динамики прямоугольника, заставив ее охватывать всю высоту и ширину экрана. Попробуйте сделать это самостоятельно. Здесь является рабочим примером для ленивых (обратите внимание на calcmembersheightscale и CALCMEMBERSWIDTH функции).
Если все идет хорошо, вы должны увидеть что -то похожее на следующее в вашем браузере.
Теперь давайте вернемся к нашей функции сортировки. Каковы действия и государства, о которых мы заботимся? Сравните, обменивайте и сортируйте. Давайте добавим пользовательский словарь действий.
Измените нашу функцию сортировки пузырьков, чтобы принять на рамках обратный вызов и позвоните в него, когда в нашем сортировке пузырьков будет представлено действие с соответствующим действием.
Мы почти закончили так, держись там!
Что мы должны делать в каждом действии? Дайте участникам другой цвет, основанный на действии, и «переместите» их, если это необходимо – что просто обменяется их ценностями. Теперь давайте создадим карту действий, согласно нашим известным действиям.
Кажется, у нас есть все детали, необходимые для того, чтобы визуализировать эту изящную маленькую вещь! Давайте попробуем.
Будь я проклят! Кажется, что мы получили только полностью отсортированное состояние. Как мы можем решить это? Нам как -то нужно время на время нашей картины. Давайте добавим две переменные, скорость который определит, сколько времени пройдет между каждым шагом и клещи Подсчитать каждый звонок на наш на рамках перезвонить.
Пара вещей, которые вы должны заметить в приведенном выше примере:
- Очистка холста на каждой итерации.
- Сбросить цветовое свойство для всех наших прямоугольников на каждой итерации.
Теперь собирая все это вместе, мы должны получить что -то подобное.
И вот и это, мы только что визуализировали этот классный алгоритм за 5 минут!
Надеюсь, вам понравился этот маленький пост в блоге!
Если вам понравилась эта визуализация, проверьте еще немного Сортировка алгоритмов визуализации Я создал.
Проверьте некоторые другие мои сообщения в блоге на dev.to
Что такое скаффолдер и как вы можете использовать его, чтобы увеличить свою команду Dev Selocity
Гал Эльмала ・ 11 июня ・ 5 минут читайте
9 отличных советов, чтобы использовать методы массива JavaScript, такие как профессионал!
Гал Эльмала ・ 7 октября 6 мин ЧИТАЙТЕ
Оригинал: “https://dev.to/galelmalah/visualizing-bubble-sort-in-5-minutes-using-html5-canvas-api-4d1b”