1 Программирование на языке Паскаль Тема 7. Графика

2 Система координат (0,0) (x,y)(x,y) X Y x y

3 Управление цветом Цвет и толщина линий, цвет точек: Pen ( 1, 255, 0, 0 ); Цвет и стиль заливки: Brush ( 1, 0, 255, 0 ); Цвет текста: TextColor ( 0, 0, 255 ); толщина линии R(red) R(red) G(green) G(green) B(blue) B(blue) – выключить 1 - включить 0 – выключить 1 - включить R R G G B B R R G G B B

4 Точки, отрезки и ломаные (x 1, y 1 ) (x 2, y 2 ) Pen (1, 0, 255, 0); Line (x1, y1, x2, y2); (x, y) Pen (1, 0, 0, 255); Point (x, y); Pen (1, 0, 0, 255); Point (x, y); (x 1, y 1 ) (x 2, y 2 ) (x 3, y 3 ) (x 4, y 4 ) (x 5, y 5 ) Pen (1, 255, 0, 0); MoveTo (x1, y1); LineTo (x2, y2); LineTo (x3, y3); LineTo (x4, y4); LineTo (x5, y5); Pen (1, 255, 0, 0); MoveTo (x1, y1); LineTo (x2, y2); LineTo (x3, y3); LineTo (x4, y4); LineTo (x5, y5);

5 Фигуры с заливкой (x 1, y 1 ) (x 2, y 2 ) Pen (1, 0, 0, 255); Brush (1, 255, 255, 0); Rectangle (x1, y1, x2, y2); Pen (1, 0, 0, 255); Brush (1, 255, 255, 0); Rectangle (x1, y1, x2, y2); (x 1, y 1 ) (x 2, y 2 ) Pen (1, 255, 0, 0); Brush (1, 0, 255, 0); Ellipse (x1, y1, x2, y2); Pen (1, 255, 0, 0); Brush (1, 0, 255, 0); Ellipse (x1, y1, x2, y2); Brush (1, 100, 200, 255); Fill (x, y); Brush (1, 100, 200, 255); Fill (x, y); (x, y) Как отменить заливку? ?

6 Текст TextColor (0, 0, 255); Brush (1, 255, 255, 0); Font (20, 30, 600); MoveTo (x, y); writeln ('Привет!'); TextColor (0, 0, 255); Brush (1, 255, 255, 0); Font (20, 30, 600); MoveTo (x, y); writeln ('Привет!'); Привет! (x, y) размер 10 пикселей размер 10 пикселей угол поворота угол поворота насыщенность: 400 – нормальный 600 – жирный насыщенность: 400 – нормальный 600 – жирный 30 о

7 Пример (200, 50) (100, 100) (300, 200) program qq; begin Pen(2, 255, 0, 255); Brush(1, 0, 0, 255); Rectangle(100, 100, 300, 200); MoveTo(100, 100); LineTo(200, 50); LineTo(300, 100); Brush(1, 255, 255, 0); Fill(200, 75); Pen(2, 255, 255, 255); Brush(1, 0, 255, 0); Ellipse(150, 100, 250, 200); end. program qq; begin Pen(2, 255, 0, 255); Brush(1, 0, 0, 255); Rectangle(100, 100, 300, 200); MoveTo(100, 100); LineTo(200, 50); LineTo(300, 100); Brush(1, 255, 255, 0); Fill(200, 75); Pen(2, 255, 255, 255); Brush(1, 0, 255, 0); Ellipse(150, 100, 250, 200); end.

8 Задания «4»: «Лягушка» «5»: «Корона»

9 Штриховка (x 1, y 1 ) (x 2, y 2 ) N линий (N=5) h Rectangle (x1, y1, x2, y2); Line( x1+h, y1, x1+h, y2); Line( x1+2*h, y1, x1+2*h, y2); Line( x1+3*h, y1, x1+3*h, y2);... Rectangle (x1, y1, x2, y2); h := (x2 – x1) / (N + 1); x := x1 + h; for i:=1 to N do begin Line( round(x), y1, round(x), y2); x := x + h; end; Rectangle (x1, y1, x2, y2); h := (x2 – x1) / (N + 1); x := x1 + h; for i:=1 to N do begin Line( round(x), y1, round(x), y2); x := x + h; end; var x, h: real; x x округление до ближайшего целого x x

10 Штриховка (программа) (x 1, y 1 ) (x 2, y 2 ) h program qq; var i, x1, x2, y1, y2, N: integer; h, x: real; begin x1 := 100; y1 := 100; x2 := 300; y2 := 200; N := 10; Rectangle (x1, y1, x2, y2); h := (x2 - x1) / (N + 1); x := x1 + h; for i:=1 to N do begin Line(round(x), y1, round(x), y2); x := x + h; end; end. program qq; var i, x1, x2, y1, y2, N: integer; h, x: real; begin x1 := 100; y1 := 100; x2 := 300; y2 := 200; N := 10; Rectangle (x1, y1, x2, y2); h := (x2 - x1) / (N + 1); x := x1 + h; for i:=1 to N do begin Line(round(x), y1, round(x), y2); x := x + h; end; end. N

11 Как менять цвет? (x 1, y 1 ) (x 2, y 2 ) Brush ( 1, c, c, c ); Fill ( ???, ??? ); Brush ( 1, c, c, c ); Fill ( ???, ??? ); серый: R = G = B Шаг изменения c: x (x-1, y 1 +1) hc := 255 div N; c := 0; for i:=1 to N+1 do begin Line(round(x), y1, round(x), y2); Brush(1, c, c, c ); Fill(round(x)-1, y1+1); x := x + h; c := c + hc; end; var c, hc: integer;

12 Штриховка (x 1, y 1 ) (x 2, y 2 ) (x 3, y 2 ) a h (x 3 +a, y 1 ) Line( x1+h, y1, x1+h-a, y2); Line( x1+2*h, y1, x1+2*h-a, y2); Line( x1+3*h, y1, x1+3*h-a, y2);... h := (x3 – x2) / (N + 1); a := x1 – x2; x := x1 + h; for i:=1 to N do begin Line(round(x), y1, round(x-a), y2); x := x + h; end; h := (x3 – x2) / (N + 1); a := x1 – x2; x := x1 + h; for i:=1 to N do begin Line(round(x), y1, round(x-a), y2); x := x + h; end; x x x-a

13 Штриховка (x 1, y 1 ) (x 2, y 2 ) hxhx hyhy y y x x y y Line( x1, y1+hy, x1+hx, y1+hy) ; Line( x1, y1+2*hy, x1+2*hx, y1+2*hy); Line( x1, y1+3*hy, x1+3*hx, y1+3*hy);... hx := (x2 – x1) / (N + 1); hy := (y2 – y1) / (N + 1); x := x1 + hx; y := y1 + hy; for i:=1 to N do begin Line(x1, round(y), round(x), round(y)); x := x + hx; y := y + hy; end; hx := (x2 – x1) / (N + 1); hy := (y2 – y1) / (N + 1); x := x1 + hx; y := y1 + hy; for i:=1 to N do begin Line(x1, round(y), round(x), round(y)); x := x + hx; y := y + hy; end;

14 Задания «4»: Ввести с клавиатуры число линий и построить фигуру: «5»: Ввести с клавиатуры число линий и построить фигуру:

15 Задания «4»: Ввести с клавиатуры число линий штриховки и построить фигуру, залив все области разным цветом. «5»: Ввести с клавиатуры число окружностей и построить фигуру, залив все области разным цветом.

16 Программирование на языке Паскаль Тема 8. Графики функций

17 Построение графиков функций Задача: построить график функции y = 3 sin(x ) на интервале от 0 до 2π. Анализ: максимальное значение y max = 3 при x = π/2 минимальное значение y min = -3 при x = 3 π/2 Проблема: функция задана в математической системе координат, строить надо на экране, указывая координаты в пикселях.

18 Преобразование координат (x,y)(x,y) X Y x y Математическая система координат Экранная система координат (пиксели) (xэ,yэ)(xэ,yэ) xэxэ yэyэ (0,0)(0,0) (0,0)(0,0) a b k – масштаб (длина изображения единичного отрезка на экране) x э = a + kx y э = b - ky x э = a + kx y э = b - ky

19 Программа 2π2π 2π2π h – шаг изменения x w – длина оси ОХ в пикселях на экране оси координат цикл построения графика program qq; const a = 50; b = 200; k = 50; xmin = 0; xmax = ; var x, y, h: real; xe, ye, w: integer; begin w := round((xmax - xmin)*k); Line(a-10, b, a+w, b); Line(a, 0, a, 2*b); x := xmin; h := 0.05; while x

20 Как соединить точки? Алгоритм: Если первая точка перейти в точку (x э,y э ) иначе отрезок в точку (x э,y э ) Если первая точка перейти в точку (x э,y э ) иначе отрезок в точку (x э,y э ) Программа: начальное значение выбор варианта действий логическая переменная var first: boolean;... begin... first := True; while x

21 Задания «4»: Построить график функции y = x 2 на интервале [-3,3]. «5»: Построить график функции (эллипс)

22 Программирование на языке Паскаль Тема 9. Процедуры

23 Процедуры Задача: Построить фигуру: Особенность: Три похожие фигуры. общее: размеры, угол поворота отличия: координаты, цвет Можно ли решить известными методами? ? Сколько координат надо задать? ?

24 Процедуры Процедура – это вспомогательный алгоритм, который предназначен для выполнения некоторых действий. Применение: выполнение одинаковых действий в разных местах программы разбивка программы (или другой процедуры) на подзадачи для лучшего восприятия Подзадача1Подзадача2Подзадача Задача

25 Процедуры Порядок разработки: выделить одинаковые или похожие действия (три фигуры) найти в них общее (размеры, форма, угол поворота) и отличия (координаты, цвет) отличия записать в виде неизвестных переменных, они будут параметрами процедуры (x, y) (x+100, y) (x, y-60) procedure Tr( x, y, r, g, b: integer); begin MoveTo(x, y); LineTo(x, y-60); LineTo(x+100, y); LineTo(x, y); Brush(1, r, g, b); Fill(x+20, y-20); end; заголовок MoveTo(x, y); LineTo(x, y-60); LineTo(x+100, y); LineTo(x, y); Brush(1, r, g, b); Fill(x+20, y-20); MoveTo(x, y); LineTo(x, y-60); LineTo(x+100, y); LineTo(x, y); Brush(1, r, g, b); Fill(x+20, y-20); тело процедуры координаты цвет параметры

26 Программа program qq; begin Pen(1, 255, 0, 255); Tr(100, 100, 0, 0, 255); Tr(200, 100, 0, 255, 0); Tr(200, 160, 255, 0, 0); end. program qq; begin Pen(1, 255, 0, 255); Tr(100, 100, 0, 0, 255); Tr(200, 100, 0, 255, 0); Tr(200, 160, 255, 0, 0); end. (100,100) фактические параметры вызовы процедуры procedure Tr( x, y, r, g, b: integer); begin... end; формальные параметры процедура

27 Процедуры Особенности: все процедуры расположены выше основной программы в заголовке процедуры перечисляются формальные параметры, они обозначаются именами, поскольку могут меняться при вызове процедуры в скобках указывают фактические параметры (числа или арифметические выражения) в том же порядке procedure Tr( x, y, r, g, b: integer); Tr (200, 100, 0, 255, 0); x x y y r r g g b b

28 Процедуры Особенности: для каждого формального параметра после двоеточия указывают его тип если однотипные параметры стоят рядом, их перечисляют через запятую внутри процедуры параметры используются так же, как и переменные procedure A (x: real; y: integer; z: real); procedure A (x, z: real; y, k, l: integer);

29 Процедуры Особенности: в процедуре можно объявлять дополнительные локальные переменные, остальные процедуры не имеют к ним доступа program qq; procedure A(x, y: integer); var a, b: real; begin a := (x + y)/6;... end; begin... end. procedure A(x, y: integer); var a, b: real; begin a := (x + y)/6;... end; локальные переменные var a, b: real;

30 Параметры-переменные Задача: составить процедуру, которая меняет местами значения двух переменных. Особенности: надо, чтобы изменения, сделанные в процедуре, стали известны вызывающей программе program qq; var x, y: integer; begin x := 1; y := 2; Exchange ( x, y ); writeln ( x =, x, y =, y ); end. program qq; var x, y: integer; begin x := 1; y := 2; Exchange ( x, y ); writeln ( x =, x, y =, y ); end. procedure Exchange ( a, b: integer ); var c: integer; begin c := a; a := b; b := c; end; эта процедура работает с копиями параметров x = 1 y = 2

31 Параметры-переменные Применение: таким образом процедура (и функция) может возвращать несколько значений, Запрещенные варианты вызова Exchange ( 2, 3 ); { числа } Exchange ( x+z, y+2 ); { выражения } procedure Exchange ( a, b: integer ); var c: integer; begin c := a; a := b; b := c; end; procedure Exchange ( a, b: integer ); var c: integer; begin c := a; a := b; b := c; end; var параметры могут изменяться

32 Задания «4»: Используя процедуры, построить фигуру. «5»: Используя процедуры, построить фигуру. a aa 0,866a равносторонний треугольник

33 Программирование на языке Паскаль Тема 10. Рекурсия

34 Рекурсивные объекты Рекурсивный объект – это объект, определяемый через один или несколько таких же объектов. У попа была собака, он ее любил. Она съела кусок мяса, он ее убил. В ямку закопал, надпись написал: У попа была собака, он ее любил. Она съела кусок мяса, он ее убил. В ямку закопал, надпись написал: Сказка о попе и собаке Примеры: Сказка о попе и собаке: Факториал: если Рисунок с рекурсией:

35 Дерево Пифагора Дерево Пифагора из N уровней – это ствол и отходящие от него симметрично два дерева Пифагора из N-1 уровней, такие что длина их стволов в 2 раза меньше и угол между ними равен 90 o. 6 уровней: Как доказать, что это рекурсивная фигура? ?

36 Дерево Пифагора Особенности: когда остановиться? деревья имеют различный наклон когда число оставшихся уровней станет равно нулю! (x 1, y 1 ) (x 0, y 0 ) α α+45 o α-45 o L x 1 = x 0 + L · cos(α) y 1 = y 0 – L·sin(α) x 1 = x 0 + L · cos(α) y 1 = y 0 – L·sin(α) наклон «дочерних» деревьев α + π/4 α – π/4 α + π/4 α – π/4

37 Процедура угол α длина ствола procedure Pifagor(x0, y0, a, L: real; N: integer); const k = 0.6; { изменение длины } var x1, y1: real; { локальные переменные } begin if N > 0 then begin x1 := x0 + L*cos(a); y1 := y0 - L*sin(a); Line (round(x0), round(y0), round(x1), round(y1)); Pifagor (x1, y1, a+pi/4, L*k, N-1); Pifagor (x1, y1, a-pi/4, L*k, N-1); end; рекурсивные вызовы закончить, если N=0 Рекурсивной называется процедура, вызывающая сама себя.

38 Программа program qq; procedure Pifagor(x0, y0, a, L: real; N: integer);... end; begin Pifagor (250, 400, pi/2, 150, 8); end. угол α длина ствола число уровней x0x0 x0x0 y0y0 y0y0 Как наклонить дерево влево на 30 o ? ? Pifagor (250, 400, 2*pi/3, 150, 8);

39 «4»: Используя рекурсивную процедуру, построить фигуру: «5»: Используя рекурсивную процедуру, построить фигуру: Задания

40 Программирование на языке Паскаль Тема 11. Анимация

41 Анимация Анимация (англ. animation) – оживление изображения на экране. Задача: внутри синего квадрата 400 на 400 пикселей слева направо двигается желтый квадрат 20 на 20 пикселей. Программа останавливается, если нажата клавиша Esc или квадрат дошел до границы синей области. Проблема: как изобразить перемещение объекта на экране? Привязка: состояние объекта задается координатами (x,y) Принцип анимации: 1.рисуем объект в точке (x,y) 2.задержка на несколько миллисекунд 3.стираем объект 4.изменяем координаты (x,y) 5.переходим к шагу 1

42 Как "поймать" нажатие клавиши? Событие – это изменение в состоянии какого-либо объекта или действие пользователя (нажатие на клавишу, щелчок мышкой). IsEvent – логическая функция, которая определяет, было ли какое-то действие пользователя. Event – процедура, которая определяет, какое именно событие случилось. if IsEvent then begin Event(k, x, y); if k = 1 then writeln('Клавиша с кодом ', x) else { k = 2 } writeln('Мышь: x=', x, ' y=', y); end; if IsEvent then begin Event(k, x, y); if k = 1 then writeln('Клавиша с кодом ', x) else { k = 2 } writeln('Мышь: x=', x, ' y=', y); end; var k, x, y: integer;

43 Как выйти из цикла при нажатии Esc? program qq; var stop: boolean; k,code,i: integer; begin stop := False; repeat if IsEvent then begin Event(k, code, i); if (k = 1) and (code = 27) then stop := True; end;... until stop; end. если что-то произошло... что произошло? если нажата клавиша с кодом 27 (Esc), то стоп True, если надо остановиться запуск цикла

44 Процедура (рисование и стирание) procedure Draw(x, y: integer; flag: boolean); begin if flag then Brush(1, 255, 255, 0) else Brush(1, 0, 0, 255); Rectangle(x, y, x+20, y+20); end; procedure Draw(x, y: integer; flag: boolean); begin if flag then Brush(1, 255, 255, 0) else Brush(1, 0, 0, 255); Rectangle(x, y, x+20, y+20); end; (x, y) (x+20, y+20) Идеи одна процедура рисует и стирает стереть = нарисовать цветом фона границу квадрата отключить (в основной программе) рисовать (True) или нет (False)? рисуем: цвет кисти – желтый стираем: цвет кисти – синий только заливка!

45 Полная программа program qq; var x, y, k, code, i: integer; stop: boolean; procedure Draw(x,y: integer; flag: Boolean); begin... end; begin Brush(1, 0, 0, 255); Rectangle(10, 10, 400, 400); Pen(0, 0, 0, 255); x := 10; y := 200; stop := false; repeat if IsEvent then begin... end; Draw(x, y, True); Delay(10); Draw(x, y, False); x := x + 1; if x >= then stop := true; until stop; end. процедура начальные условия выход по клавише Esc выход при касании границы синий фон ждем 10 мс отключить границу

46 «4»: Два квадрата двигаются в противоположном направлении: «5»: Два квадрата двигаются в противоположном направлении и отталкиваются от стенок синего квадрата: Задания

47 Управление клавишами Задача: жёлтый квадрат внутри синего квадрата управляется клавишами-стрелками. Коды клавиш: влево – 37вверх – 38Esc – 27 вправо – 39вниз – 40 Проблема: как изменять направление движения? Решение: if {было событие} then begin if {нажата клавиша} then begin {получить код клавиши - code} if code = 37 then x := x – 1; if code = 38 then y := y – 1; if code = 39 then x := x + 1; if code = 40 then y := y + 1; if code = 27 then stop := True; end; if {было событие} then begin if {нажата клавиша} then begin {получить код клавиши - code} if code = 37 then x := x – 1; if code = 38 then y := y – 1; if code = 39 then x := x + 1; if code = 40 then y := y + 1; if code = 27 then stop := True; end; IsEvent Event ( k, code, i); if k = 1 then begin case code of 37: x := x – 1; 38: y := y – 1; 39: x := x + 1; 40: y := y + 1; 27: stop := True; end; если было нажатие на клавишу, …

48 Программа program qq; var x, y, k, code, i: integer; stop: boolean; begin... repeat Draw(x, y, True); Delay(20); Draw(x, y, False); until stop; end. program qq; var x, y, k, code, i: integer; stop: boolean; begin... repeat Draw(x, y, True); Delay(20); Draw(x, y, False); until stop; end. procedure Draw(x,y: integer; flag: Boolean); begin... end; if IsEvent then begin... end; Что плохо? ? процедура основной цикл обработка событий

49 Как убрать мигание? Проблема: даже если не нажата никакая клавиша, квадрат перерисовывается через каждые 20 мс (мигание!) Что хочется: не перерисовать квадрат, если не было никакого события Решение: нарисовать квадрат и ждать события Новая проблема: как ждать события? Решение новой проблемы: пустой цикл "пока не случилось событие, ничего не делай": while not IsEvent do;

50 Программа program qq; var x, y, k, code, i: integer; stop: boolean; begin... repeat Draw(x, y, True); while not IsEvent do; until stop; end. program qq; var x, y, k, code, i: integer; stop: boolean; begin... repeat Draw(x, y, True); while not IsEvent do; until stop; end. procedure Draw(x,y: integer; flag: Boolean); begin... end; Draw(x, y, False); Event(k, code, i);... while not IsEvent do; процедура рисуем квадрат ждем события только теперь стираем Что можно улучшить? ?

51 «4»: Квадрат двигается при нажатии стрелок, однако не может выйти за границы синего квадрата: «5»: Квадрат непрерывно двигается, при нажатии стрелок меняет направление и отталкивается от стенок синего квадрата: Задания

52 Вращение Задача: изобразить модель вращения Земли вокруг Солнца. Проблема: движение по окружности, как изменять координаты? Решение: использовать в качестве независимой переменной (менять в цикле) угол поворота α (x 0, y 0 ) α L (x, y) x = x 0 + L · cos(α) y = y 0 – L·sin(α)

53 Процедура procedure Draw(x, y: integer; flag: boolean); const r = 10; begin if flag then Brush(1, 100, 100, 255) else Brush(1, 0, 0, 0); Ellipse(x-r, y-r, x+r, y+r); end; procedure Draw(x, y: integer; flag: boolean); const r = 10; begin if flag then Brush(1, 100, 100, 255) else Brush(1, 0, 0, 0); Ellipse(x-r, y-r, x+r, y+r); end; рисовать (True) или нет (False)? рисуем: цвет кисти – голубой стираем: цвет кисти – черный только заливка! радиус Земли (x-r, y-r) (x,y)(x,y) (x+r, y+r)

54 Константы и переменные program qq; const rSun = 60; { радиус Солнца} L = 150; { радиус орбиты Земли } x0 = 200; { координаты центра Солнца} y0 = 200; var x, y, { координаты Земли } k, code, i: integer; { для Event } a, ha: real; { угол поворота, шаг } stop: boolean; { признак остановки программы } begin... end. program qq; const rSun = 60; { радиус Солнца} L = 150; { радиус орбиты Земли } x0 = 200; { координаты центра Солнца} y0 = 200; var x, y, { координаты Земли } k, code, i: integer; { для Event } a, ha: real; { угол поворота, шаг } stop: boolean; { признак остановки программы } begin... end. procedure Draw(x, y: integer; flag: Boolean); begin... end;

55 Основная программа program qq;... begin Brush(1, 0, 0, 0); Fill(1,1); Brush(1, 255, 255, 0); Ellipse(x0-rSun, y0-rSun, x0+rSun, y0+rSun); a := 0; ha := 1*pi/180; { начальный угол, шаг 1 o за 100 мс} stop := false; Pen(0,0,0,0); { отключаем контуры } repeat x := round(x0 + L*cos(a)); y := round(y0 - L*sin(a)); Draw(x, y, True); Delay(100); Draw(x, y, False); a := a + ha; until stop; end. program qq;... begin Brush(1, 0, 0, 0); Fill(1,1); Brush(1, 255, 255, 0); Ellipse(x0-rSun, y0-rSun, x0+rSun, y0+rSun); a := 0; ha := 1*pi/180; { начальный угол, шаг 1 o за 100 мс} stop := false; Pen(0,0,0,0); { отключаем контуры } repeat x := round(x0 + L*cos(a)); y := round(y0 - L*sin(a)); Draw(x, y, True); Delay(100); Draw(x, y, False); a := a + ha; until stop; end. залить фон черным рисуем Солнце новые координаты поворот на ha ждем 100 мс if IsEvent then begin Event(k, code, i); if (k = 1) and (code = 27) then stop := true; end;

56 «4»: Изобразить модель Солнца с двумя планетами, которые вращаются в противоположные стороны: «5»: Изобразить модель системы Солнце-Земля-Луна: Задания