Графическое движение: тесселяции своими руками.
Иногда, когда я рисую, мне кажется, будто я медиум, находящийся во власти существ, порождённых моим же воображением. Рыбы становятся птицами. День ночью. Из хаоса рождается жизнь, она замирает в мёртвых городах, трансформируется в шахматную партию и рассыпается в пыль. Мозаика оживает и превращается в ящериц, они движутся, живут и вновь уходят в орнамент.
Мауриц Корнелис Эшер
Автор эпиграфа — нидерландский художник-график, известный концептуальными литографиями, гравюрами на дереве и металле, в которых мастерски исследует пластические аспекты понятий бесконечности и симметрии.
Как ни абсурдно, несколько проведённых от руки линий могут выглядеть, как объёмная фигура. Такова особенность психологического восприятия человеком сложных трёхмерных объектов. Эшер добивался простыми средствами поразительного эффекта. А если бы в его распоряжении были все средства современной компьютерной графики? Как говорил он сам: «Если бы вы только знали, какие видения посещают меня в ночной тьме… Иногда моя неспособность сделать их зримыми буквально сводит меня с ума».
Имея последние версии «Корела», «Пэйнта» или «Фотошопа», можно пойти другим путём. И предстанут перед нами иные метаморфозы…
В CorelDRAW прекрасно реализуется один из приёмов рисования Эшера — тесселяции, известные как покрытие плоскости плитками (tiling). Это коллекции фигур, которые покрывают всю математическую плоскость, совмещаясь без наложений и пробелов.
Репродукция картины Эшера «День и ночь»
В черновиках Эшера содержится множество таких вариаций. Он использовал их во многих произведениях: знаменитые «Метаморфозы», «Мозаики», картина «День и ночь», серия картин «Предел круга» и др.
Знаменитые «мозаики»
«Circle Limit with Butterflies»
Правильные тесселяции состоят из фигур в виде правильных многоугольников, при совмещении которых все углы одинаковые. Существует всего три многоугольника, пригодных для использования в тесселяциях, — квадрат, правильные треугольник и шестиугольник.
Теперь и начинающий дизайнер, на пару с компьютером, может стать Эшером, правда, славы его уже не добьётся. Хотя кто знает, какие таланты могут открыться среди мастеров компьютерной графики…
Сам себе Эшер
Для создания тесселяций нужно только знать несколько простых приёмов. Берём правильный треугольник, квадрат и, конечно, правильный шестиугольник. Правильные — потому что они сами воплощение симметрии.
Те самые правильные фигуры, используемые в тесселяциях
С помощью векторных редакторов можно получить удивительные мозаики. Создадим алгоритм создания тесселяций на базе произвольных кривых. Все наши новые объекты легко могут быть вписаны в те же правильные многоугольники.
Рисуем в CorelDRAW произвольную кривую. Открываем докер преобразований. Перемещаем центр вращения кривой в её начало и поворачиваем с дублированием объекта на угол 90º. Чем точнее будет установлена точка центра вращения объекта, тем правильнее будет выглядеть мозаика.
Поэтому удобнее включить в CorelDRAW режим «Привязка к объектам».
Снова перемещаем центр вращения исходной кривой в её конечную точку и ещё раз поворачиваем с дублированием на 90º. Объединяем кривые и вписываем в квадрат. Преобразуем кривые в объект, выполнив операцию «Объединить», и последовательно соединяем пары узлов в вершинах «квадрата». Можно воспользоваться командой меню «Упорядочить» • «Соединить кривые» и в соответствующем докере уменьшить значение допуска зазора. Основа будущей мозаики представляет замкнутую кривую, поэтому для неё можно задать заливку и абрис.
Алгоритм создания элемента мозаики
Снова перемещаем центр вращения в одну из вершин объекта, устанавливаем угол поворота -90º, количество копий — 3 и одним щелчком по кнопке «Применить» в докере преобразований получаем мозаику из 4-х элементов.
А так добиваемся вращения элементов мозаики
Продолжаем строить мозаику: повторяем операцию вращения уже для группы из первых 4-х объектов. Аналогично дублируем группу объектов с поворотом на -90º относительно центра вращения в вершине «квадрата». На двух сторонах объекта есть выступающие элементы, а две другие содержат аналогичные элементы в виде вырезов.
Продолжаем создание мозаики и получаем так любимые детьми и взрослыми «пазлы»
Варианты мозаик, построенных на различных базовых кривых
Усложним задачу, но не для себя, и даже не для CorelDRAW, а только для геометрии. Делаем мозаику на базе треугольников и шестиугольников. И сталкиваемся с одной особенностью. В мозаике из множества объектов нельзя использовать произвольные кривые. Базовая кривая тут обязательно должна состоять из двух симметричных частей. Один отрезок кривой может содержать выступающие элементы, а другой — элементы выреза. Только тогда фрагменты мозаики будут прилегать друг к другу без зазоров и наложений. Для треугольников базовую кривую надо дублировать с поворотом на -60º.
Вращение симметричного отрезка кривой для получения правильного треугольника
Теперь у нас есть блок мозаики из треугольников
Примеры мозаик на базе треугольников
Аналогично строятся мозаики на базе шестиугольников, только угол поворота каждой базовой кривой 120º. На тот же угол поворачиваются все последующие элементы. Для точного соединения деталей мозаики базовая кривая должна содержать выступы и впадины, которые и соединяются в процессе составления узора.
Примеры мозаики на базе шестиугольников
Мозаика составлена, оживляем её. Использовать можно все эффекты из CorelDRAW, применимые к векторным объектам и их группам: оболочку, искажение, вытягивание, художественное оформление, скос, рельеф, линзу… Подойдут различные заливки и абрисы. А можно взять произвольное фотоизображение либо векторную картинку, поместить в PowerClip и имитировать эффект рассыпавшейся мозаики.
«Рассыпанные пазлы»
Применим к готовой мозаике эффект «Линза» • «Рыбий глаз» и получим имитацию эффекта объёма.
Эффект «линза» с положительными и отрицательными значениями параметра «частота»
В качестве основы тесселяций подойдут не только базовые кривые, но и группы объектов с различными заливками и заранее применёнными эффектами. А можно дополнить фрагмент мозаики дополнительными рисунками.
Фрагменты мозаики дополнены декоративными элементами
А теперь откроем графическое движение. Превратим мозаику в анимацию. Элементы мозаики, созданные в CorelDRAW, размещались на одном слое, тогда как программы для создания анимации требуют расположения её элементов в отдельных слоях. Конечно, можно вручную перераспределить кусочки мозаики по отдельным слоям в CorelDRAW, но это работа долгая и нудная. Упростим себе жизнь, скачав с сайта www.cdrpro.ru специальный макрос ToLayers для перераспределения объектов по слоям. Загрузим его в CoreDRAW с помощью диспетчера макросов. Остаётся выделить все объекты, которые надо распределить по слоям, и запустить макрос.
Запускаем макрос ToLayers и наблюдаем результат
После того как макрос автоматически перераспределит объекты или группы объектов по слоям, можно экспортировать мозаику для дальнейшей анимации. Экспортировать будем в двух режимах — в файл формата *.psd для Adobe Photoshop и в *.cpt для Corel PHOTO-PAINT.
В настройках параметров экспорта пометим ячейку «Сохранять слои», чтобы не допустить слияния всех слоёв в один, иначе все наши труды пропадут зря. Изменим цветовую модель на RGB и уменьшим размер изображения.
При экспорте выберите формат инструмента, в котором удобнее работать дальше
Откроем экспортированный файл в Photoshop. Все слои мозаики сохранены, осталось открыть панель анимации и выбрать функцию «Make Frames from Layers», установить параметры анимации и сохранить оптимизированное изображение в формате *.gif.
Анимированный баннер соберём из кусочков мозаики. Можно инвертировать направление анимации — тогда мозаика будет «рассыпаться».
А так можно создать анимированный баннер в Photoshop
Вернёмся в Corel PHOTO-PAINT и откроем ранее экспортированный файл мозаики. Все фрагменты распределены по слоям. Можно применить к одному из них любой эффект, например из группы трёхмерных эффектов или текстур, и повторить эффект для всех видимых объектов. Вид мозаики изменится.
Элементы мозаики с эффектами «Пластик»
Элементы мозаики с настройками эффекта «Пластик»
А теперь создадим в Corel PHOTO-PAINT анимированный баннер, для чего откроем вкладку «Фильм» • «Создать из документа». Последовательно объединяя каждый фрагмент мозаики с фоном и размещая их на соответствующем кадре фильма, создаём анимацию.
От рутинных операций можно избавиться, записав последовательность действий по созданию анимации в виде пользовательского макроса в CorelPHOTO-PAINT или создав пользовательский Action в Photoshop и использовав его для последующих мозаик.
Создание анимации последовательным объединением активного слоя с фоном
Импорт послойного изображения в Adobe Flash
Слои мозаики в Adobe Flash
В любом редакторе, работающем с векторными объектами, можно быстро трансформировать объекты. Алгоритм создания тесселяций легко использовать в Adobe Illustrator и Adobe Flash Professional. Начинающим пользователям Flash достаточно также импортировать многослойную мозаику в формате *.psd и разместить в Adobe Flash, распределив элементы по ключевым кадрам либо по слоям.
Современные графические редакторы позволяют легко и просто создавать анимированные баннеры, флэш-игрушки, рекламные клипы, глубоко проникающие в сознание покупателей.
Великий художник вспоминал, как однажды ему позвонила дама и сказала:
«Господин Эшер, я восхищаюсь Вашими работами. В Вашем произведении “Рептилии” мне представляется реинкарнация». А он ответил:
«Мадам, если Вы это видите, то это так и есть».
Теперь произведения компьютерной графики, как и картины великих художников и фильмы великих режиссёров, наполнятся жизнью, движением, смыслом. Главное — делать всё с душой, тогда каждый дизайнер может стать анимационным Феллини.
Об авторах: Елена Свистунова (elensvs@yandex.ru), преподаватель компьютерной графики; Александр Свистунов (alexsvs@yandex.ru;http://alexrash.livejournal.com/), писатель, директор интернет-компании InterNext.
По материалам COREL Magazine
Автор: KonS
