
Алгоритмы и программирование
§ 40 . Компьютерная графика
§ 41 . Графические примитивы
§ 42 . Вспомогательные алгоритмы
§ 43 . Применение циклов
§ 44 . Анимация
§ 45 . Управление с помощью клавиатуры

Алгоритмы и программирование
§ 40 . Компьютерная графика

Графический режим монитора
Холст – это прямоугольная область экрана, доступная для рисования.
( 0 , 0)
X
O
y
A ( x,y )
x
!
Холст – это растровый рисунок!
?
Почему сверху вниз?
Y
3

3
Исполнитель Рисователь
Задача – нарисовать что-то на холсте не с помощью мыши, а управляя исполнителем.
?
Какие команды умеет выполнять Рисователь?
Как управлять?
Первая программа :
использовать Рисователь
алг Холст
нач
новый лист( 500 , 400 , белый )
кон
программа (алгоритм)
аргументы
новый лист
начало
команда Рисователя
конец

Команда «новый лист»
использовать Рисователь
алг Холст
нач
новый лист ( 500 , 400 , белый )
кон
ширина
высота
цвет
белый, чёрный, серый, фиолетовый, синий, голубой, зелёный, жёлтый, оранжевый, красный

Управление пикселями
?
Что значит «управлять пикселем»?
аргументы (данные для работы)
пиксель ( 10 , 20 , синий )
x
y
цвет
( x,y )
?
Как рисовать отрезок?

Отрезок
10
1 5
X
O
(10,20)
(1 5 ,20)
Y
20
пиксель ( 10 , 20 , синий )
пиксель ( 1 1 , 20 , синий )
пиксель ( 1 2 , 20 , синий )
пиксель ( 1 3 , 20 , синий )
пиксель ( 1 4 , 20 , синий )
пиксель ( 1 5 , 20 , синий )
?
Как сократить?
для X от 10 до 15
пиксель ( X , 20 , синий )
X – переменная (изменяемая величина)

7
Отрезок
Цикл – это многократное выполнение одинаковых действий.
X – целая величина
присвоить X значение 10
цел X
X:= 10
нц пока X 15
пиксель( X , 20 , синий )
X:= X + 1
кц
тело цикла
начало цикла
пиксель ( X , 20 , синий )
X:= X + 1
присвоить X значение X+1
конец цикла
→ 13 → …
→ 12
10 → 11
?
16
При каком X остановится цикл?

Когда остановится цикл?
выполняется до тех пор, пока условие не станет ложным
цел X
X:= 10
нц пока X 15
пиксель ( X , 20 , синий )
X:= X + 1
кц
X 15
это цикл с условием
?
При каком X остановится цикл?
16

Ещё один цикл
цикл по переменной
цел X
нц X от 10 до 15
пиксель ( X , 20 , синий )
кц
блок-схема
начало
!
X автоматически увеличится на 1 после каждого повторения!
X:=10,15
тело цикла
конец

Что дальше?
?
Как нарисовать вертикальный отрезок?
?
… наклонный? в чём сложность?
?
… окружность?

Алгоритмы и программирование
§ 41 . Графические примитивы

Что такое графический примитив?
Графический примитив — это элемент рисунка, который добавляется с помощью одной команды.
- пиксель
- линия
- прямоугольник
- окружность

Линия (=отрезок)
линия ( 10 , 20 , 15 , 20 )
одна команда заменяет цикл
( x , y ) первой точки
( x , y ) второй точки
цел X
нц X от 10 до 15
пиксель ( X , 20 , синий )
кц
?
Какие вопросы возникли?

Линия
толщина линии ( px )
цвет сохраняется, пока не сменят
цвет
перо ( 1 , синий )
линия ( 10 , 20 , 15 , 20 )
линия ( 15 , 20 , 15 , 30 )
линия ( 15 , 30 , 10 , 30 )
линия ( 10 , 30 , 10 , 20 )
?
Что это?
(1 5 ,20)
(10,20)
?
Какого цвета остальные линии?
10
5
(15,30)
(10,30)

Прямоугольник
кисть ( прозрачный )
только рамка
перо ( 1 , синий )
кисть ( красный )
прямоугольник ( 20 , 10 , 40 , 30 )
цвет заливки
( x , y ) левого верхнего угла
( x , y ) правого нижнего угла
(20,10)
(40,10)
2 0
?
Координаты остальных углов? размеры?
20
(20,30)
(40,30)

Окружность
?
Какие данные нужны?
20
перо ( 1 , синий )
кисть ( красный )
окружность ( 50 , 30 , 20 )
(50,30)
радиус
( x , y ) центра

Ломаная
(30,10)
?
Из каких примитивов состоит?
линия ( 20 , 30 , 30 , 10 )
линия ( 30 , 10 , 40 , 30 )
линия ( 40 , 30 , 20 , 30 )
( 4 0,30)
(20,30)
или так
в точку ( 20 , 30 )
линия в точку ( 30 , 10 )
линия в точку ( 40 , 30 )
линия в точку ( 20 , 30 )
?
Что лучше?

Заливка области
кисть ( оранжевый )
залить ( 50 , 60 )
(50,60)
- можно начать с любой точки внутри области
- заливаются все соседние пиксели одного цвета
- заливка прекращается на границе другого цвета
?
Если линия не замкнута?

Пример
1 1 0
O
X
70
120
3 0
100
20
40
?
Из каких фигур?
3 0
?
В каком порядке рисовать?
8 0
?
Координаты углов прямоугольников?
130
Y

20
Пример
алг Беседка
нач
новый лист ( 200 , 200 , белый ) | 1
перо ( 1 , черный ) | 2
кисть ( серый ) | 3
прямоугольник ( 30 , 80 , 40 , 130 ) | 4
прямоугольник ( 100 , 80 , 110 , 130 ) | 5
в точку ( 20 , 80 ) | 6
линия в точку ( 70 , 30 ) | 7
линия в точку ( 120 , 80 ) | 8
линия в точку ( 20 , 80 ) | 9
кисть ( синий ) | 10
залить ( 70 , 70 ) | 11
кисть ( красный ) | 12
окружность ( 70 , 30 , 10 ) | 13
кон
?
Можно переставить?
кисть ( красный )
окружность ( 70 , 30 , 10 )

Алгоритмы и программирование
§ 42 . Вспомогательные алгоритмы

Зачем это нужно?
Задача:
Особенность: три похожие фигуры
?
Можно ли решить известными методами ?
?
Что особенного ?
!
Идея: научить Рисователя рисовать такие треугольники!

Что такое вспомогательный алгоритм?
Вспомогательный алгоритм (процедура) — это новая команда, которую мы «учим» выполнять исполнителя.
?
Координаты углов?
X
( x , y -60)
O
60
Y
( x +100, y )
?
Что общего ? Что отличается?
100
( x , y )
базовая точка
общее: размеры, угол поворота
отличия: координаты , цвет
- общее: размеры, угол поворота отличия: координаты , цвет

Составляем вспомогательный алгоритм
( x , y -60)
Параметры — это данные необходимые для работы процедуры.
60
( x , y )
( x +100, y )
100
алг треугольник ( цел x, y, цвет ц)
нач
в точку (x, y)
линия в точку (x, y- 60 )
линия в точку (x+ 100 , y)
линия в точку (x, y)
кисть (ц)
залить (x+ 20 , y- 20 )
кон
( x , y -60)
( x + 2 0, y-20 )
60
( x , y )
( x +100, y )
100
?
Какую строку можно изменить?
25

Основная программа
(120,100)
60
?
Какие данные нужны для вызова процедуры?
(20,100)
100
(120,160)
?
Что если запустить?
алг Трио
нач
треугольник ( 20 , 100 , синий )
треугольник ( 120 , 100 , зеленый )
треугольник ( 120 , 160 , красный )
кон

Полная программа
использовать Рисователь
алг Трио
нач
треугольник ( 20 , 100 , синий )
треугольник ( 120 , 100 , зеленый )
треугольник ( 120 , 160 , красный )
кон
основная программа
алг треугольник ( цел x, y, цвет ц)
нач
в точку (x, y)
линия в точку (x, y- 60 )
линия в точку (x+ 100 , y)
линия в точку (x, y)
кисть (ц)
залить (x+ 20 , y- 20 )
кон
вспомогательный алгоритм (процедура)

Алгоритмы и программирование
§ 43 . Применение циклов

Рисование с помощью циклов
Задача:
10 0
2 0
40
O
X
2 0
Y
x
x
окружность ( x , 20 , 10 )
окружность ( 20 , 20 , 10 )
окружность ( 40 , 20 , 10 )
окружность ( 60 , 20 , 10 )
окружность ( 80 , 20 , 10 )
окружность ( 100 , 20 , 10 )
20
40
60
80
100
шаг изменения переменной цикла
цел x
нц для x от 20 до 100 шаг 20
окружность (x, 20 , 5 )
кц
шаг 20

30
Рисование с помощью циклов
Задача:
2 0
40
X
O
2 0
y
?
Чем отличаются ряды?
40
6 0
Y
Ряд ( 20 )
Ряд ( 40 )
Ряд ( 60 )
цел y
нц для y от 20 до 60 шаг 20
Ряд (y)
кц
!
Нужно добавить процедуру Ряд!

30
Использование процедур
Задача:
?
Из каких фигур состоит?
30
40
2 0
X
O
10
?
(x+10, y-20)
3 0
(x, y)
(x+ 2 0, y)
?
50
базовая точка
(x+10, y + 20)
?
Y

31
Процедура Ромб
алг Ромб ( цел x, y)
нач
в точку (x, y)
линия в точку (x+ 10 , y- 20 )
линия в точку (x+ 20 , y)
линия в точку (x+ 10 , y+ 20 )
линия в точку (x, y)
кон
(x+10, y-20)
(x, y)
(x+ 2 0, y)
(x+10, y + 20)
?
Зачем 2 параметра ( y не изменяется)?

Вызов процедуры в цикле
40
2 0
30
X
O
10
3 0
50
Y
Ромб ( 20 , 30 )
Ромб ( 30 , 30 )
Ромб ( 40 , 30 )
Ромб ( 50 , 30 )
Ромб ( 60 , 30 )
цел y
нц для y от 20 до 60 шаг 10
Ромб (y, 30 )
кц

34
Штриховка
Задача:
x 2
x 1
X
O
?
Как найти h ?
N полос
y 1
цел h
h:= div (x2-x1, N)
y 2
h
Y
деление нацело
цел x1= 100 , x2= 300
цел y1= 100 , y2= 200
кисть ( серый )
прямоугольник ( x1, y1, x2, y2)

34
Штриховка
Задача:
x 2
x 1
x 2 - h
x 1 +h
O
X
N полос
цел x
нц для x от x1+h до x2-h шаг h
линия (x, y1, x, y2)
кц
y 1
y 2
h
Y
x
x
линия ( x1 + h , y1, x1+h , y2)
линия ( x1 + 2 *h , y1, x1+ 2 *h , y2)
...
линия ( x 2-h , y1, x2-h , y2)
x1+h,
x1+ 2 *h,
...
x2-h,
x1+h,
x1+ 2 *h,
...
x2-h,

Алгоритмы и программирование
§ 44 . Анимация

Как сделать анимацию?
Анимация — это быстрая смена изображений («кадров») на экране.
в)
г)
а)
б)
?
≥ 16 кадров /c
Насколько быстрая?

Перемещение шарика на фоне
Где-то сохранить:
- запомнить фон под шариком
- нарисовать шарик
выводим тут
Переместить :
- восстановить фон под шариком (стереть)
- изменить координаты
- запомнить фон под новым местом
- нарисовать шарик
не нужно запоминать!
?
Если фон одноцветный?

38
Начало программы
200
200
использовать Рисователь
алг Движение
нач
новый лист ( 200 , 200 , синий )
перо ( 1 , прозрачный )
...
кон
шарик без контура!

Новая команда
параметры
алг Шарик ( цел x, y, цвет ц)
нач
цел R= 10
кисть (ц)
окружность (x, y, R)
кон
?
Что такое 10?
показываем!
Шарик ( 20 , 100 , желтый )
?
В чём отличие?
Шарик ( 20 , 100 , синий )
стираем!

Основной цикл
?
?
1 9 0
10
X
O
(10, 100)
(1 9 0, 100)
100
Y
200
Начальное положение :
цел x= 10 , y = 1 00
Цикл :
?
Когда закончится?
нц пока x 190
... | двигаем шарик
кц

41
Как двигать шарик?
нц пока x 190
Шарик (x, y, жёлтый ) | рисуем шарик
Шарик (x, y, синий ) | стираем
x:= x + 2 | перемещаем
кц
?
Что плохо?
нц пока x 190
Шарик (x, y, жёлтый ) | рисуем шарик
ждать ( 20 ) | смотрим
Шарик (x, y, синий ) | стираем
x:= x + 2 | перемещаем
кц
ждать ( 20 ) | смотрим 20 мс

В чём проблема?
нц пока x 190
Шарик (x, y, жёлтый )
Шарик (x, y, синий )
ждать ( 20 )
x:= x + 2
кц
почти не видно!
нц пока x 190
Шарик (x, y, жёлтый )
ждать ( 20 )
x:= x + 2
Шарик (x, y, синий )
кц
стирает в другом месте!

Алгоритмы и программирование
§ 45 . Управление с помощью клавиатуры

Команды для работы с клавиатурой
Определить, нажата ли клавиша :
!
Это условный оператор !
да / нет
если сигнал клав то
| клавиша нажата, что-то сделать
все
сигнал клав
Определить, какая клавиша нажата :
ждать, если не нажата
цел с
с:= код клав
если с = КЛ_ВВЕРХ то
| передвинуть объект вверх
все
код клав
константы:
КЛ_ВВЕРХ
КЛ_ВНИЗ
КЛ_ВПРАВО
КЛ_ВЛЕВО
символьное имя

Основной цикл
всегда верно!
бесконечный цикл
нц пока да
Шарик (x, y, жёлтый )
Шарик (x, y, синий )
с:= код клав
| переместить шарик
кц
?
с:= код клав
Шарик (x, y, синий )
Что плохо?

Вся программа
использовать Рисователь
алг Управление клавишами
нач
новый лист ( 200 , 200 , синий )
перо ( 1 , прозрачный )
цел x= 100 , y= 100 , с
нц пока да
Шарик (x, y, жёлтый )
с:= код клав
Шарик (x, y, синий )
если с= КЛ_ВЛЕВО то x:=x– 5 все
если с= КЛ_ВПРАВО то x:=x+ 5 все
если с= КЛ_ВВЕРХ то y:=y- 5 все
если с= КЛ_ВНИЗ то y:=y+ 5 все
кц
кон
?
Чего не хватает?

Управление по требованию
События на экране развиваются и без действий игрока, но он может вмешаться.
нц пока да
| если нажата клавиша, то
| изменить направление движения
| нарисовать шарик
| ждать 20 мс
| стереть шарик
| переместить шарик
кц
| нарисовать шарик
| ждать 20 мс
| стереть шарик
| переместить шарик
работает и без игрока!

Обработка нажатия клавиши
если нажата какая-нибудь клавиша
если сигнал клав то
с:= код клав
| изменить направление движения
все
?
Как изменить направление?
Движение :
сдвиг по x
x:= x + dx
y:= y + dy
?
Как остановить?
сдвиг по y
если с= КЛ_ВЛЕВО то dx:= -5 ; dy:= 0 все
если с= КЛ_ВПРАВО то dx:= 5 ; dy:= 0 все
...
если с= КЛ_ПРОБЕЛ то dx:= 0 ; dy:= 0 все

49
Конец фильма
ПОЛЯКОВ Константин Юрьевич
д.т.н., учитель информатики
ГБОУ СОШ № 163, г. Санкт-Петербург
ЕРЕМИН Евгений Александрович
к.ф.-м.н., доцент кафедры мультимедийной дидактики и ИТО ПГГПУ, г. Пермь

Источники иллюстраций
- авторские материалы