Визуализация алгоритмов:
от сортировок к графам

Что будет в эти два часа

Пайплайн создания одностраничников

Одностраничное web-приложение — это визуализатор сложной темы в одном HTML-файле. Его не нужно «уметь программировать»: код генерирует нейросеть, а учитель управляет процессом. Вот конвейер, который мы будем использовать всю лекцию.

Чек-лист выбора темы

Прежде чем просить ИИ собрать визуализатор, честно ответьте на пять вопросов:

1. Я понимаю тему (хотя бы частично — достаточно, чтобы проверить результат).
2. Я знаю, какие трудности она вызывает у моих учеников.
3. Я не нашёл хорошего готового решения.
4. Я абсолютно точно знаю, что хочу получить.
5. Я попробую сделать это с помощью конкретного ИИ.

Деплой одностраничников на GitHub и GitVerse

Файл на вашем компьютере видите только вы. Деплой превращает его в ссылку, которую можно отправить ученикам, показать на проекторе или зашить в QR-код. Разберём два бесплатных способа: международный GitHub Pages и российский GitVerse Pages.

0. Что нужно понять перед началом

• Статический хостинг — это раздача готовых файлов «как есть». HTML, CSS и JavaScript работают; серверный код (PHP, Python и т.п.) — нет. Наш одностраничник — идеальный кандидат.
• index.html — точка входа. Именно этот файл откроется, когда кто-то перейдёт по ссылке. Назовите главный файл именно так.
• Относительные пути — если у вас несколько файлов, ссылайтесь через ./file.html, а не C:\Users\... и не /file.html.
• Публичность — бесплатный Pages доступен для публичных репозиториев. Не выкладывайте ничего личного: страницу увидит весь интернет.

1. Словарь на пять минут

2. GitHub Pages — пошагово

# один раз: клонировать репозиторий на компьютер
git clone https://github.com/<ник>/float-viz.git
cd float-viz

# каждый раз после правок файла:
git add index.html
git commit -m "обновил визуализатор"
git push

3. GitVerse Pages — пошагово

GitVerse — российский хостинг кода (разработка Сбера). Интерфейс похож на GitHub, регистрация возможна через Сбер ID — для многих учителей это проще.

4. GitHub vs GitVerse — что выбрать

5. Частые ошибки (и как их чинить)

• 404 Not Found — чаще всего нет index.html в корне или Pages ещё не собрался: подождите 5 минут, обновите с Ctrl+F5.
• Открылась пустая страница / нет стилей — пути прописаны абсолютно (/style.css или C:\...). Замените на относительные.
• Изменения не видны — это кэш браузера. Ctrl+F5 или режим инкогнито.
• Ссылка «не открывается» у учеников — репозиторий приватный. Для бесплатного Pages он должен быть публичным.

Как визуализировать алгоритм

Хорошая новость: все визуализаторы устроены одинаково. Если вы поняли сортировку — вы поняли и граф. Разберём анатомию, а затем посмотрим на два живых примера.

1. Анатомия визуализатора

2. Ключевой паттерн: «алгоритм как генератор шагов»

Алгоритм не рисует сам себя. Он порождает шаги-инструкции («сравнил», «обменял», «вызвал»), а движок проигрывает их с любой скоростью — вперёд, по одному, с паузой. Именно поэтому один и тот же каркас работает для любой темы. Ученикам же мы показываем привычный код на Python — и подсвечиваем строку, которая выполняется прямо сейчас:

def bubble_sort(a):
    n = len(a)
    for i in range(n):
        for j in range(n - i - 1):
            if a[j] > a[j + 1]:          # ← шаг «compare»
                a[j], a[j + 1] = a[j + 1], a[j]  # ← шаг «swap»

Каждый шаг визуализатора привязан к строке Python-кода: анимация слева, выполняемая строка справа. Когда просите ИИ собрать визуализатор, просите именно это: «алгоритм должен возвращать массив шагов, а не анимировать себя напрямую».

3. Демо: сортировки — пузырьковая и шейкерная

Два алгоритма на одном массиве — можно ввести свой. На что смотреть с учениками: подсветка строки Python-кода синхронно с анимацией, число сравнений и обменов, чем шейкерная экономит проходы (застрявший минимум — «черепаха» — уезжает на место за один обратный проход).

Открыть в отдельной вкладке: sorting_visualizer.html

4. Демо: дерево рекурсии — задача 16 ЕГЭ

Рекурсивная функция раскрывается в дерево вызовов прямо на глазах: жёлтые узлы — в стеке вызовов, фиолетовые — посчитаны, красная обводка — повторный вызов. На Фибоначчи ученики сами видят, почему без мемоизации F(30) считается вечность, и откуда берётся ответ для бланка.

Открыть в отдельной вкладке: recursion_tree_visualizer.html

5. Демо: черепашья графика — задача 6 ЕГЭ

Черепаха выполняет программу в нотации ЕГЭ (Вперёд, Направо, Повтори […]) прямо на координатной сетке, рядом — тот же код на Python (turtle) с подсветкой строки. В финале визуализатор сам подсчитывает точки с целыми координатами внутри фигуры — ровно то, что спрашивают в задаче 6. Программу можно ввести свою.

Открыть в отдельной вкладке: turtle_visualizer.html

6. Плохой vs хороший: сравниваем лоб в лоб

Первый результат от ИИ почти всегда выглядит как антипримеры ниже: print-лог вместо картинки и мгновенный прогон без управления. Покажите ученикам обе пары — разница говорит сама за себя.

Антипаттерны, которые выдают «плохой» визуализатор

• Стена текста — print-лог вместо картинки; структура алгоритма не видна.
• Мгновенный прогон — всё посчиталось до того, как ученик моргнул; не за чем наблюдать.
• Нет управления — нельзя поставить паузу, вернуться на шаг, замедлить темп.
• Цвет без легенды и счётчиков — что-то мигает, но непонятно, что это значит.
• Нет связи с кодом — анимация живёт отдельно от программы, которую ученик сдаёт на ЕГЭ.

7. Как собрать свой визуализатор по шаблону

8. Правила хорошего промпта — как заставить ИИ делать хорошо

Разница между антипримером и рабочим визуализатором — почти всегда разница между «сделай мне визуализацию» и точным заданием. Шесть правил:

1. Дайте образец, а не описание. Приложите готовый файл (visualizer_template.html или прошлый визуализатор) и попросите сохранить стиль и структуру. Один файл-образец заменяет страницу описаний.
2. Зафиксируйте контракт. Назовите функции и формат шагов: buildSteps() возвращает массив, applyStep() рисует один шаг. Тогда результат управляемый, а не «простыня, которая что-то делает».
3. Запретите анимировать напрямую. Фраза «алгоритм не должен анимировать себя сам, только возвращать шаги» отсекает 90% плохих решений.
4. Попросите код на Python с подсветкой строки. Ученики сдают ЕГЭ на Python — пусть визуализатор показывает именно тот код, который они пишут в бланке.
5. Ограничьте масштаб. Один файл, без внешних библиотек, без сборщиков — иначе одностраничник не откроется с флешки и не задеплоится за 5 минут.
6. Правьте итерациями, а не заново. «Оставь всё, но сделай шаг по кнопке вдвое медленнее» работает лучше, чем новый промпт с нуля.

Приложен файл visualizer_template.html — это шаблон интерактивного
визуализатора алгоритмов (белый фон, фиолетовый акцент #8736f5,
тонкая типографика). Сохрани стиль и структуру файла.

Сделай из него визуализатор темы «[ваша тема: напр. бинарный поиск]»:
1. Замени панель ввода на входные данные моей темы.
2. Алгоритм оформи как функцию buildSteps(), возвращающую массив
   шагов-инструкций (compare / swap / visit / done — или свои типы).
   Алгоритм НЕ должен анимировать себя сам — только шаги.
3. applyStep(i, step) отрисовывает один шаг на сцене.
4. resetData() рисует исходное состояние.
5. Рядом со сценой покажи код алгоритма на Python (как в школьной
   программе) и подсвечивай строку, которая выполняется на этом шаге.
6. Добавь счётчики: сравнения, обмены / вызовы, текущий шаг.
7. Управление (Старт/Пауза/Шаг/Сброс/Скорость) не трогай —
   оно уже работает через VizCore.
Верни один готовый HTML-файл без внешних зависимостей.

Соберите и опубликуйте свой одностраничник

1. Выберите тему по чек-листу из начала лекции (свой предмет — не обязательно информатика: физика, математика, география подходят так же).
2. Соберите визуализатор: промпт → код → .html → браузер → 2–3 итерации правок. Можно стартовать от visualizer_template.html.
3. Переименуйте главный файл в index.html, проверьте относительные пути.
4. Задеплойте на GitHub Pages и на GitVerse Pages — двумя способами, как в первой части.
5. Сделайте QR-код на ссылку (любой генератор QR) — и повесьте в классе.

Файлы и ссылки

• index.html — эта лекция-одностраничник (можно задеплоить целиком)
• visualizer_template.html — шаблон визуализатора в стиле «Под капотом float», с комментариями
• sorting_visualizer.html — демо: пузырьковая и шейкерная сортировки, свой массив, код на Python
• recursion_tree_visualizer.html — демо: дерево рекурсии, Фибоначчи и факториал (задача 16 ЕГЭ)
• turtle_visualizer.html — демо: черепашья графика, задача 6 ЕГЭ, точки внутри фигуры
• bad_sorting_visualizer.html — антипример: сортировка как стена лога
• bad_recursion_visualizer.html — антипример: рекурсия как каша отступов

Лекция уже задеплоена по этой же схеме:
neonco.github.io/algo-viz-lecture
QR ведёт на эту страницу — покажите на первом слайде, и слушатели откроют материалы с телефона.

Полезные ссылки: github.com · gitverse.ru · документация GitHub Pages · документация GitVerse Pages