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

в 8:46, , рубрики: ASCII, code, визуализация данных, ненормальное программирование, Программирование

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

RPC в Cloud Spanner:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Структура URL:

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

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

Объясняем код с помощью ASCII-арта - 21
Исходник
Примечание переводчика: по ссылке еще очень много подобных графиков

Геометрия

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Автор: Андрей

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js