Как сделать что-то подобное ASCII art, только вместо символов — слова, на JavaScript?

Question

[Damir Makhmutov]

Привет, %username%. Мне необходимо найти решение для такой задачи:
Нужно из некоторого множества слов составить изображение, подобно ASCII art'у.
Очевидно что нужно использовать canvas. Может быть есть уже какие-либо готовые наработки? Мне пока-что нагуглить ничего не удалось, но я еще плохо старался.
А выглядит это примерно следующим образом:


Резюмируя: Как из изображения сделать ASCII-подобное изображение, состоящее из множества слов?
Может быть кто-нибудь сталкивался с такой задачкой? Подскажите пожалуйста, куда копнуть, буду премного благодарен :-)

Answer 1

[Арсений Тогулев]

То что вы выложили в примерах делалось в фотошопе или иллюстраторе руками

Comments

[Damir Makhmutov]

Я понимаю. Я пытаюсь найти какой-нибудь способ, для генерации "похожих" изображений. То что нужно генерировать - много проще чем то что я приложил. Там нет поворотов текста на определенные углы, только по горизонтали (например). Это всё не важно, важен подход, куда копнуть? Вот в чем вопрос :-)

[Арсений Тогулев]

Damir Makhmutov: thecodeplayer.com/walkthrough/cool-ascii-animation...

[Damir Makhmutov]

Не то это. ASCII art сделать из очень просто. У меня совсем иная задача.

[Арсений Тогулев]

окей, тогда может это как то поможет shaneriley.com/dickbuttjs

[Damir Makhmutov]

Вот, уже ближе! Спасибо.

Answer 2

[Aleksandr Shpak]

Интересная задача. Скажу страшное. Я бы изначально начал копать в сторону отрисовки SVG изображений своими руками на канве, заменяя примитивы (такие как линии, дуги и пр.) на слова/фразы.

Comments

[Damir Makhmutov]

Мм. Интересно)
Вообще говоря - задачу можно разбить на несколько однотипных задач:
1. Строить изображение из слов за счет изгибов слов (как на 1м рисунке, если не брать в расчет цвет слов, или на 2м и 3м рисунках)
2. Весь текст строго горизонтально, а изображение получается за счет изменения цвета текста (почти как на 1м рисунке)
3. Совместить и 1-е и 2-е (прям как на 1м рисунке)

Как решить 2ю задачу - я примерно представляю: можно же из текста сделать маску, которую потом наложить на изображение. Как думаете?)
А вот с 1-ой, и 3-ей задачкой пока что ничего(

[Damir Makhmutov]

Для решения 2й задачи еще можно предварительно обработать изображение, например в стиле polygon art :-) тогда картинка должна получиться более четкая и просматриваемая, и более эффектная.

[Aleksandr Shpak]

Damir Makhmutov: блин вот интересная же задача, но насильно заставляю себя не заниматься этим))

[Aleksandr Shpak]

Ну если весь текст строго горизонтально и просто менять цвет букв, то и задача не особо сложна, просто менять размер картинки согласно количеству букв и назначать буквам цвет согласно цвету пикселов. Я бы всё таки копнул в сторону обработки фото фитрами для перегонки в вектор, и собственными руками рендерить свг.

[Damir Makhmutov]

Мне удалось вот что найти: www.typoeffects.com/?page_id=135
И демонстрация: www.youtube.com/watch?v=K6wx1k1YS4k
Последний результат в демонстрации - прям вот то что мне нужно получить)