Будь умным!


У вас вопросы?
У нас ответы:) SamZan.net

Кривые Безье Рисование с помощью кривых Безье В пятой версии программы Flsh появилась возможнос

Работа добавлена на сайт samzan.net:


Лабораторные работы 37 Flash MX. Кривые Безье.

Рисование с помощью кривых Безье

    

В пятой версии программы Flash появилась возможность явного управления кривыми Безье, что в некоторых случаях весьма удобно. Для этого в программе существуют два инструмента: Перо (Pen) и Частичный выбор (Subselection). Если вы ранее никогда не задумывались над тем, как задать кривизну линии, то, возможно, эти инструменты на первых порах не понадобятся. Напротив, тех, кто уже имеет опыт работы в программах векторной графики, скорее всего, заинтересует создание кривых именно с помощью этих инструментов.

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

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

На практике это означает, что на любой кривой линии обязательно присутствует несколько таких управляющих точек, обычно именуемых узлами (рис. 2.47).


Рис. 2.47. Кривые и узлы

Редактирование контуров

Щелкнув на любой из них с помощью инструмента Частичный выбор (кстати, его можно выбрать с помощью клавиши А), мы увидим два исходящих из нее вектора (рис. 2.48), обычно противоположно направленных. Каждый из них определяет кривизну линии со своей стороны от узла. Перетаскивая мышью конец каждого из этих векторов с помощью инструмента Частичный выбор, можно изменять кривизну основной линии (рис. 2.49).


Рис. 2.48. Векторы искривления



Рис. 2.49. Изменение вектора искривления инструментом Частичный выбор

Кроме того, этим инструментом можно перемещать и сами узлы, как показано на рис. 2.50. Изображение на этом рисунке справа показывает, как выглядит кривая после снятия выделения.


Рис. 2.50. Перетаскивание узлов изменяет форму линии

При выделении узла с помощью инструмента Частичный выбор два исходящих из него вектора искривления обычно направлены в противоположные стороны. При перемещении одного из них автоматически корректируется и другой, так что их противоположная направленность (и гладкость линии) сохраняются. Но если необходимо расположить их под углом друг к другу, просто во время этой операции удерживайте нажатой клавишу ALT. Это позволит расположить векторы искривления под произвольным углом (рис. 2.51). На кривой возникнет излом.


Рис. 2.51. Расположение векторов искривления под произвольным углом

Кроме того, инструмент Частичный выбор позволяет перемещать и всю кривую целиком, если "потянуть" за нее в любом месте, где нет узла. Кстати, для облегчения операций с инструментом Частичный выбор при наведении указателя мыши на узел около него появляется маленький белый квадрат, а при наведении на любое другое место кривой - черный квадрат (рис. 2.52).


Рис. 2.52. Вид указателя мыши при работе с инструментом частичный выбор

Если выделить инструментом Частичный выбор какой-либо узел и затем нажать клавишу DELETE, этот узел удаляется. Таким же образом можно выделить и удалить сразу несколько узлов (для этого при выделении следует удерживать клавишу SHIFT). Однако при одновременном удалении нескольких узлов удаляется весь соответствующий отрезок кривой.

Добавление узлов

А вот добавить новый узел с помощью инструмента Частичный выбор невозможно. Для этого нам потребуется инструмент Перо, который можно выбрать, нажав клавишу Р (первую букву в слове pen). При этом указатель мыши принимает вид наконечника пера с косым крестом рядом (рис. 2.53 слева). Если навести его на любое место кривой (но не на узел), то вместо косого креста появится прямой (рис. 2.53 в центре). Это означает, что щелчком мыши в этом месте можно добавить новый узел (рис. 2.53 справа).


Рис. 2.53. Индикация режимов работы инструмента "перо"

С помощью Пера можно также удалить существующий узел. Если навести указатель мыши на узел и щелкнуть, около указателя мыши появится маленький минус. Повторный щелчок на том же узле приведет к его удалению.

Однако описанное выше применение инструмента Перо является скорее исключением, чем правилом. Гораздо чаще его применяют для создания новых кривых и геометрических фигур. При этом обычно удобнее всего использовать режим Pen preview (Предварительный просмотр), который по умолчанию отключен. Для его включения дайте команду Edit  Preferences (Правка  Параметры) и выберите в открывшемся окне вкладку Editing (Редактирование) (см. рис. 2.40). На панели Pen Tool (Перо) установите флажок Show Pen Preview (Предварительный просмотр).

Теперь, если щелкнуть мышью на свободном месте рабочей области (указатель мыши при атом имеет вид кончика пера с маленьким косым крестом), то на этом месте появится узел. При перемещении мыши (после отпускания кнопки) за ней потянется след, соединяющий этот узел с текущим положением указателя. Чтобы "закрепить" этот след, нужно щелкнуть мышью опять (создается второй узел). Повторяя эту операцию, можно получить ломаную линию, состоящую из прямолинейных отрезков.

Если в ходе работы навести указатель мыши на первый узел, около него появится маленький кружок (вся последовательность действий показана на рис. 2.54). Щелкнув мышью, можно замкнуть линию. В этом случае получится многоугольник, причем с заливкой, если только для нее не выбран режим No Color (Без цвета). Разумеется, точно таким же образом можно замкнуть линию не на первый, а на любой другой узел.


Рис. 2.54. Создание многоугольника с помощью инструмента Перо

После создания ломаной линии каждый из составляющих ее отрезков можно искривить с помощью инструмента Частичный выбор. Однако интересно, что создавать вместо прямолинейных отрезков криволинейные можно прямо в процессе рисования инструментом Перо.

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


Ход работы:

Задание 1. Ветка сирени

эта задача состоит из двух частей. Во-первых, сначала надо нарисовать один цветок. Здесь придется как следует повозиться над геометрией лепестков, заливкой, пестиком и тычинками.

Далее можно копировать изображение отдельного цветка в буфер обмена (Edit>Copy или <Ctrl>+<C>), а затем вставлять его на рабочее поле(Edit>Paste или <Ctrl>+<V>). Нам потребуется много таких копий, в зависимости от объема грозди сирени. Каждую копию модифицируем, чтобы внести разнообразие: масштабировать, врашать, изменять цвет. Во-вторых, отредактированные копии цветков следует объединить в единую гроздь. Здесь нам потребуются, по меньшей мере, два слоя, чтобы цветки могли надлежащим образом перекрывать друг друга. Перед вставкой цветка в общий рисунок переключаемся на нужный слой.

Наконец, на одном из имеющихся или на отдельном слое мы нарисуем черенок грозди и лист. Таким образом, у нас должна получиться гроздь из множества цветков сирени, с черенком и листом.

Рис. 538. Здесь изображена композиция, похожая, как нам кажется, на гроздь сирени

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

Рис. 539. Две грозди сирени уже образуют букет. На переднем плане показан цветок, различные варианты которого были использованы при создании общей композиции

Задание 2. Делаем кирпичную стену

Нередко возникает задача заполнения некоторой области каким-нибудь регулярным узором. Допустим, надо нарисовать кирпичную стену. В этом случае, аналогично предыдущему, все начинается с создания элементарного рисунка — кирпича.

Нарисуем кирпич. Очевидно, что это делается с помощью инструмента «Прямоугольник» (Rectangle). Если сам кирпич темный, то его контур следует сделать более светлым, чтобы в общей кладке кирпичи не сливались друге другом (и чтобы имитировался слой цемента между ними). Далее возможны несколько способов создания кирпичной кладки.

Рис. 540. Изображение кирпича

Первый способ заключается в том, чтобы копировать изображение кирпича в буфер обмена (Edit>Copy или <Ctrl> + <C>), а затем вставлять (Edit>Paste или <Ctrl>+<V>) его на рабочее поле и после масштабирования устанавливать в нужное место. Если, однако, площадь укладки велика, то эта работа потребует много времени.

Рис. 541. После масштабирования кирпич укладывается в нужное место на стене

Второй способ заключается и применении залинки растровым изображением. Для этого потребуется изображение кирпича сначала экспортировать в файл растрового формата, например, BMP. Однако при заливке изображения стены изображением кирпича из этого файла не удастся воспроизвести характерный шашечный порядок расположения кирпичей. Поэтому в качестве элемента заливки следует использовать изображение не одного кирпича, а нескольких, расположенных в двух рядах в нужном порядке. В этом случае результат заливки будет лучше. Тем не менее, псе равно потребуется коррекция результата заливки: останется закрасить некоторые участки вертикальных границ между фрагментами. Это можно сделать с помощью кисти, подобрав для нее соответствующий цвет.

Рис. 542. Элемент заливки растровым изображением

Рис. 543. Результат заливки растровым изображением фрагмента кирпичной кладки. Некоторые участки вертикальных границ между фрагментами можно закрасить кистью, подобрав соответствующий цвет

Третий способ состоит в использовании кисти, для которой в качестве цвета заливки выбрано растровое изображение. Эффект в большой степени зависит от соотношения размеров кисти и растровой картинки. Желательно, чтобы размер кисти был побольше, а растровое изображение было как можно меньше. При закрашивании кистью мы выбрали размер фрагмента кирпичной кладки 45x25 пикселов.

Рис. 544. Результат работы кистью при использовании растрового изображения в качестве цвета заливки

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

  1.  Выполнить команду File>Import (Файл>Импорт) и выбрать файл с растровым изображением, которое будет использоваться как цвет заливки.
  2.  Выполнить команду Modify>Break Apart (Модифицировать>Разделить). Растровое изображение появится на рабочем поле.
  3.  Выбрать инструмент «Пипетка» (Dropper) и щелкнуть на растровом изображении.
  4.  Выбрать нужный инструмент — «Ковш с краской» (Paint Bucket) для заливки или «Кисть» (Brush) для закраски.
  5.  Применить выбранный инструмент к графическому объекту.

Задание 3. 

Рисуем с помощью прямоугольника, который зальем черно-красно-желтым градиентом линейного типа 



3. Делаем дубликат, выбираем зеркальное отражение, применив его к дубликату. Совмещаем по картинке ниже 



4. С помощью Перо рисуем горы.



5. Снова шаг 3, чтобы горы отобразились в море зеркально 



Слой перемещаем назад 
6. Выбираем слой озера, и создаем прозрачность


7. Вот и готово отражение гор



8. Используя Перо рисуем землю



9. Добавляем пальму 



10. Пальму дублируем, трансформируем

11. Должно быть вот так



12. Беремся за Перо и рисуем лодку с отражением, которую помещаем за слой с озером 
13. Результат действия:



14. Рисуем Круг, который будет позади гор, и заливаем радиальным градиентом 



15. Продублируем солнце, уменьшив по вертикали и горизонтали. Необходимо создать несколько копий, постепенно смещая их вниз, что будет аналогом отражения в озере

Задание 4. 

Рисуем реалистичные бантики

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

1. Создав новый файл, поместите в него ваш эскиз с помощью команды. Или нарисуйте своими силами с помощью инструмента Перо

 

 

 

2. Далее, используя инструмент перо , обрисовываем по контуру основные завитки бантика, находящиеся на переднем плане и их внутреннии стороны (выделены красным цветом):

 

 

 

3. Теперь, раскрашиваем нарисованные детали. Все внешние стороны лент банта закрасьте красным цветом, а внутренние — более темным оттенком этого же красного цвета (для этого просто передвиньте B-ползунок влево, как показано на рисунке). При этом некоторые объекты могут оказаться не на своем месте, заступать другие объекты или наоборот прятаться за другими объектами. Их можно легко перемещать, выделив нужный объект и использовав сочетание Ctrl+] (переместить вперед, ближе) или Ctrl+[ (переместить назад, дальше).

 

 

4. Выделите один из красных объектов с помощью инструмента Выделения. Дальше на основе красного цвета нужно создать градиент. Для этого перетяните красный цвет из палитры "Color" поочередно в две крайние точки градиента в панели "gradient":

 

 

5. Выделите один из объектов, который вам нужно закрасить с помощью инструмента Выделения . С помощью инструмента Заливки (градиент) растяните градиент вдоль объекта, добавьте точки на градиенте и раскрасьте их, как показано на рисунке):

 

 

 

Разберем подробнее раскраску градиента. В верхней части витка будет яркий блик, поскольку эта часть банта находится снаружи, ближе всего к свету. Если бант глянцевый — он будет отражать светлые объекты и источники света вокруг него, при этом самую верхнюю часть лучше оттенить более темным цветом, чтобы избежать слияния с фоном. Чем ближе к основанию витка — тем более темным становится цвет — здесь уже не могут отражаться внешние объекты, сюда поступает меньше света и падает тень от других завитков банта. Экспериментируйте с цветами и переходами между ними на своё усмотрение, пока не получите удовлетворительный результат.

6. Выделите все объекты, которые нужно раскрасить таким же градиентом, затем щелкните пипеткойEyedropper Tool  по уже раскрашенному завитку, как показано на рисунке ниже. При этом выделенные объекты закрасятся таким-же градиентом, но направления этих градиентов не совпадают с направлениями витков.

 

 

Чтобы это исправить, протяните градиент от вершины к основанию витка инструментом Заливка (перпендикулярно к внешней грани витка). Эту процедуру нужно повторить для каждого из объектов. В результате должно получиться вот так:

 

 

7. Теперь раскрасьте выступающие края ленты по тому же принципу. За основу можно взять уже готовый градиент с витков, добавить или удалить нужные точки, передвинуть и изменить нужные цвета:

 

 

 

8. Дальше работаем с внутренними частями витков. В них не отражается внешнее окружение, поэтому количество переходов между цветами тут минимальное. Я использовал самые темные оттенки красного в местах сгиба, а более светлый — в середине витка:

 

 

9. Далее продублируем уже готовые витки на задний план и подгоняем их расположение и форму, пока не добьемся нужного результата:

 

 

10. Можно добавить немного бликов, теней для того, чтобы иллюстрация стала более детализированной, контрастной и реалистичной.

 

 

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

 

 


Дополнительное задание. 

Маг




1. DLL (англ Dynamic Link Library «библиотека динамической компоновки», «динамически подключаемая библиотека»)
2. А А205 Компьютерная графика п-гр
3. ЛАБОРАТОРНАЯ РАБОТА 1 ЭКСПЕРИМЕНТАЛЬНЫЕ ИССЛЕДОВАНИЕ АДИАБАТНОГО ИСТЕЧЕНИЯ ВОЗДУХА ЧЕРЕЗ СУЖИВАЮЩЕ
4. ОВасильєва Курс лекцій тестові завдання методичні вказівки до практичних занять та самостійної р
5. Історія України Індивідуальна навчальнодослідна робота з дисципліни Історія України включає ін
6.  Ученик в ответе указал что растения семейства мотыльковых бобовых имеют правильный пятичленный цветок м
7. Реферат- Володимир Антонович
8. 20г ФЕДЕРАЛЬНЫЙ ГОСУДАРСТВЕННЫЙ ОБРАЗОВАТЕЛЬНЫЙ СТАНДАРТ НАЧАЛЬНОГО П
9. Анализ влияния внешней и внутренней среды на принятие управленческих решений
10. Лікувальна справа Дисципліни хірургічного профілю 135 У разі отруєння барбітуратами внутрішньовенно
11. на тему- Отчет о финансовых результатах- порядок построения в отечественной и зарубежной практике
12. научных методик модернисты за недостаток внимания к укреплению роли норм в регулировании взаимодействий
13. Тема урока- Три склонения имени существительного
14. Умная оборона НАТО новые вызовы и угрозы 06
15. Заключительный этап ВМВ
16. Анестезия при гинекологических операциях
17. душой созданной им науки
18. Обеспечение производительности приложений
19. Філософія і освіта. Філософія освіти. Конспект.html
20. Реферат- Плач о пленении и о конечном разорении Московского государства