Posts Tagged ‘as3’
Как сделать из говна конфетку? Processing вам в помощь!
Недавно одному из клиентов потребовалось сваять календарь с некими иллюстрациями. При этом бюджет явно не предусматривал покупку нормальных фотоматериалов. Я крепко призадумался, как из найденного в интернете лоурезного говна сделать приличную вещь. И, неожиданно, вспомнил про Processing.
Если кто не в курсе, это такой движок или платформа, предназначенная для создания интерактивных произведений генеративного искусства (generative art). На этой платформе сделано довольно много модных мультимедийных интерактивных проектов. На сайте есть галерея, все подробности там. Да, и он бесплатный, абсолютно.
Так вот, я решил использовать Процессинг с цель получить примерно такой результат как вы видите на картинке - растеризовать изображение с помощью букв. Все осложнялось тем, что такой скрипт еще предстояло создать…
За основу я взял разработку с сайта complexification.net Джареда Тарбелла box fitting (Thank you Jared!). Но я решил модифицировать алгоритм таким образом, чтобы вместо квадратов использовать буквы. По ходу работы пришлось усовершенствовать алгоритм так, чтобы картинка сохраняла узнаваемость. В оригинальном алгоритме берется цвет из случайного места исходного изображения, затем квадрат начинает расти пока не столкнется с другим растущим квадратом, получается красиво, но структура изображения нарушается. Я же сделал так, что буква растет до тех пор пока перепад яркостей или насыщенности или оттенка находится в заданном коридоре, то есть буквенные пиксели сохраняют структуру изображения.
Алгоритм работает достаточно быстро и можно сразу получить готовое изображение в виде Tiff файла, но как всегда есть НО, это маленькое, но противное НО… - дерьмовое качество отрисовки шрифтов в processing. Плюс к тому, выбор гарнитур небогат, можно использовать только несколько true type шрифтов, вся моя коллекция ps и OpenType шрифтов идет по боку… Внутри процессинга есть несколько разных режимов рендеринга, я перепробовал их все, но увы есть некоторые ограничения по их использованию в данном конкретном случае, так что пришлось смириться с имеющимся результатом. Тем не менее, для полиграфии вполне пристойные картинки получаются.
Естественно, я не смог устоять перед искушением портировать эту штуку на флэш. И я сделал это. Пришлось помучаться, решая проблему производительности, но об этом чуть ниже, а сейчас можно поиграться с letter paint:
Число на панели слева внизу - количество использованных символов. После остановки просчета можно увеличивать изображение и таскать его мышью. И да, приложение тормозное, увы.
Что касается производительности, то выяснилась одна неприятная особенность - если делать все как в оригинальном алгоритме, то ждать придется до второго пришествия. В оригинале, в процессинге, можно видеть как буквы “растут”, и сначала я реализовал именно такую версию, но производительность такого алгоритма во флеше была просто ужасающе низка.
В ходе экспериментов я понял, что огромное время отнимает именно процесс вывода полученного результата на экран, все эти подсоединения к дереву display list’а жрут неимоверное количество времени. Как только я вынес весь процесс за скобки, скорость увеличилась невероятно! Я решил, что будет достаточным показывать результат с некоторой периодичностью, чтобы было ясно, что приложение живо. Поэтому в ходе работы все выглядит и ощущается несколько туповато, реакция прямо скажем не реактивная… зато скорость обсчета вполне вменяемая. Собственно целью этого мероприятия было получения картинки в векторной форме, и это удалось!
Скрипт для процессинга можно скачать здесь: LetterProc02.pde
Точность определения координат в flash
Казалось бы, с координатами во флеше все предельно ясно, тип переменной Number, значит и точность определения координат такая же. Ага… Я тоже так думал до сегодняшнего дня.
Поковырявшись повнимательнее выяснил: точность определения координат во флеше - 0.05.
Оно, конечно, может и не так важно, но я здорово помудохался пока выяснял почему объект с замедлением возвращающийся на заданную позицию, все никак туда окончательно приехать не может, this.x += (this.x - oldX) * 0.2; , казалось бы вот-вот будет this.x == oldX . А вот и хрен! Каждый раз когда x присваивается например 14.87 оно превращается в 14.85 и в какой-то момент замкнутый круг наступает из-за этого округления… Округляет флеш координуту до 0.05, чтоб он был здоров.
Стройка века
Наконец-то я могу похвастаться завершенным коммерческим проектом zoom-mebel.ru. Как говорится мы строили, строили и наконец построили! Это сайт мебельного производителя, изготавливающего компьютерные столы и шкафы-купе.
Изначально предполагалось наполнять сайт моделями достаточно дорогого уровня, поэтому дизайн делался в расчете на более изысканную начинку. Однако кризис несколько откорректировал планы…
Тем не менее, получилось неплохо. Сайт представляет собой монолитное приложение размером 213 Кб. В него подгружаются управляющие xml файлы и картинки. Вся начинка может быть легко изменена, необходимо просто отредактировать xml. Для навигации по кнопкам браузера “вперед-назад” использована библиотека swfAddress. В контекстном меню есть профайлер, так что любопытные могут ознакомится с тем как мое приложение работает с памятью. Неплохо работает, я изрядно потратил времени на устранение утечек памяти.
Вся остальная начинка написана с нуля самостоятельно, включая все скроллбары, кнопки и меню. Во-первых так это весит меньше чем стандартные перескинованные компоненты, во-вторых в ходе написания я детально ознакомился с внутренним устройством этих деталей, эти знания весьма полезны.
Конечно, там есть баги, конечно там есть, что править. Так было и будет всегда, багов не бывает только на пустой странице. Как это обычно бывает, для устранения некоторых неполадок нужно менять архитектуру системы, что делать уже несколько поздно, зато теперь мне известно, чего делать не следует… 
Проект этот трудно считать окончательно законченным, в планах стоит еще более детальная проработка навигации. Сейчас кнопки браузера управляют только самой верхним слоем иерархии ссылок - т.е. навигация происходит только по разделам, чтобы идти еще и по ссылкам внутри раздела “Продукция” требуется значительно модифицировать код.
Ну и заключение хочу сказать, что для меня как для дизайнера привыкшего работать в полиграфии, разработка сайта на флеше является наиболее естественным и удобным способом. Вернее так: флеш это наиболее адекватный для этого инструмент с точки зрения точности воплощения замысла.
Да, конечно, есть все эти раздражающие родовые болячки с навигацией, с наличием флеш-плеера нужной версии и т.п. все мы о них знаем. Речь не об этом. Речь о том, что когда я пробую делать страницу в html с помощью CSS я конечно, рано или поздно вымучиваю результат, однако во первых это весьма не интуитивный путь, во-вторых, что самое неприятное, маленькая мелочь внутри css может непредсказуемо нарушать отображение страницы. Даже применение одних и тех же параметров в разном порядке дает совершенно разный результат. Иногда я просто выхожу из себя пытаясь заставить браузер отобразить то что мне нужно.
Вобщем, по степени идиотизма и удобства верстки html напоминает мне попытки верстать тексты в wordе, одни упражнения со вставкой картинок чего стоят - это просто песня. И этот чертов html такой же бестолковый и упрямый. Объекты самостоятельно перескакивают куда им заблагорассудится по каким-то неведомым причинам, нужно изрядное терпение и немалый опыт, чтобы заставить этот бешеный html показывать то что ты хочешь. И ладно бы все это будучи сделано, показывалось во всех браузерах как надо, так ведь куда там… Кругом одни компромиссы, постоянно приходится делать не так как ты хочешь, а как допустимо. Мне это напоминает по ощущениям работу, когда руки у тебя привязаны резиновыми стропами к стулу, ты конечно работаешь, но уйму энергии тратишь на преодоление сопротивления идиотских ограничений, а совсем не туда куда надо.
А во флеше все гораздо более определенно. Во-первых рисуешь руками. Куда поставил объект, там он и будет стоять. Какое поведение задал, так он и будет себя вести. Никакой неведомой мудотни. Конечно, программирование тоже не сахар, но точность воплощения задуманного меня покупает на все 100%.
Жаль, что флеш не мейнстрим, очень жаль. Увы и ах. Html конечно стандарт отрасли, под него все оптимизировано и т.п. кто спорит. Типа как автомобили в советское время - едет и замечательно! А то, что щели и кое-что не работает как надо, так это пустяки. Ишь чего захотели - чтобы дизайн, чтобы удобно! Нехуй тут эстетствовать…
Может быть когда-нибудь этот хренов html станет по-настоящему удобным инструментом для дизайнера, может быть… Я надеюсь.
Совершенству нет предела
И тем не менее, теперь я наконец могу показать демо, которым я по настоящему доволен. По сравнению с этим вариантом, все предыдущие - тухлая, никуда не годная лажа.
Тут многое подправлено и теперь это выглядит вдохновляюще. Вариант все еще сырой. В коде осталось куча всяких хвостов которые надо зачистить.
К счастью, мне удалось разобраться с производительностью и теперь анимация выглядит плавно и красиво. Для усиления эффекта я сделал киношное каше и подправил цвет. В сцене сейчас пять разных вариантов появления букв, они чередуются в произвольном порядке и у некоторых из них меняются параметры в случайном порядке.
Любуйтесь!
Дело было не в бобине… или как заставить плагин FIVe3D_make_typography_v2.0 работать
В своем посте Текст в кривые программно или «Крошим шрифт на кусочки» я жаловался, что у меня не работает плагин FIVe3D_make_typography_v2.0 с помощью которого шрифт преобразуется в AS3 класс.
Оказывается, чтобы плагин FIVe3D_make_typography_v2.0 заработал, его надо класть в папку, где находятся настройки программ - в Windows это:
C:\Documents and Settings\…YourUserNameHere…\Local Settings\Application Data\Adobe\Flash CS4\en\Configuration\WindowSWF
Поскольку эта папка является скрытой, то сначала надо включить показ скрытых папок в свойствах обозревателя.
Кто бы мог подумать! Я совал плагин в папку WindowSWF находящуюся в Program files и уже всю голову сломал пытаясь понять, какого черта он не работает! И ведь в инструкции по установке об этой мелочи ни слова не сказано - поди догадайся. Я узнал о том, как это победить, когда посмотрел урок Building Custom Flash Panels Ли Бримелоу на gotoAndLearn о том, как пишуться плагины к flash IDE.
Что касается получения информации о символах - то все оказалось просто. Плагин FIVe3D_make_typography_v2.0 каждый символ по очереди помещает на сцену - конвертирует в кривые, потом парсит информацию о шейпе, а в итоге в output выдает листинг AS3 класса с описанием шрифта. Все это дело работает благодаря доступу к внутренним функциям Flash IDE, подробнее об этом можно почитать в справочном руководстве к флешу - в разделе Extending Flash. Жаль что этими средствами можно пользоваться только внутри flash IDE. Это я все к тому, что пока мои поиски на тему “можно ли программно device font превратить в кривые” пока не привели к успеху.
И, на закуску, руссифицированный вариант эксперимента со шрифтами.
прячу это малоудачное гавно под кат, ибо теперь есть вариант поудачнее (см. пост выше)