Как сделать ascii рисунок
Как самому сделать ASCII art картинки (учимся рисовать символами)
Обратите внимание, c 2008 года эта статья могла устареть. Все свежие обучающие материалы по фотографии вы найдёте на нашем новом сайте koldunov.com, а также YouTube-канале.
ASCII art — это форма представления изображения в виде символов ASCII. Этот приём стал достаточно популярным со второй половины 19 века (после изобретения печатных машинок). Одной из самых известных работ того времени считают бабочку Флоры Стэйси, опубликованную 15 октября 1898 года в журнале Pitman’s Phonetic Journal. Об этой женщине, к сожалению, ничего неизвестно, кроме того, что она, возможно, была секретаршей.
Обычно, для создания таких картинок используются, так называемые, моноширинные шрифты (иногда их называют непропорциональными). Из названия понятно, что ширина у всех символов одинаковая. Это удобно не только для разработчиков печатных машинок (каретка всегда сдвигается на одинаковое расстояние), но и для программистов (код лучше читается). Хотя, стоит отметить, что большие объёмы текста, написанные моноширинным шрифтом, читать трудно. Одними из самых популярных таких шрифтов являются Courier и Courier New.
Новую жизнь этот вид искусства обрёл с появлением персональных компьютеров. Теперь каждый из нас может легко и просто создать картинку в виде значков, букв и цифр. По крайней мере, теперь не нужно изводить кучу бумаги на неудачные попытки. Иногда всё это дело называют псевдографикой, потому-что раньше это был единственный способ создания картинок на компьютере 🙂
О том, как сделать собственный портрет из символов ASCII мы сейчас и поговорим.
Простейшие картинки символами в виде домиков, машинок, зайчиков и т. д. можно сделать самому.
……..XXXXXXXXXXXXXX
…….XXXXXXXXXXXXXXXX
……XXXXXXXXXXXXXX…XX
…..XXXXXXXXXXXXXX…..XX
….XXXXXXXXXXXXXX…….XX
……X…………………X……..X
……X…XX…..XX……X.XXX.X
……X…XX…..XX……X.XXX.X
……X…………………X.XXX.X
……XXXXXXXXXXXXXXXXX
Но для создания сложного портрета придётся повозиться. Поэтому, на помощь себе мы позовём небольшую, но очень удобную бесплатную программку
Ascii Generator dotNET (автор — Jonathan Mathews ), которую можно легко найти в сети. Сейчас, на примере версии 0.9.6 я покажу как с ней приятно работать:
2) в режиме реального времени можно менять яркость и контрастность либо на исходной картинке (в правом нижнем углу), либо на той, которая генерируется символами (передвигая бегунки на гистограмме в левом нижнем углу). Второе особенно порадовало – когда передвигаешь бегунок, получаешь эстетическое удовольствие от постоянно меняющихся символов на экране.
3) прямо в рабочем окне (левый верхний угол) можно задать количество символов как по ширине, так и по высоте, причём, если нажать на крестик между числами, то выключится/включится функция «сохранять пропорции».
4) Можно ещё прибавить ко всему вышесказанному возможность менять как размер, так и стиль шрифта. Причём, не обязательно моноширинный! Это даёт практически полный контроль над результатом.
Приятным дополнением к программе является возможность работы с цветными картинками. Реализована эта функция очень грамотно – фон всегда остаётся одноцветным (белым или чёрным по желанию), цвет меняется только у значков. Если вы захотите сохранить результат цветного изображения в текстовом виде, то можно выбрать два формата – rtf или html (для чёрно-белых картинок возможно сохранение в обычном txt).
Теперь вы можете скопировать текст и вставлять куда угодно (в чатах, на форумах в реферат или курсовую), распечатывать, вешать перед компьютером (вспомните, раньше висели такие в компьютерных классах :-)). А можно сохранить как картинку и поместить себе на аватарку. Выглядят текстовые рисунки достаточно креативно.
О том как делать аски-анимацию — в следующей теме.
Если Вам понравилась наша заметка, то приглашаем а наш YouTube канал, где вы найдёте ещё много полезного:
Генератор ASCII-артов на HTML5
Доброго времени суток, уважаемые хаброжители.
В этой статье я расскажу о том, как при помощи HTML5 можно сделать простенькое приложение, которое будет генерировать ASCII-арты на основе обычных изображений. Статья ориентирована на тех, кто только начинает свое знакомство с такой замечательной технологией, как HTML5, коим являюсь и я. Профессионалы вряд ли найдут для себя что то новое.
Дело было вечером, делать было нечего
Копался я недавно в интернете в поисках обоев и наткнулся на одно интересное изображение(1.1мб). И меня “зацепила” идея рисовать изображения разноцветными буквами. Порывшись в интернете узнал, что это называется ASCII-art. Ну и конечно же первая мысль: “А запилю ка я приложение, что бы мои любимые обои таким образом нарисовало!”
Сказано — сделано. Есть время, есть желание — почему бы не попробовать.
Было решено реализовывать приложение в браузере. Я давно смотрел на HTML5 и облизывался, да все никак руки не доходили поиграться. А что? Технология модная, перспективная, почему бы не попробовать? Да и проект не сложный, для изучения чего то нового — самое то. На этом и остановился.
Постановка задачи
Для начала, набросаем html-разметку. Страница приложения делится на три логических части:
Загрузка исходного изображения
Теперь у нас есть исходное изображение в виде data:URL. Что с ним можно сделать? Его можно использовать в качестве значения атрибута src для изображения. Поэтому давайте покажем пользователю исходное изображение.
Вот, так намного нагляднее. Теперь самое главное: необходимо обработать это изображение.
Настройки
Мы не будем сохранять настройки каждый раз, когда пользователь их меняет. Вместо этого мы считаем их всего один раз, непосредственно перед обработкой изображения.
Теперь перейдем непосредственно к генерации нашего арта.
Обработка изображения
Получение данных об исходном изображении
Для того, что бы узнать цвета пикселей исходного изображения, необходимо создать канву и нанести изображение на нее. Сначала добавим канву на страницу:
Теперь зададим ей такие же размеры, как и у исходного изображения и нанесем это изображение на нее. А затем получим информацию о канве, а как следствие — об исходном изображении.
Метод getImageData() возвращает информацию о канве. Поле data содержит описание каждого пикселя, как раз то, что нам надо.
Теперь у нас есть необходимая информация. Вот только представлена она не в самой лучшей форме. Это одномерный массив, где первые четыре элемента описывают первый пиксель (rgba), элементы с пятого по восьмой — второй пиксель и т.д. до конца. Как с таким работать, я слабо представляю. Поэтому давайте приведем эту кучу чисел в человеческий вид.
Теперь мы имеем двумерный массив где каждый пиксель представлен объектом. С ним и будем работать дальше.
Расчет размеров символа
Как получить точный размер символа? Не размер шрифта, а область, которую символ занимает на экране? Что бы не заморачиваться, просто создадим временный span с этим символом и замерим его размер.
Внимательный читатель скорее всего заметил, что учитывается не вся высота символа, а только 80%. Это сделано потому, что видимая часть буквы занимает не всю отводимую ей высоту. Из-за этого на итоговом изображении появляются пустые горизонтальные линии между строчками. Особенно они заметны, если буквы большого размера. Я пристрелялся, так что бы при разных размерах шрифта расстояние между строчками было минимальным — получилось 80%. Так и оставим.
Расчет положения и цвета символов
Теперь необходимо составить “карту символов” — список, содержащий информацию о каждом символе, из которых будет формироваться итоговое изображение. Необходимо знать координаты символа и его цвет.
В качестве цвета символа будем использовать цвет пикселя, находящегося в центре области исходного изображения, занимаемой этим символом. Ну или рядом с ним, в случае области с нечетным количеством пикселей по одной из сторон.
Так же определим функцию, которая будет возвращать очередной символ из введенного пользователем текста. А при достижении конца, начинать сначала.
Генерация арта
Теперь у нас есть все, что нужно: список позиций и цветов символов, из которых будем формировать изображение и функция, которая эти символы будет возвращать. Давайте уже сгенерируем наш арт.
Отлично! Наш арт готов. Осталось только показать его пользователю.
Как составить картину из ASCII-кодов
Современные фоторедакторы предоставляют широкие возможности по обработке и улучшению фото. Но ни одна фоторабота не может произвести такого зрительного эффекта, как ASCII-графика.
Сегодня уже немногие помнят то время, когда использование букв, цифр и других символов было едва ли не единственным способом проявить художественные способности при работе за компьютером. Собранные наподобие мозаики картины из ASCII-кодов, представляющие собой текстовые, а не графические файлы, поражали воображение и вызывали уважение к их создателям.
Обычным пользователям это казалось чем-то непосильным. Тогда вряд ли можно было себе представить, какие возможности откроются через десять лет. Но уже наступила эпоха 3D, а некоторые энтузиасты до сих пор активно развивают технику создания текстовых картин.
Секрет неизменной популярности прост: сегодня мы воспринимаем ASCII-графику как атрибут «компьютерного ретро», который придает соответствующий колорит дизайнерскому макету. К тому же в этом есть элемент романтики: не зря одна из самых популярных тем для подобных рисунков — признания в любви.
Конвертация фото в символы
Самый простой способ получения ASCII-картины — создать ее из уже готовой фотографии или обычной растровой иллюстрации. Для этого хорошо подходит простая в использовании программа Ascii Art Maker.
Пожалуй, главная функция этой утилиты — конвертация обычного изображения в ASCII-формат. Получаемый узор составляется из заданных или случайных символов, имеющих разные оттенки. Для того чтобы программа более точно сгенерировала рисунок, в Ascii Art Maker встроен модуль подстройки параметров исходного фото — контрастности, яркости и насыщенности. Все изменения сразу отражаются на изображении.
Удобнее всего корректировать показатели поворотом колесика мыши, предварительно кликнув по нужному параметру. Еще одна функция программы — составление текстовых надписей из различных символов, то есть возможность получать эффект «текста из текста». Результат работы в Ascii Art Maker может быть сохранен в одном из
графических (BMP, JPEG, GIF и PNG) или текстовых (TXT и RTF) форматов. Также можно сгенерировать HTML-страницу с созданным рисунком.
Программа платная: стоимость лицензии —295 рублей. В демоверсии доступны все функции, однако сохранить результат невозможно.
На все готовое
Чтобы самостоятельно создать рисунок или логотип, состоящий из произвольного набора символов, нужно обладать не только художественными способностями, но и развитым воображением. Разработчики Cool ASCII взяли этот труд на себя и собрали целую библиотеку изображений самой разной тематики, выполненных в стиле ASCII.
Как заявляют создатели программы, в ней содержатся тысячи различных рисунков. Чтобы ориентироваться в этом многообразии было легче, все картинки отсортированы по тематическим категориям: животные, любовь, люди и т. д. Эту библиотеку удобно использовать, например, для вставки ASCII-изображений в электронные сообщения.
К сожалению, преобразование любых текстовых надписей в рисунок из символов реализовано не самым удачным образом: русский текст не конвертируется корректно, к тому же при каждом изменении необходимо нажимать кнопку «Convert», чтобы увидеть результат в окне программы.
Cool ASCII может генерировать код и на основе изображения, однако по сравнению с предыдущей утилитой здесь много ограничений. Например, конвертировать в ASCII-узор можно только файлы BMP, а результат позволяется сохранить лишь в формате HTML. Бесплатной версии у этой программы нет — только пробная.
ASCII-палитра
Тем, кто не прочь проявить талант художника, но при этом ищет новые инструменты, можно посоветовать ASCII Art Studio.
Это полноценный редактор, предназначенный для создания всевозможной символьной графики. В программе позволяется делать почти все то же, что и в обычном графическом редакторе: рисовать линии и различные фигуры, делать заливку и т. д.
ASCII Art Studio поддерживает конвертирование файлов в форматах BMP, JPEG и GIF в символьный узор.
Стоимость утилиты довольно высока — около 900 рублей, однако предусмотрен бесплатный пробный период продолжительностью 30 дней.
Онлайновая арт-графика
Интернет стал неотъемлемым атрибутом работы на ПК, и многие программы совсем не обязательно устанавливать в штатном порядке — сетевые сервисы позволяют выполнять операции в онлайн-режиме.
Например, для любителей похвастаться продвинутой ASCII-графикой существует довольно простой ресурс ASCII-Art-Generator.
Загрузив на него фото размером до 500 кбайт, вы получите ASCII-рисунок в формате TXT. Еще один интересный ресурс — ASCII Generator позволяет облекать в симпатичное арт-исполнение различные текстовые фразы. Поддерживаются только латинские символы.
FoxTools v.2.0
Привет, Гость! Ваш IP: 5.188.119.3
Конвертер картинок в ASCII
Что такое ASCII?
Какой формат лучше?
Html удобно использовать для сохранения изображений в формате html, например, для добавления на сайт. Для создания цветных html изображений, ASCII не используется, вместо пикселей вставляются фиксированные пробелы с определенным фоном. Такие изображения можно без проблем вставить куда угодно, хоть в документ MS Word, хоть в текст сообщения на сайте Odnoklassniki.ru. При этом, структура изображения будет полностью сохранена.
Какие ASCII-символы лучше использовать и в каком количестве?
Зачем уменьшать изображения?
Например, следующиее изображение имеет размер 64×64 пикселей:
Если преобразовать это изображение в набор символов ASCII, то на выходе получится набор текстовых данных, содержащий 64 строки, в каждой из которых будет 64 символа.
Как видите, размер изображения в ASCII увеличился в несколько раз. Если конвертировать в ASCII обычную фотографию, то символов может быть так много, что изображение просто не уместится на экране.
Сайт построен на HTML5
Для корректной работы данного сайта требуется HTML5.
Пожалуйста, воспользуйтесь браузером, который поддерживает HTML5. Многие современные браузеры поддерживают HTML5. Например:
Искусство ASCII на Java
Краткий пример создания простых ASCII-символов в Java.
1. Обзор
В этой статье мы обсудим создание графической печати символов ASCII или Строк в Java, используя концепции из поддержки 2D-графики языка.
2. Рисование Строк С Помощью 2D-Графики
Хотя это утомительная задача, она часто выполняется путем создания экземпляра BufferedImage в Java и извлечения из него базового экземпляра Graphics :
2.1. Замена Индексов Матрицы Изображений Символом ASCII
Чтобы мы могли заменить вырезанную область нужным символом ASCII, нам нужно определить значения вырезанной области как единственную точку данных (например, целое число), а не значения цвета RGB.
Чтобы цвет RGB изображения был представлен в виде целого числа, мы устанавливаем тип изображения в целочисленный режим:
Фундаментальная идея состоит в том, чтобы заменить значения, присвоенные ненулевым индексам матрицы изображения, желаемым художественным характером.
3. Генератор ASCII-изображений
Давайте рассмотрим случай, когда нам нужно сделать ASCII-изображение строки “BAELDUNG”.
Мы начинаем с создания пустого изображения с требуемой шириной/высотой и типом изображения, установленным в целочисленный режим, как указано в разделе 2.1.
В приведенном выше примере 12 и 24 представляют соответственно координаты x и y для точки на изображении, с которой должна начинаться печать текста.
Теперь у нас есть 2D-графика, базовая матрица которой содержит два типа дискриминируемых значений: ненулевые и нулевые индексы.
Но для того, чтобы мы получили концепцию, мы пройдем через 2-мерный массив (или матрицу) и заменим все значения символом ASCII “*” на:
Вывод выше показывает только блок звездочек ( * ), как показано ниже:
Мы получаем другое искусство ASCII, которое соответствует нашей строке “BAELDUNG”, но в перевернутом виде, как это:
Это дает нам ASCII-код желаемой строки :
4. Заключение
В этом кратком руководстве мы рассмотрели, как создавать ASCII-рисунки на Java с помощью встроенной библиотеки 2D – графики.
Хотя мы показали специально для текста; “BAELDUNG”, исходный код на Github предоставляет служебную функцию, которая принимает любую строку .