ASCII-арт: создание текстовых изображений

Введение

ASCII-арт — это техника создания изображений из символов таблицы ASCII. Задолго до появления эмодзи, векторной графики и 4K-мониторов люди рисовали котиков, домики и логотипы прямо в текстовых файлах, используя только буквы, цифры и знаки препинания. Сегодня ASCII-арт переживает ренессанс: его вставляют в README-файлы, баннеры консольных утилит, комментарии в коде и подписи на форумах. В этой статье разберём историю жанра, способы создания ASCII-изображений — вручную и автоматически, — а также форматы и инструменты. Попробуйте сгенерировать надпись через нашконвертер текста в ASCII-арт, а для фотографий используйтеконвертер изображений в ASCII.

Краткая история ASCII-арта

Первые текстовые рисунки появились ещё в 1960-х, когда компьютерные дисплеи могли выводить только символы. В 1966 году Кен Никерсон опубликовал одно из первых известных изображений женщины, набранное печатной машинкой и кодированное перфокартой. Настоящий бум начался в 1980-х с развитием BBS — электронных досок объявлений, где пользователи обменивались «ANSI-артом» с цветными картинками. Каждая картинка представляла собой обычный текстовый файл, который открывался в терминале.

С появлением интернета и веб-страниц ASCII-арт не исчез: он перекочевал в подписи на форумах, баннеры open-source-проектов и Easter eggs в консольных утилитах. Сегодня его можно встретить вapt-get при установке некоторых пакетов, в ASCII-логотипах дистрибутивов Linux и в шапках README на GitHub.

ASCII vs ANSI vs Unicode

Строго говоря, ASCII содержит лишь 128 символов — латинские буквы, цифры и знаки. ANSI расширяет его цветом и псевдографикой из code page 437: рамки, уголки, блоки. Unicode даёт ещё больше возможностей — от тонких линий до эмодзи. Однако классический ASCII-арт остаётся в рамках 7-битной таблицы и читается в любом терминале без шрифтовых настроек.

Принцип восприятия символов

ASCII-арт работает за счёт разной «плотности» символов. Знак пробела даёт белый фон, точка или апостроф — едва заметную тень, а @ или # — почти чёрное пятно. Расположив символы в нужной плотности, художник передаёт градиенты яркости. Вот типичная шкала плотности от светлого к тёмному:

 .,:;irsXA253hMHGS#9B&@

При быстром просмотре глаз «склеивает» символы в единое изображение. Чем больше таких градаций использует художник, тем точнее рисунок передаёт полутона. Для крупных форматов применяют двухсимвольные блоки или цветные ANSI-последовательности.

Ручное создание ASCII-арта

Создание ASCII-изображения вручную похоже на рисование по сетке. Существует два основных подхода — линейный и заливочный.

Линейный стиль

Линии рисуются символами псевдографики: |-/\_ для прямых и наклонных, +v^>< для углов. Этот стиль подходит для логотипов, баннеров и схем. Простой пример — домик:

      /\
     /  \
    /____\
   |      |
   |  __  |
   | |  | |
   | |__| |
   |______|

Заливочный стиль

В заливочном стиле «каждый пиксель» представлен символом из шкалы плотности. Так рисуют портреты и фотографии. Чтобы не считать каждую клетку вручную, художники используют редакторы с сеткой, например JP2 или ASCIIFlow, и работают мышкой по canvas. Пример простой надписи:

  ___  _  _  _   _
 | _ \| || || \ | |
 |  _/| __ ||  \| |
 |_|  |_||_||_|\_|

Шрифты для крупных баннеров берут из готовых библиотек: FIGlet, TOIlet, The Ultimate ASCII Font. Они содержат десятки стилей — от классического standard до «трёхмерного»cosmic и старославянского cybermedium.

Автоматическая генерация из текста

FIGlet — это утилита 1991 года, которая преобразует строку в ASCII-надпись. Её алгоритм прост: для каждого символа входной строки в шрифтовом файле найден шаблон 5–10 строк высотой, строки склеиваются по горизонтали.

$ figlet Hello

 _   _      _ _
| | | | ___| | | ___
| |_| |/ _ \ | |/ _ \
|  _  |  __/ | | (_) |
|_| |_|\___|_|_|\___/

В браузере то же самое делает нашгенератор ASCII из текста: вводите строку, выбираете шрифт и копируете результат в README, комментарий или подпись. Полезно для оформления названия проекта в терминальной утилите или пин-сообщения в Telegram-канале.

Куда вставлять ASCII-баннеры

Шапка README.md на GitHub — название проекта сразу бросается в глаза;
Стартовое сообщение CLI-утилиты — пользователь видит логотип при запуске;
Комментарий-«водяной знак» в исходниках — подпись команды или автора;
Подпись в письмах и новостных рассылках — узнаваемый бренд без картинок;
Easter egg в JS-консоли сайта — приветствие для любопытных разработчиков.

Конвертация изображений в ASCII

Второй популярный сценарий — превращение фотографии в ASCII-арт. Алгоритм работает так:

Изображение переводится в оттенки серого;
Масштабируется до заданной ширины в символах (обычно 80–200);
Для каждого пикселя вычисляется яркость от 0 до 255;
Яркость отображается на символ из шкалы плотности;
Символы выводятся построчно в текстовый файл или на экран.

Простейшая реализация на JavaScript выглядит так:

const CHARS = ' .:-=+*#%@';
const W = 120, H = 60;

function toAscii(imageData) {
  const { data, width, height } = imageData;
  const out = [];
  for (let y = 0; y < H; y++) {
    let line = '';
    for (let x = 0; x < W; x++) {
      const sx = Math.floor(x * width / W);
      const sy = Math.floor(y * height / H);
      const i = (sy * width + sx) * 4;
      const lum = (data[i] + data[i + 1] + data[i + 2]) / 3;
      line += CHARS[Math.floor(lum / 256 * CHARS.length)];
    }
    out.push(line);
  }
  return out.join('\n');
}

Готовый инструмент без программирования — нашконвертер картинок в ASCII. Загрузите PNG или JPEG, выберите ширину и палитру — получите ASCII-версию, которую можно скачать текстовым файлом.

Параметры, влияющие на результат

Ширина — чем больше символов, тем выше детализация, но шире макет;
Шкала символов — короткая « .:#» даёт контраст, длинная — мягкие переходы;
Гамма-коррекция — поднимает тени и опускает света, выравнивая восприятие;
Инверсия — для тёмного фона (терминал) символы лучше инвертировать.

Цветной ANSI-арт и блок-графика

Если терминал поддерживает цвета, ASCII-арт можно раскрасить управляющими последовательностями. Команда \\x1b[31mвключает красный, \\x1b[32m — зелёный,\\x1b[0m — сброс. Для блочной графики в Unicode используются символы ▀▄█▒░, которые занимают половину клетки и позволяют рисовать в два раза плотнее на той же высоте. Это удобно для построения графиков и спарклайнов прямо в терминале.

\x1b[31m  ___  \x1b[32m  ___  \x1b[0m
\x1b[31m |   | \x1b[32m |   | \x1b[0m
\x1b[31m |___| \x1b[32m |___| \x1b[0m

Где использовать ASCII-арт сегодня

Хотя у нас есть векторная графика и эмодзи, ASCII сохраняет несколько уникальных преимуществ. Во-первых, он работает везде — в терминале, в письме, в комментариях на GitHub. Во-вторых, это просто текст: он индексируется поисковиками, переносится копированием, весит килобайты. В-третьих, ASCII-арт узнаваем и стилистически самобытен — он придаёт проекту «хакерский» шарм.

Типичные кейсы: баннер CLI-утилиты при запуске (npm,yarn, vue-cli); логотип в README; «пасхалка» в консоли сайта; подпись в email без картинок; визуализация данных в терминале; ачивки и Easter eggs в конфигурационных файлах. Используйте ASCII там, где важна универсальность и минимальный вес, а не фотореалистичность.

Шрифты FIGlet: краткий обзор

Библиотека FIGlet содержит более 300 шрифтов, и каждый даёт свой характер надписи. Несколько популярных категорий:

standard — классический шрифт по умолчанию, разборчивый и компактный;
big — крупный, для шапок README;
slant — наклонный, придаёт динамику;
banner — широкий, для приветствий в терминале;
cybermedium — узкий «киберпанк», экономит место;
roman — с засечками, имитация классической типографики;
doom — массивный, в стиле игр 90-х;
cosmic — округлый, дружелюбный.

При выборе шрифта учитывайте контекст. Для серьёзных утилит подойдёт standard или roman, для игр и неформальных проектов — doom илиcosmic. Шрифт big хорош в шапках README, но в терминале занимает много места по вертикали.

Кириллица в ASCII-арте

Классические FIGlet-шрифты не поддерживают кириллицу — они создавались в эпоху 7-битной ASCII. Для русских надписей есть два пути: использовать транслитерацию (Privetвместо Привет) или поискать расширенные шрифты с поддержкой Unicode. Полноценно кириллические FIGlet-шрифты редки и работают не во всех рендерерах. На практике чаще выбирают латиницу — особенно для логотипов и баннеров, где транслит выглядит органично.

Заключение

ASCII-арт — это искусство и инженерия одновременно. Зная шкалу плотности символов и принципы линейного или заливочного стиля, можно создавать изображения, которые работают в любом терминале и в любом текстовом файле. Для быстрой генерации надписей подходит конвертер текста в ASCII-арт, для превращения фотографий в графику из символов —конвертер картинок в ASCII. Начните с малого: добавьте ASCII-баннер в свой следующий README или украсьте запуск утилиты логотипом — это добавит проекту характера и сделает его запоминающимся.