Модуль 6 Графика на языке программирования Паскаль

МОДУЛЬ 6_Блок № 1

Тема урока:

ГРАФИКА

Цель занятия:

1. .Сформировать понятия о графических примитивах

2. Познакомиться со структурой графической программы и её операторами

Графические примитивы

1. Заполните пропуски, тем самым логически завершив краткое введение в тему.

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

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

2. Структура графической программы

Графический режим характеризуется количеством точек по вертикальной и горизонтальной осям экрана. Начало системы координат, т.е. точка с координатами (0,0), расположена в верхнем левом углу экрана. Последняя точка находится в нижнем правом углу.

(0,0) 640

(320,240)

480

(639,479)

Графическая программа имеет следующую структуру:

(запишите вместе с учителем смысл каждого нового элемента программы)

Program Grafika;

Uses graph;

Var gd,gm: integer; gd:

gm:

Begin

Gd:=Detect;

Gm:=0;

InitGraph(gd,gm,’’);

readln;

CloseGraph;

End.

3. Оператор PutPixel

Отдельный пиксель можно “зажечь” заданным цветом командой PutPixel(X,Y,C)

Формат команды: сначала указываются координаты точки, а затем, номер цвета точки.

Пример 1. Изобразить на экране три точки в виде светофора.

PutPixel (240, 100, 4); точка ______________ цвета

PutPixel (240, 120, 14); точка ______________ цвета

PutPixel (_____, _____, 2); точка ______________ цвета

Пример 2. Нарисовать в центре экрана синий крест.

PutPixel (_____, ______, 1);

PutPixel (_____, ______, 1);

PutPixel (_____, ______, 1);

PutPixel (_____, ______, 1);

PutPixel (_____, ______, 1);

4. Прямые линии – отрезки

Оператор Line предназначен для рисования отрезка, соединяющего две произвольные точки экрана.

Формат:

Line (X1,Y1,X2,Y2)

X1,Y1 - координаты начала отрезка, X2,Y2 - координаты конца отрезка

Например:

Line (10,10,100,165) будет нарисован отрезок от точки с координатами 10,10 до точки с координатами 100,165.

Line (_____, _______, _____, _______) Line (_____, _______, _____, _______)

5. Рисование прямоугольников

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

Формат:

Rectangle(X1,Y1,X2,Y2)

X1, Y1 – координаты левой верхней вершины прямоугольника

X2, Y2 – координаты правой нижней вершины прямоугольника

Пример 1. Нарисовать несколько вложенных прямоугольников. (подпишите координаты точек)

Rectangle (10,10,200,200);

Rectangle (20,20,190,190);

Rectangle (_____, _______,_____, _______)

Rectangle (_____, _______,_____, _______)

Задания (выполняются с расчетом на отдельном листке координат ключевых точек):

1. Нарисовать домик; 3. Нарисовать елочку;

2. Нарисовать робота; 4. Нарисовать пятиконечную звезду;

Домик: Звезда:

Rectangle (_____, _______,_____, _______); Line (_____, _______, _____, _______);

Rectangle (_____, _______,_____, _______); Line (_____, _______, _____, _______);

Line (_____, _______, _____, _______); Line (_____, _______, _____, _______);

Line (_____, _______, _____, _______); Line (_____, _______, _____, _______);

Line (_____, _______, _____, _______);

Елочка: Line (_____, _______, _____, _______);

Line (_____, _______, _____, _______); Line (_____, _______, _____, _______);

Line (_____, _______, _____, _______); Line (_____, _______, _____, _______);

Line (_____, _______, _____, _______); Line (_____, _______, _____, _______);

Line (_____, _______, _____, _______); Line (_____, _______, _____, _______);

Line (_____, _______, _____, _______);

Line (_____, _______, _____, _______); Робот:

Line (_____, _______, _____, _______); Rectangle (_____, _______,_____, ______);

Line (_____, _______, _____, _______); Rectangle (_____, _______,_____, ______);

Line (_____, _______, _____, _______); Rectangle (_____, _______,_____, ______);

Rectangle (_____, _______,_____, _______); Rectangle (_____, _______,_____, ______);

МОДУЛЬ 6_Блок № 2

Тема урока:

. ГРАФИКА

. Повторение материала.

Квадрат в центре экрана

Rectangle(___, ____, ____, ____);

Треугольник в правой нижней части экрана

Line(600, 300, ____, ____); Line ( ___, ____ ,____, ____);

Line (___, ____,600, 300);

Найдите ошибки в программе и запишите верно:

IntGrapf(gd,gm,’’);

PutPixzel(320,200,6);

Line(140,630,160,640);

Rectangl(200,100,300,200);

Rectangl(300;200;400;300)

2. Операторы SetColor и SetBkColor

Способность монитора воспроизводить 16 цветов позволяет выбрать цвет рисования и цвет фона.

Формат:

SetColor(C) С-цвет символов SetBkColor(F)

F-цвет фона

Таблица. Коды и соответствующие цвета.

3. Оператор Circle

С помощью оператора Circle можно нарисовать окружность.

Формат: Circle(X,Y,R)

X,Y – координаты центра окружности R – радиус окружности

4. Оператор Ellipse

С помощью оператора Ellipse можно нарисовать эллипс.

Формат: Ellipse(X,Y,N,K,XR,YR)

X,Y – координаты центра эллипса XR, YR – радиусы эллипса по осям

N – начальная точка дуги;

K – конечная точка дуги;

5. Оператор Arc

С помощью оператора Arc можно нарисовать дугу окружности.

Формат: Arc(X,Y,N,K,R)

X,Y – координаты центра окружности

R – радиус окружности

N – начальная точка дуги;

K – конечная точка дуги;

5. Оператор PieSlice

С помощью оператора PieSlice можно нарисовать сектор окружности.

Формат: PieSlice(X,Y,N,K,R)

X,Y – координаты центра окружности

R – радиус окружности

N – начальная точка сектора;

K – конечная точка сектора;

Как видно из форматов записи операторов для рисования дуг окружности и эллипса, а также сектора окружности необходимо добавить значения параметров начальной и конечной точек. Значения параметров начальной и конечной точек задаются в радианах и должны иметь значения между 0 и 2π радиан (2π =6.28). При рисовании дуг отсчет идет от начальной точки и до конечной в направлении против часовой стрелки.

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

90⁰ /2

60⁰ - ______ радиан 210⁰ - ______ радиан

45⁰ - ___ ___ радиан 225⁰ - ______ радиан

30⁰ - _____ радиан 240⁰ - _____ радиан

120⁰ - _____ радиан 300⁰ - _____радиан

135⁰ - _____ радиан 315⁰ - ______ радиан

150⁰ - ______ радиан 330⁰ - _____ радиан

180⁰ 0/360⁰

 0/2

2/3 270⁰

Пример 1:

Circle (100,100, 30);

Arc (180,100, 1 , 2, 30);

PieSlice (260,100, 2 , 1, 30);

Пример 2:

Ellipse (100,100, 0, 6.28, 30, 30);

Ellipse (180,100, 0, 6.28, 30 , 9);

Ellipse (260,100, 0, 6.28, 30 , 45);

Задание. Проставьте на рисунке все значения,

использованные в операторах

Задание. «Разберите» программу и напишите, за что отвечает каждый из операторов

Circle (100,100,70); _________________________

Ellipse (75,75, 0, 360, 10, 5);

Ellipse (125,75, 0, 360, 10, 5) ;

Ellipse (100,100, 0, 360, 5, 10);

Line (100,40, 90,60);

Line (100,40,110,60);

Line (100,40,100,60);

Arc (100,110, 90, 0, 20);

Задания:

1. Нарисовать гриб;

2. Нарисовать зонтик;

3. Нарисовать снежную бабу;

ГРАФИКА

Модуль 6 блок 3.

1. Повторение материала.

Найдите ошибки в записи программы:

Program graphomania;

var gd,gm: integer;

begin

` dg:=Detect;

dm:=1;

InitGraf(gd,gm,’’)

Line(140,630,160,640);

Rectangl(200,100,300,200);

Rectangl(300;200;400;300)

Circkle(120,100,30,12);

Arc(460,120,180,400,80);

Ellipse(720,60,0,400,60,20); Elippse(620,60,0,360,80,40); PieSlise(450,150,0,120,50);

readln;

CloseGraph;

end.

2. Закрашивание областей

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

1 шаг – выбор цвета и способа закрашивания

Формат:

SetFillStyle(S,C) S – стиль (способ закрашивания) С - цвет закрашивания

Стили закрашивания:

0 – сплошное закрашивание цветом фона (определяется оператором __________________)

1 – сплошное закрашивание цветом рисования (определяется оператором _____________)

2 шаг – использование операторов закрашивания и построения закрашенных областей

2.1. Оператор FloodFill

С помощью оператора FloodFill можно закрасить любую произвольную область.

Формат: FloodFill(X,Y,С)

X,Y – координаты точки внутри области С – цвет границы

Пример: нарисовать знак запрета проезда («кирпич»)

Цвет границы не должен совпадать с цветом закрашивания и наоборот!!!

SetColor(5); ________________________________________

Circle (320,240,100); ________________________________________

Rectangle(250,220,390,260); ________________________________________

SetFillStyle(1,red); ________________________________________

FloodFill(320,200,5); ________________________________________

SetFillStyle(1,white); ________________________________________

FloodFill(320,240,5); ________________________________________

2.2. Оператор Bar

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

Формат: Bar(X1,Y1,X2,Y2)

X1,Y1, X2, Y2 – координаты начала и конца диагонали соответственно

2.3. Оператор FillEllipse

С помощью оператора FillEllipse можно нарисовать закрашенный эллипс или круг.

Формат: FillEllipse(X,Y, XR,YR)

X,Y – координаты центра XR, YR - радиусы

Используя операторы Bar и FillEllipse можно записать нашу программу в следующем виде:

SetColor(___);

SetFillStyle(____, ______);

FillEllipse(_____, ______, ______, ______);

SetFillStyle(____, ______);

Bar(_____, ______, ______, ______);

Задание: используя операторы построения и закрашивания создать следующую картинку

«Разноцветная мишень»: (цвета для закрашивания от края к центру – серый, белый, желтый,