PyCity: метавселенная, где Python строит город⁠⁠

Задача

Обучение программированию упирается в отсутствие физической обратной связи. Ученик пишет код, получает Hello, World! или Traceback, и на этом цикл заканчивается. Код не имеет веса, не рушится, не строится. Через две недели мотивация падает.

PyCity — попытка сделать так, чтобы каждая корректная строка на Python 3.11 материализовалась в 3D-городе. Написал функцию — надстроил этаж. Исправил ошибку — потушил пожар. Решил задачу — получил новый модуль для квартала. Это не геймификация ради геймификации, а способ дать коду визуальную плотность и мгновенную обратную связь.

Архитектурно город разбит на сектора 5×5, в каждом — ученик. Код исполняется в браузере через WebAssembly (CPython 3.11), результат передаётся в Three.js и отображается как геометрия.

Что реализовано

300 уроков, разбитых на уровни. Программа покрывает:

• синтаксис, типы, условия, циклы, функции;

• ООП, comprehensions, работу с файлами, исключения;

• алгоритмы, Big-O, SQLite, паттерны проектирования;

• асинхронность, сокеты, хэширование, JWT;

• нейросети: от перцептрона до внимания QKV, LoRA и RAG;

• распределённые системы: Raft/Paxos, фильтр Блума, LRU-кэш, WebSocket.

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

Внутри урока открывается не просто редактор, а оконный менеджер: IDE с подсветкой, инспектор памяти, диспетчер процессов, имитация pip. Код исполняется локально в WASM, поэтому нет задержки на сервер. Есть ExecutionGuard, который прерывает бесконечные циклы, чтобы вкладка не зависала.

ИИ-ассистент объясняет ошибки компилятора человеческим языком: не «замените строку 4», а «ты забыл закрыть скобку в 4-й строке, поэтому интерпретатор ждёт продолжения».

Практические режимы

Код-дуэли 1 на 1. Два ученика получают одну задачу, ставят XP в эскроу. Кто первый отправляет корректное решение — забирает банк.

Охота на баги. Даётся реальный сломанный код: зависший светофор, утечка памяти из-за def add(item, q=[]), KeyError на сервере. Нужно найти и исправить.

SQL-майнфрейм. SQLite через WebAssembly, 4 связанные таблицы, 50 контрактов от SELECT до рекурсивных CTE и оконных функций.

Нейро-Колизей.
Режим, где ученик программирует ИИ боевого робота-меха. Пишет функцию make_decision(me, enemies, arena), которая на каждом такте возвращает действие. Дальше мех сражается сам — без ручного управления.

Инструменты преподавателя

У учителя есть 3D-стол с живыми статусами 25 учеников, электронный журнал, автоматическая посещаемость по «правилу 15 минут» и управление аномалиями. Последнее звучит необычно, но решает конкретную задачу: если ученик отвлёкся, учитель может наслать на его квартал кислотный дождь или поджечь здание. Пожар тушится решением текущей задачи. Это не наказание, а механизм возврата внимания.

3D-мегаполис

Город — не декорация, а основная система мотивации. Он разбит на сектора 5×5, каждый сектор занимает площадку 350×350 метров. Внутри сектора ученик строит свой квартал: этажность зданий, дороги, инфраструктура — всё это напрямую зависит от прогресса в уроках и потраченного XP.

Есть два режима взаимодействия:

• Walk Mode (FPS). Ученик переключается в вид от первого лица, ходит по улицам, заглядывает в окна небоскрёбов, гуляет по кварталам одноклассников. Это не просто прогулка: так видно, кто продвинулся дальше, а кто застрял на стартовой вышке.

• Режим проектора (кино-тур). Для школьного проектора или открытого урока. Камера взмывает в небо и запускает один из четырёх сценариев: тур по кадетам (7 секунд на квартал), бреющий полёт между небоскрёбами, круговую панораму всего мегаполиса или волнообразный дрейф над облаками.

Город живой: по дорогам ездят кибер-кары, останавливаются на светофорах, уступают друг другу дорогу. На высоте 65 метров курсирует монорельс на магнитной подушке. Это не статичная картинка — трафик и поезд работают постоянно.

Технически город собран на Three.js и React Three Fiber. Геометрия процедурная: здание не хранится как отдельная модель, а собирается из параметров (этажность, тип, материалы). Поэтому 25 кварталов по 350 метров не превращаются в гигабайты ассетов.

Кибер-Хаб

Экономический центр, где заработанный XP конвертируется в визуальное развитие квартала. Логика простая: опыт, полученный в дуэлях, рейдах и уроках, тратится на мегаструктуры.

Примеры объектов:

• Салют Системы (5 000 XP) — неоновый фейерверк над крышами.

• Неоновое Имя Архитектора (10 000 XP) — голограмма позывного в стратосфере.

• Зенитные Прожекторы (12 000 XP) — четыре луча по углам квартала.

• Золотые Магистрали (15 000 XP) — сияющий контур дорог вокруг сектора.

• Монумент Python (20 000 XP) — обелиск с золотым обвивающим питоном.

• Плазменный Купол (25 000 XP) — силовой купол над районом.

• Башня Тесла (35 000 XP) — генератор плазменных дуг.

• Зиккурат Данных (45 000 XP) — чёрная пирамида серверов.

• Орбитальный Космо-Лифт (90 000 XP) — 2.6-километровый луч с движущейся кабиной.

• Сфера Дайсона (250 000 XP) — рукотворная звезда в магнитных кольцах.

• Квантовая Сингулярность (500 000 XP) — вращающаяся чёрная дыра над сектором.

• Цитадель Гранд-Оверлорда (1 000 000 XP) — 200-метровый золотой шпиль.

Помимо мегаструктур есть апгрейды: спутниковый линк, оверклокинг виртуального процессора, золотые рамки аватара, эксклюзивные титулы для Зала Славы.

Смысл не в том, чтобы «купить красоту», а в том, чтобы дать XP материальный вес. Опыт не просто цифра в профиле — он меняет облик города, который видят все.

Алгоритмы и справочник Big-O

Визуализатор сортировок. Пошаговая демонстрация BubbleSort, InsertionSort, MergeSort и QuickSort. Сравниваемые элементы подсвечиваются красным, опорный элемент (pivot) — жёлтым, отсортированные позиции — зелёным. Ученик видит не результат, а процесс: как массив перестраивается на каждом шаге.

Интерактивное бинарное дерево поиска. Ученик вводит числа, наблюдает ветвление узлов, запускает поиск ключа за O(log N) с подсветкой пути. Отдельно можно вызвать балансировку по стандарту AVL и увидеть, как дерево перестраивается.

Справочник асимптотической сложности. Цветовая шкала от O(1) до O(2^N) с примерами из реальной разработки. Не абстрактные формулы, а конкретные операции: почему доступ к элементу списка — O(1), а поиск в неотсортированном массиве — O(N), и где в реальном коде это превращается в проблему.

Центр сертификации

Трёхуровневая система квалификации, привязанная к количеству пройденных уроков:

• Уровень I — Junior Python Developer (150 уроков). Синтаксис, функции, ООП, базовые базы данных, основы математики перцептрона.

• Уровень II — Middle Systems Architect (200 уроков). Алгоритмы на графах (BFS/DFS), асинхронные сокеты TCP/IP, упаковка байтов через struct, очереди, семафоры, паттерны GoF.

• Уровень III — Senior AI & AGI Engineer (300 уроков). Трансформеры, механизм внимания QKV, квантование весов INT8, микросервисные саги, консенсус Raft, ядро AGI.

После сдачи теста ученик получает именной диплом с криптографическим идентификатором и возможностью экспорта в PDF. Это не «сертификат за прохождение курса», а привязка к конкретному объёму материала.

Итог

PyCity — работающий проект, а не концепт. Он решает конкретную проблему: даёт коду визуальную обратную связь и удерживает внимание за счёт игровых механик. Технически это связка Next.js, Three.js, WASM и Socket.IO, которая выдерживает одновременную работу группы.

Ссылка: pycity.ru. Если вы преподаёте Python или работаете с браузерным 3D — проект открыт для обсуждения архитектурных решений =)