1 Технологии мультимедиа Москин Николай Дмитриевич доцент, к.т.н. математический факультет Петрозаводский государственный университет

2 §4 Векторная графика. Фракталы. SVG Существует два подхода к графическому моделированию: растровая и векторная графика. В растровой графике изображение моделируется с помощью массива значений пикселей. В векторной графике изображение создается из геометрических фигур, которые легко описываются с помощью математических выражений. При этом описания получаются компактными, изображения можно легко редактировать и масштабировать без потери качества.

3 Документ на графическом языке SVG Это описание красного квадрата с синими контурами: <!DOCTYPE svg PUBLIC -//W3C//DTD SVG 1.0//EN DTD/svg10.dtd> <path fill=#F8130D stroke=#E338B stroke-width=20 d=M118, 118H10V10h108V118z/>

4 Растровая и векторная графика Векторное изображение мака. Растровое изображение бабочки.

5 Аппроксимация прямой линии При визуализации векторного рисунка для задания значений пикселей в общем случае применяются записанные значения плюс общая форма описания всех классов объектов. Например, если координаты концов отрезка – (0; 1) и (12;31), можно найти координаты y, получаемых при пошаговом перемещении координаты x от 0 до 12.

6 Сглаживание (устранение контурных неровностей) а) Однопиксельная аппроксимация прямой линии. б) Сглаженная прямая линия

7 Алгоритм Ву разложения отрезка в растр со сглаживанием (1991 год)

8 Геометрические фигуры Линии и ломаные линии; Многоугольники; Окружности и эллипсы; Класс гладких кривых – кривых Безье; Текст (в некоторых компьютерных шрифтах буквы создаются из кривых Безье).

9 Кривые Безье В квадратичных кривых Безье выделяются две промежуточные точки Q 0 и Q 1 из условия, чтобы параметр t изменялся от 0 до 1.

10 Кубические кривые Безье Кубическая кривая Безье задается четырьмя точками: двумя концами (P 1 и P 4 ) и двумя направляющими точками, которые, как правило, не лежат на самой кривой (P 2 и P 3 ).

11 Схема построения кривой Безье 1. Найдем середины отрезков P 12, P 23 и P 34, соединяющих точки P 1 и P 2, P 2 и P 3, P 3 и P 4. Построим отрезки, соединяющие точки P 12 и P 23, а также P 23 и P Найдем середины P 123 и P 234, соединим их и найдем середину Q этого последнего отрезка (по построению Q будет лежать на кривой). Аналогично строим левую и правую половины кривой для точек P 1, P 12, P 123, Q и Q, P 234, P 34, P 4 и т.д.

12 Кривые Безье, построенные с другим порядком вершин На рисунках изображены кривые, построенные с помощью того же набора контрольных точек, но в другом порядке. P 1, P 2, P 4, P 3 P 2, P 1, P 4, P 3

13 Траектории а) Открытая траектория. б) Замкнутая траектория. Набор прямых и кривых называется траекторией. У открытых траекторий есть конечные точки, у замкнутых траекторий таких точек нет. Каждая отдельно взятая кривая или прямая линия называется сегментом траектории.

14 Типы соединений 1. Фацетное соединение 2. Скругленное соединение 3. Фаска

15 Соединение двух кривых Безье На рисунках точка P 4 является общей и точки P 3, P 4, P 5 лежат на одной прямой.

16 Штриховка и заполнение Строго говоря, траектория – это абстрактный математический объект, поскольку точки бесконечно малы, траектория должна быть бесконечно тонкой. Увидеть траекторию можно двумя способами: либо применить к траектории штриховку, либо рассматривать траекторию как контуры геометрической фигуры и заполнить ее сплошным цветом (или более сложными структурами: узорами и градиентами цвета).

17 Градиентное заполнение 1. Линейный градиент. Данный тип закрашивания характеризуется постепенным переходом от одного цвета или оттенка к другому. 2. Радиальный градиент. Состоит в изменении цвета в направлении от центральной точки к границам геометрической фигуры.

18 Преобразования Векторное изображение можно преобразовать несколькими способами: Простая геометрическая фигура. 1. Смещение фигуры (x+ Δ x ; y+Δ y ).

19 Преобразования 2. Зеркальное отражение геометрической фигуры. Чтобы зеркально отразить точку (x; y) относительно оси OX, ее следует переместить в (x; -y), а относительно оси OY – в точку (-x; y).

20 Преобразования 3. Поворот геометрической фигуры. Чтобы повернуть точку (x; y) вокруг начала координат в направлении по часовой стрелке на угол φ, ее следует преобразовать в точку (x·cos φ – y·sin φ; x·sin φ+y·cos φ).

21 Преобразования 4. Изменение масштаба геометрической фигуры. Выполняется путем умножения значений координат x и y на соответствующие величины (s x x; s y y). Если значение s меньше 1, это приведет к уменьшению объекта.

22 Преобразования 5. Сдвиг (изменение углов наклона осей объекта). Такое преобразование выполняется путем изменения значения точки (x; y) на (x+y·tg β; y+x·tg β).

23 Фракталы Фрактал (лат. fractus – дробленый, состоящий из фрагментов) – это геометрическая фигура, обладающая свойством самоподобия, т. е. составленная из нескольких частей, каждая из которых подобна всей фигуре в целом. Термин был предложен Б. Мандельбротом в 1975 году (книга «Фрактальная геометрия природы»).

24 Виды фракталов Классификация по способу построения, предложенная Калге в 1988 г.: Геометрические фракталы (наиболее наглядные, с них началась история фракталов в XIX веке); Алгебраические фракталы; Стохастические фракталы.

25 Кривая Коха Кривая Коха – это фрактальная кривая, описанная в 1904 году шведским математиком Хельге фон Кохом.

26 «Снежинка» Коха

27 «Снежинка» Коха Исходная фигура (ломаная линия) называется аттрактором или генератором. Геометрическими парадоксами снежинки Коха являются ее бесконечная длина и то, что к любой точке этого фрактала невозможно провести касательную.

28 Кривая Минковского

29 Итеративные системы функций К геометрическим фракталам также относят фракталы, получаемые с помощью «итеративных систем функций» (Iterated Function System), например папоротник Барнсли, ковер Серпинского, дерево Пифа- гора, квадрат Кантора, губка Менгера и т. д. Итеративные системы функций также используются во фрактальной компрессии изображений.

30 Треугольник и ковер Серпинского

31 Дерево Пифагора (угол 45°)

32 Обдуваемое ветром дерево Пифагора (другой угол)

33 Папоротник Барнсли и кривая дракона (Хартера-Хейтуэя)

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

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

36 Множества Жюлиа

37 Стохастические фракталы Фракталы, при построении которых в итеративной системе случайным образом изменяются какие-либо параметры, называются стохастическими. В технологиях мультимедиа при получении изображений деревьев, кустов, горной местности или береговой линии в фракталы добавляют случайные возмущения, повышающие реалистичность синтезируемых объектов.

38 Фрактальная форма цветной капусты

39 SVG SVG (Scalable Vector Graphics – масштабируемая векторная графика) язык разметки, созданный Консорциумом Всемирной паутины (W3C), предназначенный для описания двухмерной векторной и смешанной векторно/растровой графики в формате XML.

40 Создание SVG-документов SVG понимает три типа графических объектов: формы векторной графики (например, траектории, состоящие из прямых и кривых линий), изображения и текст. SVG-документы можно создать путем экспортирования из программы типа Adobe Illustrator (при этом в диалоговом окне лучше отключить опцию Preserve Illustrator Editing Capabilities).

41 Пример (1) <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" " /DTD/svg10.dtd"> <rect x="120" y="120" width="126" height="126" fill="lime" stroke="magenta" stroke-width="4" />

42 Пример (1)

43 Прямоугольники Имя элемента АтрибутПримечание rectx Координаты верхнего левого угла y width Ширина и высота height rx Радиусы скругленных углов ry

44 Окружности Имя элемента АтрибутПримечание circlecx Координаты центра cy r Радиус

45 Эллипсы Имя элемента АтрибутПримечание ellipsecx Координаты центра cy rx Радиусы x и y ry

46 Линии Имя элемента АтрибутПримечание linex1Координаты конечных точек y1 x2 y2

47 Ломаные линии и многоугольники Имя элемента АтрибутПримечание polylinepoints Список точек polygonpoints Список точек Атрибуты points вмещают последовательность координат, разделенных пробелами, запятыми или и тем, и другим.

48 Пример (2) <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" " /DTD/svg10.dtd"> <polygon points="50,10 66,10, 76,27 66,42 50,42 40,25" fill="#697FBA" stroke="none" /> <polyline points="40,25 1,50 50,99 99,50 76,27" stroke="#99A6CF" stroke-linejoin="round" stroke-linecap="round" fill="none" />

49 Пример (2)

50 Траектории Траекторию можно задать с помощью элемента path: <path fill=none stroke=#99A6CF stroke-linecap=round stroke-linejoin=round d=M40,25 l-39,25 l49,49 l49-49 l /> M (move to) указывает на координаты точки x и y, в которой начинается траектория; L (line) рисует прямые отрезки до точки (x, y). При использовании l указывается смещение.

51 Кривые Безье C: после C указывается шесть координат x 2, y 2, x 3, y 3, x 4, y 4. Это положения направляющих точек P 2 =(x 2, y 2 ) и P 3 =(x 3, y 3 ) и конца сегмента кривой Безье P 4 =(x 4, y 4 ). Для объединения сегментов кривых в гладкую траекторию используется команда S: S: после S указываются четыре координаты P 3 =(x 3, y 3 ) и P 4 =(x 4, y 4 ). Пропущенная направляющая точка P 2 считается равной второй направляющей точке предыдущего сегмента кривой, отраженного относительно текущей точки.

52 Гладкое соединение кривых Безье.

53 Штрих и заполнение Атрибуты stroke и fill задают цвет штриха и заполнение. Свойство stroke-width – толщина штриха. SVG поддерживает линейные и радиаль- ные градиенты, которые вызываются при помощи элементов LinearGradient и RadialGradient.

54 Пример (3)

55 Пример (3)

56 Пример (4)

57 Пример (4)

58 Преобразования С помощью атрибута transform, который можно использовать с любым графическим элементом, можно задать следующие преобразования: Translate (в скобках указывается перемещение по оси x и y):

59 Преобразования Scale (в скобках указываются коэффициенты горизонтального и вертикального масштаби- рования). Rotate (в скобках указываются угол поворота в градусах, координаты x и y центра вращения). SkewX и skewY (в скобках указывается угол сдвига в градусах):

60 Текст Строки текста, которые внедряются в документ SVG, вносятся в элемент text. <text x=0 y=0 font-family=Officina-Sans font- size=7 font-style=italic font-weight=bold fill=#F67155> Текст в SVG

61 Анимация в SVG Любой элемент может содержать элемент animate с несколькими атрибутами, задающий, как его значения должны меняться со временем: <animate attributeName=fill values=#697FBA; #F67155; #697FBA dur=2s calcMode=discrete repeatCount=indefinite />