МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РОССИЙСКОЙ ФЕДЕРАЦИИ федеральное государственное бюджетное образовательное учреждение

высшего профессионального образования «УЛЬЯНОВСКИЙ ГОСУДАРСТВЕННЫЙ ТЕХНИЧЕСКИЙ УНИВЕРСИТЕТ»

В. В. Воронина

КОМПЬЮТЕРНАЯ ГРАФИКА

Методические указания к лабораторным работам для студентов направлений 230700.62 «Прикладная информатика»,

231000.62«Программная инженерия»

Ульяновск УлГТУ 2014

УДК 004.92 (076) ББК 32.973.26-018 я7 В 75

Рецензент доцент кафедры «Вычислительная техника» УлГТУ,

канд. техн. наук К. В. Святов. Одобрено секцией методических пособий научно-

методического совета университета

Воронина, В. В. Компьютерная графика : методические указания к лабо-

раторным работам / В. В. Воронина. – Ульяновск : УлГТУ, 2014. – 37 с.

Представлены задания и теоретический материал для выполнения лабораторных работ по дисциплине «Компьютерная графика».

Методические указания предназначены для студентов направления 230700.62 «Прикладная информатика», профиль «Прикладная информатика в экономике», и студентов направления 231000.62 «Программная инженерия», а также студентов других направлений, изучающих дисциплину «Компьютерная графика».

Работа подготовлена на кафедре «Информационные системы».

УДК 004.92 (076) ББК 32.973.26-018 я7

© Воронина В. В., 2014. © Оформление. УлГТУ, 2014.

В 75

3

СОДЕРЖАНИЕ

ВВЕДЕНИЕ ................................................................................................ 4 

ЛАБОРАТОРНАЯ РАБОТА №1. ВЕКТОРНАЯ ГРАФИКА ................ 5 

ЛАБОРАТОРНАЯ РАБОТА №2. ФРАКТАЛЬНАЯ ГРАФИКА ........ 16 

ЛАБОРАТОРНАЯ РАБОТА №3. РАСТРОВАЯ ГРАФИКА ............... 24 

БИБЛИОГРАФИЧЕСКИЙ СПИСОК .................................................... 37 

4

ВВЕДЕНИЕ

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

– представление изображения в ЭВМ; – визуализация изображения; – создание изображения; – модификация изображения. Компьютерная графика применяется в различных областях.

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

Цель данных методических указаний – познакомить студентов с разными видами графики с точки зрения представления изображений в ЭВМ.

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

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

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

5

ЛАБОРАТОРНАЯ РАБОТА №1. ВЕКТОРНАЯ ГРАФИКА

Цели лабораторной работы

1. Познакомиться с таким понятием, как векторная графика, основными ее достоинствами и недостатками.

2. Изучить возможности технологии GDI+ для создания статических и динамических векторных изображений.

3. Разработать программу на языке C#.

Теоретический материал

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

Эту графику часто называют объектно-ориентированной, так как в ее основе лежат примитивные объекты, такие как окружности, линии, сферы, кубы и тому подобное, и на их основе создаются более сложные объекты, образуя своего рода иерархическое дерево.

Любая векторная иллюстрация, то есть сама картинка, – это верхний уровень иерархии.

Ниже идут объекты, представляющие собой разнообразные векторные формы.

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

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

Самый нижний уровень иерархии образуют основные элементы векторных изображений: узлы и отрезки линий, их соединяющие.

Таким образом, упрощенную иерархию векторного изображения можно представить следующим образом (рис. 1).

6

Рис. 1. Иерархия векторного изображения

Информация о любом объекте в векторной графике хранится в

описательной форме. Например, окружность будет храниться следующим образом:

число, соответствующее координате х центра окружности; число, соответствующее координате у центра окружности; величина радиуса окружности; цвет и толщина контура; цвет и характер заливки (при ее наличии).

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

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

Так как информация об объекте хранится в описательной форме, то можно легко изменять параметры объекта, и такие операции, как перемещение, масштабирование, вращение,

7

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

недостатками: Некоторые объекты не могут быть представлены в векторном

виде, так как для их изображения может потребоваться большое количество объектов высокой сложности, что, в свою очередь, повлечет рост объемов требуемой памяти и времени отображения картинки.

Сложность преобразования растрового изображения в векторное.

Сложность масштабирования картинок с низким разрешением. Множество технологий обладает возможностями работы с

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

GDI (Graphics Device Interface, Graphical Device Interface) является интерфейсом Windows, предназначенным для представления графических объектов и вывод их на монитор или принтер. Он отвечает за отрисовку линий, кривых, отображение шрифтов и обработку палитры и обеспечивает унификацию работы с различными устройствами вместо прямого доступа к оборудованию, что позволяет одними и теми же функциями рисовать на различных устройствах, получая при этом практически одинаковые изображения.

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

На базе технологии GDI была разработана GDI+. Это улучшенная среда для 2D-графики, расширенная возможностями сглаживания линий, использования координат с плавающей точкой, градиентной заливки, использованием ARGB-цветов и т. п. Рассмотрим основные возможности для работы с этой технологией, предоставляемые C#.

В рамках данной лабораторной работы мы освоим технику рисования картинок в оперативной памяти с последующим выводом их на форму. Для рисования мы будем использовать объект класса Bitmap, а для вывода на форму – элемент управления PictureBox.

8

Рассмотрим написание простейшего приложения, когда по нажатию на кнопку на форме будет отображаться красный кружок. Для этого создаем новый проект типа WindowsFormsApplication и размещаем на форме PictureBox и Button. Переходим к методу обработки нажатия на кнопку. В нем нам нужно, во-первых, создать объект класса Bitmap, с размерами, совпадающими с нашим PictureBox. В данном случае Bitmap выполняет роль холста, а PictureBox – рамки, в которую этот холст повесят. Поэтому размеры должны совпадать. В итоге получаем код:

Bitmap bmp = new Bitmap(pictureBox1.Width, pictureBox1.Height); Теперь мы должны создать объект класса Graphics – основного

класса, предоставляющего доступ к возможностям GDI+. Для данного класса не определено ни одного конструктора. Его объект создается в ходе выполнения ряда методов применительно к конкретным объектам, у которых есть поверхность для рисования. Одним из таких объектов и является Bitmap. Поэтому создаем объект класса Graphics следующим образом:

Graphics gr = Graphics.FromImage(bmp);

Теперь все вызовы методов отображения фигур будут отрабатывать на нашей битовой карте. Класс Graphics содержит множество методов рисования вида Fill* или Draw*, отвечающих за отображение закрашенных или не закрашенных фигур. Первая группа методов в качестве одного из параметров принимает объект типа Brush (кисть), а вторая – объект типа Pen (карандаш). Исключение – метод DrawString, который отображает текст. Этот метод в качестве одного из параметров принимает объект Brush. Для того чтобы отобразить красный круг, как мы задумали ранее, необходимо написать следующий код:

gr.FillEllipse(Brushes.Red,10,10,40,40);

Обратите внимание, что координаты 10,10 – это не координаты центра эллипса, а координаты левого верхнего угла прямоугольника, в который будет вписан эллипс. Brushes.Red – стандартная красная кисточка. 40,40 – высота и ширина эллипса. Если вы сейчас запустите приложение и нажмете на кнопку, то ничего не произойдет. Вернее, эллипс будет нарисован, но мы его не увидим, так как сейчас он

9

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

pictureBox1.Image = bmp; В итоге на экране вы должны увидеть примерно следующее

(рис. 2):

Рис. 2. Красный круг

Рисование в технологии GDI+ осуществляется слоями, которые

перекрывают друг друга, поэтому если мы напишем вот такой код:

gr.FillEllipse(Brushes.Red,10,10,40,40); gr.FillEllipse(Brushes.Green,10,10,40,40); ,

то на форме увидим только зеленый круг. Теперь рассмотрим способы создания различных кисточек. Во-

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

Random r=new Random();

SolidBrush sb=new SolidBrush(Color.FromArgb(r.Next(0,255), r.Next(0,255), r.Next(0,255), r.Next(0,255)));

Метод FromArgb принимает в качестве параметров 4 числа,

кодирующих цвет в системе ARGB: A (альфа) – прозрачность; R (red) – красный цвет; G (green) – зеленый цвет; В (blue) – синий цвет.

10

Для создания кисточек с более интересными характеристиками необходимо подключить namespace System.Drawing.Drawing2D. Рассмотрим создание градиентной кисти. Напишем следующий код:

LinearGradientBrush gradientBrush =

new LinearGradientBrush(new Point(0, 0),new Point(40, 40), Color.Green, Color.Blue);

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

Следующая кисть, которую мы рассмотрим, – штриховая. Создается она следующим образом:

HatchBrush hatchBrush = new HatchBrush(HatchStyle.Cross,

Color.Red, Color.Yellow);

Первый параметр конструктора задает вид штриховки. Это системное перечисление с множеством вариантов. Второй параметр отвечает за цвет штрихов, а третий – цвет фона.

При использовании этой кисти в рисовании нашего круга, мы получим следующий результат (рис. 3):

Рис. 3. Штрихованный круг

11

Теперь рассмотрим создание карандашей. Их можно создавать на основе цвета или на основе ранее созданной кисти. Можно указывать толщину линии, а также форму ее конечной точки (только для незамкнутых контуров) и прочее. Ниже приведен код для создания различных карандашей:

Pen p1=new Pen(Color.Red); // Обычное красное перо Pen p2=new Pen(Color.Green, 4); // Ширина 4 пикселя

p2.EndCap = LineCap.ArrowAnchor; //Стрелочка на конце Pen p3=new Pen(gradientBrush, 6); // Градиент Pen p4=new Pen(hatchBrush, 6); // Штриховка

Для вывода текста необходимо использовать метод DrawString,

принимающий в качестве параметров строку, которую нужно вывести, объект класса Font, кисть и координаты вывода. Конструктор класса Font, в свою очередь, принимает название и размер шрифта. Приведем код вывода надписи «Hello, world!»:

gr.DrawString(“Hello, world!”, new Fonr(“Arial”,15),hatchBrush,20,20);

Мы рассмотрели методы вывода различных векторных

примитивов. Теперь рассмотрим методы их преобразования: перенос; поворот; масштабирование; сдвиг.

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

Перенос – это линейное перемещение объекта, при котором размер и ориентация не меняются. Напишем код отрисовки красного обведенного контуром прямоугольника, затем вызовем метод переноса и повторим код:

gr.FillRectangle(Brushes.Red, 10, 10, 20, 40);

gr.DrawRectangle(p2, 10, 10, 20, 40); gr.TranslateTransform(20, 20);

gr.FillRectangle(Brushes.Red, 10, 10, 20, 40); gr.DrawRectangle(p2, 10, 10, 20, 40);

12

В итоге на экране вы должны увидеть примерно следующее (рис. 4):

Рис. 4. Трансформация «Перенос» Метод TranslateTransform принимает в качестве параметров

величины переноса по обеим осям. По сути он сдвигает начало координат для отрисовки объекта.

Поворот – это изменение угла отрисовки объекта относительно начала координат. Величина поворота задается в радианах. Код данной трансформации следующий:

gr.FillRectangle(Brushes.Red,50, 50, 20, 40);

gr.DrawRectangle(p2, 50, 50, 20, 40); gr.RotateTransform(20);

gr.FillRectangle(Brushes.Red, 50, 50, 20, 40); gr.DrawRectangle(p2, 50, 50, 20, 40);

Обратите внимание, что поворот выполняется не относительно

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

13

Рис. 5. Трансформация «Поворот»

Масштабирование – это изменение размеров объекта по обеим осям. Увеличим наш прямоугольник в два раза в высоту и ширину:

gr.FillRectangle(Brushes.Red,10, 10, 20, 40);

gr.DrawRectangle(p2, 10, 10, 20, 40); gr.ScaleTransform(2,2);

gr.FillRectangle(Brushes.Red, 10, 10, 20, 40); gr.DrawRectangle(p2, 10, 10, 20, 40);

В итоге у вас на форме должно появиться следующее (рис. 6):

Рис. 6. Трансформация «Масштабирование»

Сдвиг – практически произвольное искажение объекта. Для него не существует какого-то отдельного метода. В данном случае необходимо напрямую задавать матрицу трансформации:

14

gr.FillRectangle(Brushes.Red,10, 10, 20, 40); gr.DrawRectangle(p2, 10, 10, 20, 40);

Matrix matrix = new Matrix(); matrix.Shear(0.5f, 0.25f);

gr.Transform = matrix; gr.FillRectangle(Brushes.Red, 10, 10, 20, 40);

gr.DrawRectangle(p2, 10, 10, 20, 40); В итоге на экране должна получиться следующая картинка

(рис. 7):

Рис. 7. Трансформация «Сдвиг»

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

Задание на лабораторную работу

Разработать графическую систему, работающую в двух

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

15

№ варианта Объект для первого режима

Направление движения для второго режима

Первый фоновый объект для второго режима

Второй фоновый объект для второго режима

1. Рыбка Слева направо

Куст водорослей

Груда камней

2. Паровоз Справа налево

Дом Дерево

3. Грузовик

По диагонали слева

направо

Дерево Знак

«Главная дорога»

4. Пароход Слева направо

Айсберг Остров с деревом

5. Легковой автомобиль

Слева направо

Лиственное дерево

Ель

6. Парашютист Сверху вниз Солнце Облако

7. Ракета Снизу вверхВоздушный

шар Облако

8. Парусник Слева направо

Облако Айсберг

9. Самолет По

диагонали снизу вверх

Дом Облако

10. Летающая тарелка

Сверху вниз Луна Дом

Контрольные вопросы к лабораторной работе №1

1. Дайте определение векторной графики. 2. Расскажите об областях применения векторной графики. 3. Перечислите основные достоинства векторной графики. 4. Перечислите основные недостатки векторной графики. 5. Перечислите основные возможности технологии GDI+ для работы с векторной графикой.

16

ЛАБОРАТОРНАЯ РАБОТА №2. ФРАКТАЛЬНАЯ ГРАФИКА

Цели лабораторной работы

1. Познакомиться с такими понятиями, как фрактал и фрактальная графика.

2. Изучить основные виды фракталов и способы их построения. 3. Разработать программу на языке C#.

Теоретический материал

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

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

Фракталы можно разделить на три вида: геометрические; алгебраические; стохастические.

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

17

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

На рис. 8 приведена так называемая «Кривая дракона», построенная указанным способом.

Рис. 8. Кривая дракона Упрощенный алгоритм построения данного фрактала

средствами GDI+ можно описать следующим образом:

18

1. Разместить на форме PictureBox и Button. 2. Определить функциональный метод, возвращающий объект

класса Bitmap. 3. Внутри метода создать объект Bitmap и объект Graphics,

настроенный на него. 4. Определить граничные точки, на основе которых будет

строиться фрактал и количество итераций (обозначим его k). 5. Определить рекурсивный метод, принимающий координаты

указанных точек, количество итераций и объект класса Graphics.

6. Внутри метода, если количество итераций равно 0, нарисовать линию от начальной точки до конечной. Иначе определить временную переменную tx и рассчитать ее значение по формуле (x1+x2)/2+(y2-y1)/2. Где x1,y1,x2,y2 координаты первой и второй точек соответственно. Здесь же определить переменную ty и рассчитать ее значение как: (y1+y2)/2-(x2-x1)/2. Дважды вызвать рекурсивный метод. Первый раз с параметрами x2,y2,tx,ty,k-1, второй раз с параметрами x1,y1,tx,ty,k-1.

7. Внутри кнопки свойству Image объекта pictureBox присвоить результат работы метода, объявленного на шаге 2.

К подобным геометрическим фракталам также относятся: кривая Леви. Строится по тому же алгоритму, только

вызовы рекурсивной функции в шаге 6 происходят с параметрами x1, y1, tx, ty,k-1 и tx, ty, x2, y2, k-1;

кривая Коха (снежинка Коха). Шестой шаг рассмотренного алгоритма для построения данного фрактала меняется следующим образом. Внутри метода, если количество итераций равно 0, нарисовать линию от начальной точки до конечной. Иначе определить временные переменные и рассчитать их значения по формулам: tx1 = x1 + (x2 – x1) × 1/3; ty1 = y1 + (y2 – y1) × 1/3; tx2 = x1 + (x2 – x1) × 2/3; ty2 = y1 + (y2 – y1) × 2/3; cos60 = 0.5;

19

sin60 = -0.866; tx3 = tx1 + (tx2 – tx1) × cos60 - sin60 × (ty2 – ty1); ty3 = ty1 + (tx2 – tx1) × sin60 + cos60 × (ty2 – ty1); Затем вызвать четыре раза рекурсивный метод с параметрами:

1. x1, y1, tx1, ty1, k - 1; 2. tx1, ty1, tx3, ty3, k - 1; 3. tx3, ty3, tx2, ty2, k - 1; 4. tx2, ty2, x2, y2, k - 1;

кривая Минковского. В шестом шаге определение

дополнительных переменных имеют вид: xb = x1 + (x2 – x1) × 1/4; yb = y1 + (y2 - y1) × 1/4; xe = x1 + (x2 – x1) × 2/4; ye = y1 + (y2 – y1) × 2/4; xh = x1 + (x2 – x1) × 3/4; yh = y1 + (y2 – y1) × 3/4; cos90 = 0; sin90 = -1; xc = xb + (xe - xb) × cos90 - sin90 × (ye - yb); yc = yb + (xe - xb) × sin90 + cos90 × (ye - yb); xd = xc + (xe - xb); yd = yc + (ye - yb); sin90 = 1; xf = xe + (xh - xe) × cos90 - sin90 × (yh - ye); yf = ye + (xh - xe) × sin90 + cos90 × (yh - ye); xg = xf + (xh - xe); yg = yf + (yh - ye); Рекурсия вызывается со следующими параметрами:

1. x1, y1, xb, yb, k - 1; 2. xb, yb, xc, yc, k - 1; 3. xc, yc, xd, yd, k - 1; 4. xd, yd, xe, ye, k - 1; 5. xe, ye, xf, yf, k - 1; 6. xf, yf, xg, yg, k - 1; 7. xg, yg, xh, yh, k - 1; 8. xh, yh, x2, y2, k - 1;

20

Некоторые геометрические фракталы могут быть рассмотрены как неподвижные точки сжимающих отображений. Под сжимающим отображением в данном случае понимается отображение метрического пространства в себя, уменьшающее расстояние между любыми двумя точками в несколько раз. Пример такого фрактала – треугольник Серпинского, строящийся на основе правильных треугольников и на каждом шаге сжимающий изображение предыдущего шага в 2 раза. На рис. 9 представлены изображения этого треугольника на 1, 2, 3 и 5 шагах.

Рис. 9. Треугольник Серпинского

Теперь перейдем к алгебраическим фракталам. Свое название они

получили потому, что строятся на основе алгебраических формул. Классический алгебраический фрактал – множество Мандельброта. Функционально оно определяется как Zn+1=Zn×Zn+C. Тогда суть алгоритма будет в следующем: для всех точек на комплексной плоскости в интервале от –2+2i до 2+2i выполняем некоторое достаточно большое количество раз Zn=Z0×Z0+C, каждый раз проверяя абсолютное значение Zn. Если это значение больше 2, что рисуем точку с цветом, равным номеру итерации, на котором абсолютное значение превысило 2, иначе

21

рисуем точку черного цвета. В итоге получим изображение, представленное на рис. 10.

Рис. 10. Множество Мандельброта

Если мы рассчитаем Z0=a+bi, а С присвоим произвольные значения, то получим множество Жюлиа. Таким образом, меняя функцию, условия выхода из цикла, можно получать другие фракталы.

Для построения данного множества векторных возможностей технологии GDI+ будет недостаточно. Здесь необходимо напрямую работать пикселями картинки. Для этого используется метод SetPixel, который в качестве параметров принимает координаты пикселя и его цвет. Этот метод вызывается непосредственно у объекта класса Bitmap.

22

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

Рис. 11. Плазменный фрактал

Введя в алгоритм формирования фрактала такие харак-теристики, как зернистость, редкость и разрешение, мы можем менять получаемое изображение. Редкость – влияет на то, как часто будут появляться зоны с не основным цветом. Чем меньше значение – тем чаще. Зернистость – отвечает за само построение фрактала: чем больше значение, тем больше будет углубляться алгоритм (то есть будут появляться «маленькие» зоны с не основным цветом). Разрешение – размер картинки в пикселях. Чтобы получить хорошую картинку, разрешение нужно установить не меньше 128, иначе картинка просто не сможет отразить зернистость.

23

Задание на лабораторную работу Используя возможности технологии GDI+, разработать программу,

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

Вариант

№ Название фрактала

1. Кривая Коха. 2. Кривая Минковского. 3. Кривая Леви. 4. Кривая дракона. 5. Треугольник Серпинского. 6. Плазменный фрактал. 7. Множество Мандельброта. 8. Кривая Пеано. 9. Множество Жюлиа. 10. Множество Кантора.

Контрольные вопросы к лабораторной работе №2

1. Дайте определение фракталу. 2. Перечислите основные виды фракталов. 3. Расскажите алгоритм построения кривой дракона. 4. Расскажите алгоритм построения множества Мандельброта. 5. Расскажите алгоритм построения плазменного фрактала.

24

ЛАБОРАТОРНАЯ РАБОТА №3. РАСТРОВАЯ ГРАФИКА

Цели лабораторной работы

1. Познакомиться с таким понятием, как растровая графика, ее достоинствами и недостатками.

2. Изучить основные возможности пакета GIMP для работы с растровой графикой.

3. Выполнить преобразования растровых изображений с помощью пакета GIMP.

Теоретический материал

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

Как было сказано выше, в данном виде графики изображение представляется в виде матрицы фиксированного размера, которая состоит из пикселей – точек с определенными геометрическими и цветовыми параметрами.

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

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

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

25

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

С ростом популярности социальных сетей работу с растровой графикой в плане обработки своих фотографий освоили практически все. В настоящее время существует множество программ, позволяющих это делать. Одной из таких является GIMP. На самом деле это мощный профессиональный графический редактор, для которого разработано множество вспомогательных программ. Аббревиатура GIMP расшифровывается как GNU Image Manipulation Program, что означает «Открытое программное обеспечение для обработки изображений». Он был создан в 1995 году Спенсером Кимбеллом и Питером Маттисом как дипломный проект, а после и до настоящего момента поддерживается группой добровольцев.

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

В рамках данной лабораторной работы наша задача познакомиться с возможностями создания коллажей и наложением простейших эффектов на изображение средствами GIMP. Для начала рассмотрим некоторые понятия.

Слой – это виртуальный лист, содержащий какое-либо изображение. Если создать несколько слоев с прозрачным фоном, разместить на каждом какой-то объект и наложить слои друг на друга, получится коллаж. Если же фон будет непрозрачный, то верхний слой перекроет все нижние. В GIMP каждое новое изображение имеет в своей основе один фоновый слой (или просто фон). Он может быть прозрачным или нет. Прозрачный фон GIMP изображает шашечной закраской. Окно работы со слоями изображено на рис. 12. Все действия, которые вы выполняете, применяются к текущему или активному слою. Если в вашем изображении несколько слоев, то текущий выделяется цветом. Чтобы сделать какой-то слой текущим, необходимо щелкнуть мышью по его названию в окне слоев. Как мы видим, данное окно содержит четырнадцать важных элементов. Ниже будет рассмотрен каждый из них.

26

Рис. 12. Окно работы со слоями

Обратим внимание сначала на кнопки, расположенные в нижней

части окна. Самая первая – добавление нового слоя. При совершении этого действия новый слой появляется выше активного.

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

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

27

работать с остальным изображением, нужно «прикрепить» этот слой к прежде активному.

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

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

Десятый элемент отображает заголовок слоя. В нем обычно помещается краткое описание расположенного там изображения. Это ускоряет поиск нужного слоя при большом их количестве.

Одиннадцатый элемент содержит миниатюру изображения, что тоже облегчает поиск.

Двенадцатый элемент отвечает за прозрачность слоя. На рис. 13 представлены изображения со значениями непрозрачность в 100% и 50%.

Рис. 13. Манипуляция с прозрачностью изображения

Тринадцатый элемент позволяет накладывать простейшие

эффекты на текущий слой, манипулируя режимом его отображения. Если мы применим этот эффект к однослойному изображению, то

28

ничего не увидим. Так как основное влияние он оказывает на то, как будет виден слой, лежащий за текущим. Проиллюстрируем это.

Пусть в непрозрачное изображение с рис. 13 добавлен новый слой, который будет расположен сверху (рис. 14). Обратите внимание, что его изображение по размеру чуть меньше, чем изображение нижнего слоя.

Рис. 14. Добавленное изображение

Удостоверимся, что новый слой активный, и изменим режим

его отображения на «Осветление». В итоге получим результат, представленный на рис. 15. Если же применим режим отображения «Затемнение», то получим результат, представленный на рис. 16.

29

Рис. 15. Осветление

Рис. 16. Затемнение

30

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

Теперь рассмотрим панель инструментов GIMP. Ее вид представлен на рис. 17. Активный инструмент выделяется прямо-угольником (на представленном рисунке это инструмент «Текст»), а ниже, на вкладке «Параметры инструментов», отображаются настройки, относящиеся к текущему инструменту.

  

Рис. 17. Окно инструментов

31

Мы не будем подробно останавливаться на каждом элементе этой панели, а лишь кратко опишем каждый из них по порядку их расположения на панели слева направо сверху вниз.

Итак, GIMP предлагает следующие инструменты. 1. Прямоугольное выделение используется для выделения

прямоугольных областей изображения. 2. Эллиптическое выделение используется для выделения

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

областей произвольной формы. 4. Выделение смежных областей используется для выделения

областей изображения в зависимости от цвета. 5. Выделение по цвету используется для выделения областей

со схожей заливкой. 6. Умные ножницы используются для выделения области на

основе цветовых границ. 7. Выделение переднего плана используется для выделения

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

8. Контуры используются для создания и правки контуров. 9. Пипетка используется для получения цвета из

изображения. 10. Лупа используется для изменения масштаба отображения. 11. Измеритель используется для измерения расстояний и

углов. 12. Перемещение используется для перемещения слоев,

выделений и объектов. 13. Выравнивание используется для выравнивания слоев и

других объектов. 14. Кадрирование используется для отсечения частей

изображения. 15. Вращение используется для поворота слоев, выделений

или контуров. 16. Масштаб используется для масштабирования слоев,

выделенных областей или контуров. 17. Искривление используется для искривления слоев,

выделенных областей или контуров. 18. Перспектива используется для изменения перспективы

слоя, выделенной области или контура.

32

19. Зеркало используется для горизонтального или вертикального отражение слоя, выделенной области или контура.

20. Трансформация по рамке используется для деформации выделения по заданной рамке.

21. Текст используется для создания и редактирования текстовых слоев.

22. Плоская заливка используется для закраски заданной области изображения цветом переднего плана или текстурой, в зависимости от выбранного в параметрах инструмента типа заливки.

23. Градиент используется для заливки цветным градиентом. 24. Карандаш используется для рисования резкими штрихами. 25. Кисть используется для рисования плавными штрихами. 26. Ластик используется для стирания до фона. 27. Аэрограф используется для нанесения на изображение

цветовых пятен с неоднородными краями. 28. Перо используется для каллиграфического рисования. 29. Штамп используется для выборочного копирования из

изображения или текстуры с помощью кисти. 30. Лечебная кисть используется для исправления дефектов в

изображении. 31. Штамп по перспективе используется для применения

инструмента «Штамп» с учетом перспективы. 32. Резкость или размывание используется для выборочного

размытия или увеличения резкости кистью. 33. Размазывание используется для выборочного размазывания

кистью. 34. Осветление/Затемнение используется для выборочного

осветления/затемнения кистью. Теперь рассмотрим наложение более сложных эффектов на

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

В GIMP фильтры разбиты на несколько категорий. Их список представлен на рис. 18.

33

Рис. 18. Список фильтров

Как мы видим, фильтров в GIMP очень много, и описание каждого займет много времени, поэтому кратко охарактеризуем только сами категории и в качестве примера рассмотрим применение одного фильтра.

В GIMP представлены следующие виды фильтров. 1. Размывание – предоставляет возможность сделать

изображение размытым. 2. Улучшение – применяется для устранения таких дефектов,

как пыль, шум и недостаточная четкость. 3. Искажение – позволяет трансформировать изображение

различными способами. 4. Свет и тень – фильтры, отвечающие за световые эффекты. 5. Шум – позволяет добавить шум к изображению. 6. Выделения края – позволяют найти контуры объектов. 7. Общие – позволяют с помощью задания матрицы свертки

создавать пользовательские эффекты. 8. Объединение – позволяет различными способами соединять

изображения.

34

9. Имитация – позволяет имитировать такие эффекты, как живопись маслом, плетение, комикс, кубизм и т. д.

10. Декорация – добавляет к изображению эффекты типа рамки, пятен кофе и т. д.

11. Карта – на основе одного изображения создает трехмерный рельеф для другого.

12. Визуализация – позволяет создать текстуры с нуля. 13. Веб – предоставляет возможность подготовки изображения

для публикации в сети Интернет. 14. Анимация – позволяет создать некоторые анимационные

эффекты. В качестве примера рассмотрим применение фильтра «Вихрь и

щипок». Окно настройки его параметров изображено на рис. 19, а результат применения – на рис. 20.

Рис. 19. Параметры фильтра «Вихрь и щипок»

35

Рис. 20. Применение фильтра «Вихрь и щипок»

При работе с изображениями метод проб и ошибок неизбежен. Но, к счастью, GIMP записывает все действия в «Историю действий». Ее окно представлено на рис. 21.

Рис. 21. Окно истории действий

Благодаря этому окошку вы всегда можете отменить как минимум несколько последних действий.

36

Задание на лабораторную работу Используя возможности редактора GIMP, разработать макет

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

 Вариант

№ Тема плаката

1. День Победы 2. День программиста 3. Первое мая 4. Новый год 5. День десантника 6. Помощь животным 7. Помощь детям 8. Восьмое марта 9. Двадцать третье февраля 10. Первое апреля

 Контрольные вопросы к лабораторной работе №3

1. Дайте определение растровой графики. 2. Расскажите об областях применения растровой графики. 3. Перечислите основные достоинства растровой графики. 4. Перечислите основные недостатки растровой графики. 5. Перечислите основные возможности редактора GIMP для работы с растровой графикой.

37

БИБЛИОГРАФИЧЕСКИЙ СПИСОК

1. Ватсон, Б. С# 4.0 на примерах / Б. Ватсон. – СПб. : БХВ-

Петербург, 2011. – 608 с. : ил.

2. Шишкин, В. В. Графический растровый редактор Gimp :

учебное пособие / В. В. Шишкин, О. Ю. Шишкина, З. В. Степчева. –

Ульяновск : УлГТУ, 2010. – 119 с.

3. Материалы свободной энциклопедии «Википедиа». –

http://ru.wikipedia.org/wiki/ (режим доступа – свободный, дата

обращения: 28.04.2014)

Учебное электронное издание

ВОРОНИНА Валерия Вадимовна

КОМПЬЮТЕРНАЯ ГРАФИКА

Методические указания к лабораторным работам

Редактор А. В. Ганина

Объем данных 7,18 Мб. ЭИ № 302. Заказ 912.

Ульяновский государственный технический университет, ИПК «Венец» 432027, г. Ульяновск, ул. Сев. Венец, д. 32.

Тел.: (8422) 778-113. E-mail: venec@ulstu.ru

http://www.venec.ulstu.ru