Текст в кривые программно или «Крошим шрифт на кусочки».

Во время экспериментов с кривыми мне пришла в голову идея использовать в своих упражнениях – буквы в виде элементов художественной композиции. Причем не просто использовать, а манипулировать буквально каждым отрезком составляющим букву, чтобы получать разнообразные эффекты, например, взрывать или собирать буквы из кусочков. Я видел много подобных эффектов, но все они реализованы в пиксельном виде, (сначала текст отображается в битмап, потом попиксельно его разбираем-собираем вот как тут например). Мне же хотелось иметь полный контроль именно над векторными кусками букв, чтобы манипулировать ими в трехмерном пространстве.

Проведя изыскания на тему, как программно получить доступ к векторным контурам букв, я обнаружил два интересных источника на эту тему. Первый, самый известный, это Матье Бадимон (Mathieu Badimon – я не ручаюсь за правильность воспроизведения французской фамилии). Так вот, у него есть собственный движок FIVe3D в котором, в частности, реализовано построение векторных шрифтов в 3D.(Интересно, что Papervision для построения текста использует именно файлы описания шрифтов сделанные Матье). Сами шрифты хранятся в виде классов с описанием шрифта в массивах. Отдельная буква описывается набором команд и координат.

Например, команда “M” – это moveTo, “L” – lineTo и т.д. Если строится сегмент кривой, то имеем четыре координаты, если прямую – то две координаты. Естественно есть описания заливок, стилей линии и т.п.

У Матье есть плагин к Flash IDE - FIVe3D_make_typography_v2.0 - с помощью которого можно генерировать описания любых шрифтов. В CS4 этот плагин  у меня, к сожалению, не работает. Как конкретно плагин извлекает информацию о шрифтах установленных в операционной системе, не известно (исходника нет), но очевидно, что доступ к векторным контурам шрифтов получить программно можно.

Update: Все работает. Просто надо знать нюансы…

Второй источник – wu-media lab (Guojian Miguel Wu) использует несколько иной подход. Источником контуров служит загружаемая свфка(swf) в которой внедрены (embeded) необходимые шрифты. Затем он просто парсит загруженный в файл и извлекает оттуда описания контуров символов. Заодно я познакомился со спецификациями swf файлов на Adobe и узнал, как именно хранятся шрифты внутри скомпиленного flash файла.

Конечно, очень хотелось бы узнать, как получить доступ к шрифтам в период исполнения программы, но я думаю со временем я раскопаю эту информацию.

Для начала, я ограничился тем, что использовал Фреймворк Матье для получения необходимых мне описаний шрифтов, для чего я добавил туда пару методов для извлечения этой информации. Дальше я создал собственную структуру данных с помощью которой я манипулирую полученной информацией. Для упрощения, я использовал только контуры букв без заливки, т.к. это отдельная работа – разбиение буквы на треугольники, я еще не готов к таким заморочкам.

Дополнительно я разбиваю длинные прямые штрихи букв на более мелкие куски, так взрыв выглядит достовернее. Кривые сегменты я не подвергаю разбиению, т.к. они и так достаточно короткие. А дальше все просто – твиним полученные куски, проецируем их на плоскость и т.д. По хорошему надо бы сделать это дело частью фреймворка Матье, чтобы избавиться от собственного рендера и сделать эту шрифтодробилку более универсальной. Но пока для демонстрации оставлю самопальный рендер.

В рендере которым я пользуюсь есть проблема – если координаты в трехмерном пространстве выходят за пределы focalLength (то есть выходят за плоскось на которой расположен «наблюдатель») то рисуется всякая ахинея (например кусок объекта рисуется зеркально относительно центра экрана). Похоже, что эти данные надо отсекать и не воспроизводить на экране, но я пока не знаю, как это решить.

И да, пока только латинские символы, т.к. я использую готовые файлы Матье Бадимона.

Сначала буквы разлетаются на части, потом собираются снова. В первый раз между этими мероприятиями происходит непонятная пауза секунд в 5, потом все работает быстрее. Это видимо особенности движка Tweenlite.

UPDATE

Вот здесь можно посмотреть еще одну весьма эффектную демонстрацию на ту же тему.