Конспекты уроков по графике в Pascal

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

Пример 3.

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

PROGRAM Primer_3;

uses Graph;

var Gd,Gm: Integer;

BEGIN

Gd:=VGA; Gm:=VGAHi; InitGraph (Gd,Gm,'..\bgi');

If GraphResult=grOk

then begin

SetColor (LightMagenta); { Цвет - светло-сиреневый }

Line (120,210,520,210); { Горизонтальный отрезок }

SetColor (LightCyan); { Цвет - светло-циановый }

Line (120,210,320,10); { Левый катет }

Set Color (Green); { Цвет - зеленый }

Line (320,10,520,210); { Правый катет }

ReadLn

end

END.

Пример 4 (самостоятельное выполнение)

Разноцветные лучи.

PROGRAM Primer_4;

uses Graph;

const CenterX=320;

CenterY=240;

Radius=200;

var Gd,Gm: Integer;

i : Integer;

dx,dy: Integer;

BEGIN

Gd:=VGA; Gm:=VGAHi; InitGraph (Gd,Gm,'..\bgi');

If GraphResult=grOk

then begin

For i:=0 to 160 do

begin

dx:=Round (Radius*sin(i*pi/80));

dy:=Round (Radius*cos(i*pi/80));

SetColor (i MOD 16);

Line(CenterX,CenterY,CenterX+dx,CenterY+dy)

end;

ReadLn

end

END.

Пример 5

Концентрические окружности.

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

PROGRAM Primer_5;

uses Graph;

const CenterX=320;

[pic] [pic] CenterY=240;

[pic] var Gd,Gm: Integer;

i : Integer;

BEGIN

Gd:=VGA; Gm:=VGAHi; InitGraph (Gd,Gm,'..\bgi');

If GraphResult=grOk

then begin

For i:=0 to 23 do

Circle (CenterX,CenterY,i*10);

ReadLn

end

END.

5. Задание классу: Составить программу с использованием операторов изображения линии, окружности, точки.

6. Домашнее задание: Составить программу для построения семейства разноцветных, случайным образом расположенных секторов окружностей. (Sector (x,y),StAngle,EndAngle,Xradius,Yradius);

Урок 2

ТЕМА: Использование в программах процедур и функций для построения простейших графических изображений.

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

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

ПРОГРАММНАЯ ПОДДЕРЖКА язык программирования Паскаль (версия 7.0)

ОБОРУДОВАНИЕ: компьютерная презентация

Тип урока: изучения нового материала

Ход урока

1. Организационный момент

2. Актуализация опорных знаний

Фронтальный опрос:

1. Как подключить библиотеку графических процедур?

2. Что необходимо для установки графического режима?

3. Как задать на экране положение того, что мы рисуем?

4. Можно ли в программах на построение изображений использовать операторы языка программирования Паскаль? (перечислить базовые структуры языка программирования Паскаль)

5. Каким графическим оператором можно отобразить точку, линию, окружность (овал)?

6. Каким оператором можно изменить цвет фона, цвет изображения?

7. Можно ли в программах использовать штриховку?

3. Изучение нового материала

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

Пример 1.

Построить изображение

[pic] [pic]

[pic]

[pic]

[pic]

PROGRAM Primer_1;

uses Graph;

var grDriver: Integer;

grMode : Integer;

i,x,y : Integer;

{ ----------------------------------- }

PROCEDURE Rect (x,y,x1,y1: Integer);

{ Рисует прямоугольник, у которого левый нижний угол }

{ имеет координаты (x,y), а правый верхний - (x1,y1) }

BEGIN

Line (x,y,x,y1); { Левая сторона }

Line (x1,y,x1,y1); { Правая сторона }

Line (x,y1,x1,y1); { Верхняя сторона }

Line (x,y,x1,y) { Нижняя сторона }

END;

{ --- }

BEGIN

GrDriver:=VGA; GrMode:=VGAHi;

InitGraph (grDriver,grMode,'..\bgi');

If GraphResult=grOk

then begin

For i:=1 to 15 do

begin

x:=i*30; y:=i*25; SetColor (i);

Rect (x,y,x+50,y+60)

end;

ReadLn

end

END.

Рисование прямоугольников - часто встречающаяся проблема, и поэтому неудивительно, что существует стандартная процедура, работающая так же, как и созданная нами ниже процедура Rect. Она называется Rectangle.

Пример 2.

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

Для рисования "заполненных" прямоугольников используется процедура Bar. Так же, как и для процедуры Rectangle, мы должны указать четыре числа - координаты двух противоположных углов прямоугольника. (Для процедуры Bar цвет задается не с помощью SetColor, а с помощью SetFillStyle!).

PROGRAM Primer_8;

uses Graph;

const Step=35;

var grDriver: Integer;

grMode : Integer;

i,x,y : Integer;

{ ------------------------------- }

PROCEDURE Square (x,y: Integer);

{ Рисует цветастый квадрат, центр которого }

{ имеет координаты (x,y) }

var i,d: Integer;

BEGIN

For i:=15 downto 0 do

begin

SetFillStyle (SolidFill,i); d:=i*3+2;

Bar (x-d,y-d,x+d,y+d)

end

END;

{ --- }

BEGIN

GrDriver:=VGA; grMode:=VGAHi;

InitGraph (grDriver,grMode,'..\bgi');

If GraphResult=grOk

then begin

For i:=0 to 10 do

{ На "побочной" диагонали - 11 точек }

begin

x:=50+i*Step; y:=50+(10-i)*Step;

SetColor(i); Square(x,y)

end;

ReadLn

end

END.

При рисовании сложных изображений, содержащих много отрезков, возникает проблема - вычислять координаты всех точек. Если использовать процедуру LineRel, то достаточно указывать смещения по обеим координатам относительно текущей точки. Для относительного перемещения без рисования используется процедура MoveRel Для задания начальных значений координат текущей точки используется процедура MoveTo

4. Самостоятельная работа

Задание

(средний уровень учебных достижений)

Построить программу, которая в центре экрана вычерчивает треугольник красной линией.

(достаточный уровень учебных достижений)

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

(высокий уровень)

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

program tr; {Программа вычерчивает в центре экрана треугольник красной линией}
  uses crt, graph;
var d, m: integer; pp:array[1..4] of PointType;
      xm,ym, xmaxD4, ymaxD4:word;
begin
  d:=detect;
  Initgraph(d,m,‘c:\bp’);
xm:=GetmaxX;
  ym:=GetmaxY;
  xmaxD4:=xm div 4;
  ymaxD4:=ym div 4; {определение координат вершин}
  pp[1].x:= xmaxD4;
  pp[1].y:= ymaxD4;
  pp[2].x:= xm - xmaxD4;
  pp[2].y:= ymaxD4;
  pp[3].x:= xm div 2;
  pp[3].y:= ym - ymaxD4;
  pp[4]:=pp[1];
  SetColor(4); {цвет для вычерчивания}
  DrawPoly(4,pp); {4 – количество пересечений +1}
  readln;
  CloseGraph
end.

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

FillPoly(a:word,var PolyPoints);

Значения параметров те же, что и в процедуре DrawPоly. Действие тоже аналогично, но фон внутри многоугольника закрашивается.

Изображение в левой верхней части экрана четырехугольную звезду зеленого цвета:

program g;
  uses crt, graph;
  const Star:array[1..18] of integer = (75, 0, 100, 50, 150, 75, 100, 100, 75, 150, 50, 100, 0, 75, 50, 50, 75, 0);
  var d, m: integer;
begin
  d:=detect;
  initgraph(d, m,‘c:\bp’);
  SetFillStyle(1,2);
  FillPoly(9,Star); {9 – количество пересечений + 1}
  CloseGraph;
end.

Квадратная спираль.

PROGRAM Primer_9;

uses Graph;

const CenterX=320;

CenterY=240;

d=12;

var grDriver: Integer;

grMode : Integer;

i,L : Integer;

{ ------------------------------- }

PROCEDURE Vitok (L,dL: Integer);

{ Начиная от текущей точки, рисует виток спирали }

{ из четырех отрезков увеличивающейся длины }

{ L - длина первого отрезка }

{ dL - приращение длины для каждого из следующих отрезков }

BEGIN

LineRel (L,0); { Сдвинуться вправо }

LineRel (0,-(L+dL)); { Сдвинуться вверх }

LineRel (-(L+2*dL),0); { Сдвинуться влево }

LineRel (0,L+3*dL); { Сдвинуться вниз }

END;

{ --- }

BEGIN

grDriver:=VGA; grMode:=VGAHi;

InitGraph (grDriver,grMode,'..\bgi');

If GraphResult=grOk

then begin

{ Сделать текущей точкой центр экрана }

MoveTo (CenterX,CenterY);

L:=1; { Начальная длина отрезка }

For i:=1 to 10 do { 10 витков спирали }

begin Vitok (L,d); L:=L+4*d end;

ReadLn

end

END.

Домашнее задание:

(средний и достаточный уровень)

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

(высокий уровень)

Составить программу изображения маленького городка (использовать штриховку).

Урок 3.

ТЕМА: Использование в программах процедур и функций для построения простейших графических изображений.

Цели: Продолжить изучение графических операторов, научить строить графики функций.

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

актуализировать знания по описанию графических операций, введению в программу процедур и функций;

изучить правила ввода в программу графических процедур построения графиков функций;

учить составлять программы самостоятельно;

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

воспитывать аккуратность в работе.

ПРОГРАММНАЯ ПОДДЕРЖКА язык программирования Паскаль (версия 7.0)

ОБОРУДОВАНИЕ: компьютерная презентация

Тип урока: изучения и закрепление материала

Ход урока

1. 1. Организационный момент

   2. Актуализация опорных знаний

Проверку домашнего задания проведем в форме ответа на тест.

1.  Что будет изображено на экране в результате выполнения команды ARC(140,180,0,180,90)

1. верхняя полуокружность.

2. нижняя полуокружность.

3. окружность.*

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

1. LINE(X1,Y1)-(X2 Y2).

2. LINETO(X1,Y1,X2,Y2).

3. LINE(X1,Y1,X2,Y2).*

3. Процедура  FLOODFILL(X,Y,С) позволяет...

1. установить стиль штриховки.

2. установить цвет изображения.

3. заштриховать замкнутую область.*

4. В какую точку будет переведен указатель после выполнения команд: MOVETO(20,50);MOVEREL(140,50)

1. (160,50).

2. (140,50).

3. (160,100).*

5. Укажите процедуру изображения окружности

1. RECTANGLE(x1,y1,x2,y2).

2. CIRCLE(X,Y,R). *

3. ARC(X,Y,f1,f2,R).

6. Что будет изображено на экране в результате выполнения команд: MOVETO(80,50); LINEREL(60,0); LINEREL(0,40); LINEREL(-60,0); LINEREL(0,-40);

1. прямоугольник. *

2. ломанная.

3. трапеция.

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

1. CLEARDEVICE  .

2. INITGRAPH . *

3. CLOSEGRAPH.

8. Какая процедура позволяет установить стиль линии?

1. SETFILLSTYLE.

2. SETLINESTYLE. *

3. SETCOLOR.

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

1. PUTPIXEL(X,Y,С).

2. PUTPIXEL(X,Y).

3. PIXEL(X,Y,С).*

10. Процедура SETBKCOLOR(с) позволяет...

1. установить цвет изображения.

2. установить цвет фона. *

3. закрасить фигуру.

1. 3. Изучение нового материала

Мини-лекция

Построение графиков функций

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

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

Рисунок получается маленьким, поэтому требуется увеличить масштаб изображения. Если для функции будет использован весь экран, надо увеличить рисунок по x и по y в зависимости от выбранного экрана.

Выбрать масштаб увеличения можно следующим образом:

- определить горизонтальный и вертикальный размеры графика (для этого вводятся границы области значений и определяются максимальное и минимальное значение функции на заданной области определения, затем вычисляются разности максимального и минимального значений аргументов и функции, которые и являются горизонтальным и вертикальным размерами графика соответственно);

- определить масштаб (сначала определяются масштабы изображения по горизонтали и вертикали с учетом размеров выбранного экрана по формуле:

масштаб(г/в) = размер экрана (по г/в) / размер графика (по г/в)

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

Пример.  Построить график функции y=x²

Вариант 1

program f;
   uses graph;
   var d, m: integer;
       x,y: real;
begin
   d:=detect;
   initgraph(d, m, ‘c:\ bp’);
   SetColor(5);
   Line(0, 240, 640, 240);
   Line(320, 0, 320, 480);
   x:=-20;
   While x<=20 do
     begin
         y:=-Sqr(x);
         PutPixel(x*5 + 320, y*5 +240, 15);
         x:=x+ 0.01;
         end;
end.

Вариант 2
program f;
  uses graph, crt;
  var d, m: integer;
         x, y, mx, my, m,x1, x2, y1, y2,h: real;

function f(x:real): real;
   begin
      f:= Sqr(x);
   end;
   clrscr; Write(‘Введите границы отрезка’);
   Read(x1, x2);
   y1:=f(x1);
   y2:=f(x2);
   mx:=640/(x2 –x1);
   my:=480/ (y2 – y1); If mx< my Then m:=mx
   else m:= my;
   h:=1/m; x:=x1;
   d:=detect;
   initgraph(d, m, ‘c:/ bp’);
   SetColor(5);
   Line(0, 240, 640, 240);
   Line(320, 0, 320, 480);
   While x<= x2 do
begin
   y:=-f(x);
   PutPixel(x*m +320, y*m +240, 15);
   x:=x+ h;
end;
end.

Рассмотрим построение графика функции, заданной параметрически. В отличие от функции, заданной в явном виде y=f(x), параметр х в этом случае также является функцией, зависящей от некоторого значения.

Пример (самостоятельное выполнение)

Построить график функции (кардиоида) x = a cos t ( 1+ cos t),

Подсказка - фрагмент программы:
SetColor(5);
Line(0, 240, 640, 240);
Line(320, 0, 320, 480);
t:=0;
a:=3;
While t<= 3.1415 do
begin
x:=a*cos(t)*(1+cos(t));
y:=- a*sin(t)*(1+cos(t));
PutPixel(x*5+320, y*5 +240, 15);
t:=t+ 0.01;
end;

Урок 4.

ТЕМА: Практическая работа «Создание программ для построения графических изображений»

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

Оборудование: компьютеры, среда программирования Pascal.

Тип урока: Практическая работа.

Ход урока.

И. Организация класса.

(Приветствие, вступительное слово учителя).

ІІ. Актуализация опорных знаний, умений, навыков учеников.

• Какой вид «координатной сетки» экрана монитора?

• Как перейти к графическому режиму работы монитора?

• Какие процедуры и функции используются для построения изображения линий и фигур?

ІІІ. Объявление темы, цели, задач урока.

IV. Выполнение практической работы

(Выполнить практическую работу согласно указаниям, одно задача по 3 балла.)

1. Построить треугольник с вершинами в точках (100,100), (150,100), (80,70). Цвет фона серый, цвет линий - красный.

2. Построить прямоугольник с вершинами в точках (80,80), (170,80), (170,150), (80,150). Зарисовать его желтым цветом, цвет фона - синий.

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

4. Построить и зарисовать зеленым цветом круг радиусом 100, центр которого совпадает с центром экрану дисплея. Цвет фона - малиновый.

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

VІ. Сообщение домашнего задания.

(Выполнить и записать на дискету графическое изображение на свободную тему)