Объясняем код с помощью ASCII-арта

Примечание от переводчика: типично пятничная статья во вторник утром… почему бы и нет?



Большинство людей — визуалы. Они используют изображения, чтобы вникнуть в суть проблемы. А вот мэйнстримные языки программирования, напротив, основаны на текстовом представлении. Возникающую пропасть между текстом и графикой заполняют ASCII-изображения, нарисованные с помощью текстовых символов и вставленные в исходный код программы. Я их обожаю! Как-то раз я кинул клич в Twitter и мне прислали гораздо больше примеров, чем я ожидал. Спасибо всем участвовавшим. В этой теме попалось несколько прекрасных примеров, которые я собрал и разложил на категории. Для каждого изображения дается ссылка на соответствующий репозиторий.

Структуры данных

Одно из самых распространенных применений ASCII-арта в коде — наглядно показать структуру данных.

Первый пример из исходного кода LLVM:


Исходник

Расположение полей в структуре данных в Jikes RVM:


Исходник

Поворот дерева в Musl:


Исходник

Двусторонняя очередь в Rust:


Исходник

Внутренности компилятора Swift:


Исходник

Расположение элементов в заголовке Malloc:


Исходник

Конечные автоматы

Профилирование Javascript:


Исходник

RPC в Cloud Spanner:


Исходник

Состояния потока ввода-вывода:


Исходник

Логика предметной области

Поток управления в декомпилируемой программе NWScript:


Исходник

Внутренности ECC:


Исходник

Форматирование чисел:


Исходник

Квантовый контур:


Исходник

Балансировка задач управления памятью в ядре операционной системы:


Исходник

Совместимость типов (это особенно впечатляющий случай, потому что здесь ASCII-арт является кодом!)


Исходник

Формат файла DBF:


Исходник

Lookup-таблица для обработки изображений:


Исходник

Форма цветовой функции:


Исходник

Структура URL:


Исходник

«Краткая» справка по отмене операций в emacs:


Исходник
Примечание переводчика: по ссылке еще очень много подобных графиков

Геометрия

Контроль высоты в бортовом компьютере Apollo (!!!):


Исходник

Разбитие изображения на сегменты:


Исходник

Траектории бумеранга в Nethack:


Исходник

Отрисовка границ элемента в CSS:


Исходник

Дерево квадрантов:


Исходник

Управление скоростью работы станка:


Исходник

Скроллинг веб-страниц:


Исходник

Надеюсь, вам понравилось!

Дополнительный пример от переводчика:

График интерполяции значения:


Исходник