Как сделать из говна конфетку? Processing вам в помощь!

Недавно одному из клиентов потребовалось сваять календарь с некими иллюстрациями. При этом бюджет явно не предусматривал покупку нормальных фотоматериалов. Я крепко призадумался, как из найденного в интернете лоурезного говна сделать приличную вещь. И, неожиданно, вспомнил про Processing.

Если кто не в курсе, это такой движок или платформа, предназначенная для создания интерактивных произведений генеративного искусства (generative art). На этой платформе сделано довольно много модных мультимедийных интерактивных проектов. На сайте есть галерея, все подробности там. Да, и он бесплатный, абсолютно.

Так вот, я решил использовать Процессинг с цель получить примерно такой результат как вы видите на картинке - растеризовать изображение с помощью букв. Все осложнялось тем, что такой скрипт еще предстояло создать…

За основу я взял разработку с сайта complexification.net Джареда Тарбелла box fitting (Thank you Jared!). Но я решил модифицировать алгоритм таким образом, чтобы вместо квадратов использовать буквы. По ходу работы пришлось усовершенствовать алгоритм так, чтобы картинка сохраняла узнаваемость. В оригинальном алгоритме берется цвет из случайного места исходного изображения, затем квадрат начинает расти пока не столкнется с другим растущим квадратом, получается красиво, но структура изображения нарушается. Я же сделал так, что буква растет до тех пор пока перепад яркостей или насыщенности или оттенка находится в заданном коридоре, то есть буквенные пиксели сохраняют структуру изображения.

Алгоритм работает достаточно быстро и можно сразу получить готовое изображение в виде Tiff файла, но как всегда есть НО, это маленькое, но противное НО… - дерьмовое качество отрисовки шрифтов в processing. Плюс к тому, выбор гарнитур небогат, можно использовать только несколько true type шрифтов, вся моя коллекция ps и OpenType шрифтов идет по боку… Внутри процессинга есть несколько разных режимов рендеринга, я перепробовал их все, но увы есть некоторые ограничения по их использованию в данном конкретном случае, так что пришлось смириться с имеющимся результатом. Тем не менее, для полиграфии вполне пристойные картинки получаются.

Естественно, я не смог устоять перед искушением портировать эту штуку на флэш. И я сделал это. Пришлось помучаться, решая проблему производительности, но об этом чуть ниже, а сейчас можно поиграться с letter paint:

Число на панели слева внизу - количество использованных символов.  После остановки просчета можно увеличивать изображение и таскать его мышью. И да, приложение тормозное, увы.

Что касается производительности, то выяснилась одна неприятная особенность - если делать все как в оригинальном алгоритме, то ждать придется до второго пришествия. В оригинале, в процессинге, можно видеть как буквы “растут”, и сначала я реализовал именно такую версию, но производительность такого алгоритма во флеше была просто ужасающе низка.

В ходе экспериментов я понял, что огромное время отнимает именно процесс вывода полученного результата на экран, все эти подсоединения к дереву display list’а жрут неимоверное количество времени. Как только я вынес весь процесс за скобки, скорость увеличилась невероятно! Я решил, что будет достаточным показывать результат с некоторой периодичностью, чтобы было ясно, что приложение живо. Поэтому в ходе работы все выглядит и ощущается несколько туповато, реакция прямо скажем не реактивная… зато скорость обсчета вполне вменяемая. Собственно целью этого мероприятия было получения картинки в векторной форме, и это  удалось!

Скрипт для процессинга можно скачать здесь: LetterProc02.pde