2.68M

Category:

programming

Алгоритмы и программирование

1. Алгоритмы и программирование

1
Алгоритмы и
программирование
К.Ю. Поляков, Е.А. Ерёмин, 2017
http://kpolyakov.spb.ru

2. Алгоритмы и программирование

2
Алгоритмы и
программирование
§ 40. Компьютерная графика
К.Ю. Поляков, Е.А. Ерёмин, 2017
http://kpolyakov.spb.ru

3. Графический режим монитора

Алгоритмы и программирование, 7 класс
3
Графический режим монитора
Холст – это прямоугольная область экрана,
доступная для рисования.
O
(0,0)
X
y
x
A(x,y)
!
Y
?
Холст – это растровый
рисунок!
Почему сверху вниз?
К.Ю. Поляков, Е.А. Ерёмин, 2017
http://kpolyakov.spb.ru

4. Исполнитель Рисователь

Алгоритмы и программирование, 7 класс
4
Исполнитель Рисователь
Задача – нарисовать что-то на холсте не с
помощью мыши, а управляя исполнителем.
?
Как управлять?
Какие команды умеет
выполнять Рисователь?
Первая программа:
программа
(алгоритм)
начало
использовать Рисователь
алг Холст
аргументы
нач
лист
новый лист(500,
400, белый)
кон
конец
К.Ю. Поляков, Е.А. Ерёмин, 2017
команда
Рисователя
http://kpolyakov.spb.ru

5. Команда «новый лист»

Алгоритмы и программирование, 7 класс
5
Команда «новый лист»
использовать Рисователь
алг Холст
нач
новый лист(500, 400, белый)
кон
ширина
высота
цвет
белый, чёрный,
серый, фиолетовый,
синий, голубой,
зелёный, жёлтый,
оранжевый, красный
К.Ю. Поляков, Е.А. Ерёмин, 2017
http://kpolyakov.spb.ru

6. Управление пикселями

Алгоритмы и программирование, 7 класс
6
Управление пикселями
?
Что значит «управлять пикселем»?
аргументы (данные
для работы)
пиксель(10, 20, синий)
x
y
цвет
(x,y)
?
Как рисовать отрезок?
К.Ю. Поляков, Е.А. Ерёмин, 2017
http://kpolyakov.spb.ru

7. Отрезок

Алгоритмы и программирование, 7 класс
7
Отрезок
O
10
X
15
(10,20)
Y
(15,20)
20
пиксель(10,
пиксель(11,
пиксель(12,
пиксель(13,
пиксель(14,
пиксель(15,
20,
20,
20,
20,
20,
20,
синий)
синий)
синий)
синий)
синий)
синий)
пиксель(X, 20, синий)
?
Как сократить?
для X от 10 до 15
X – переменная (изменяемая величина)
К.Ю. Поляков, Е.А. Ерёмин, 2017
http://kpolyakov.spb.ru

8. Отрезок

Алгоритмы и программирование, 7 класс
8
Отрезок
Цикл – это многократное выполнение
одинаковых действий.
X – целая
величина
начало
цикла
конец
цикла
?
присвоить X
цел X
значение 10
тело
X:=10
цикла
нц пока X <= 15
пиксель(X, 20, синий)
X:= X + 1
присвоить X
кц
значение X+1
10 → 11 → 12 → 13 → …
При каком X остановится цикл?
К.Ю. Поляков, Е.А. Ерёмин, 2017
16
http://kpolyakov.spb.ru

9. Когда остановится цикл?

Алгоритмы и программирование, 7 класс
9
Когда остановится цикл?
выполняется до тех пор,
пока условие не станет
ложным
цел X
X:=10
нц пока X <= 15
пиксель(X, 20, синий)
X:= X + 1
кц
?
это цикл с
условием
При каком X остановится цикл?
К.Ю. Поляков, Е.А. Ерёмин, 2017
16
http://kpolyakov.spb.ru

10. Ещё один цикл

Алгоритмы и программирование, 7 класс
10
Ещё один цикл
цикл по
цел X
переменной
нц X от 10 до 15
пиксель(X, 20, синий)
блок-схема
кц
!
X автоматически
увеличится на 1
после каждого
повторения!
начало
X:=10,15
тело цикла
конец
К.Ю. Поляков, Е.А. Ерёмин, 2017
http://kpolyakov.spb.ru

11. Что дальше?

Алгоритмы и программирование, 7 класс
11
Что дальше?
?
Как нарисовать вертикальный отрезок?
?
… наклонный? в чём сложность?
?
… окружность?
К.Ю. Поляков, Е.А. Ерёмин, 2017
http://kpolyakov.spb.ru

12. Алгоритмы и программирование

12
Алгоритмы и
программирование
§ 41. Графические примитивы
К.Ю. Поляков, Е.А. Ерёмин, 2017
http://kpolyakov.spb.ru

13. Что такое графический примитив?

Алгоритмы и программирование, 7 класс
13
Что такое графический примитив?
Графический примитив — это элемент рисунка,
который добавляется с помощью одной
команды.
пиксель
линия
прямоугольник
окружность
К.Ю. Поляков, Е.А. Ерёмин, 2017
http://kpolyakov.spb.ru

14. Линия (=отрезок)

Алгоритмы и программирование, 7 класс
14
Линия (=отрезок)
линия(10, 20, 15, 20)
(x,y) первой
точки
(x,y) второй
точки
одна команда
заменяет цикл
цел X
нц X от 10 до 15
пиксель(X, 20, синий)
кц
?
Какие вопросы возникли?
К.Ю. Поляков, Е.А. Ерёмин, 2017
http://kpolyakov.spb.ru

15. Линия

Алгоритмы и программирование, 7 класс
15
Линия
толщина
линии (px)
цвет
перо(1, синий)
линия(10, 20, 15,
линия(15, 20, 15,
линия(15, 30, 10,
линия(10, 30, 10,
?
цвет сохраняется,
пока не сменят
20)
30)
30)
20)
Какого цвета остальные
линии?
?
Что это?
(10,20)
10
5
(10,30)
К.Ю. Поляков, Е.А. Ерёмин, 2017
(15,20)
(15,30)
http://kpolyakov.spb.ru

16. Прямоугольник

Алгоритмы и программирование, 7 класс
16
Прямоугольник
кисть(прозрачный)
только рамка
перо(1, синий)
цвет заливки
кисть(красный)
прямоугольник(20, 10, 40, 30)
(20,10)
(40,10)
20
(20,30)
(x,y) правого
нижнего угла
(x,y) левого
верхнего угла
20
К.Ю. Поляков, Е.А. Ерёмин, 2017
(40,30)
?
Координаты
остальных углов?
размеры?
http://kpolyakov.spb.ru

17. Окружность

Алгоритмы и программирование, 7 класс
17
Окружность
?
Какие данные нужны?
перо(1, синий)
кисть(красный)
окружность(50, 30, 20)
(x,y) центра
К.Ю. Поляков, Е.А. Ерёмин, 2017
20
(50,30)
радиус
http://kpolyakov.spb.ru

18. Ломаная

Алгоритмы и программирование, 7 класс
18
Ломаная
?
(30,10)
Из каких примитивов состоит?
линия(20, 30, 30, 10)
линия(30, 10, 40, 30)
линия(40, 30, 20, 30)
или так
в точку(20, 30)
линия в точку(30, 10)
линия в точку(40, 30)
линия в точку(20, 30)
К.Ю. Поляков, Е.А. Ерёмин, 2017
(20,30)
?
(40,30)
Что лучше?
http://kpolyakov.spb.ru

19. Заливка области

Алгоритмы и программирование, 7 класс
19
Заливка области
кисть(оранжевый)
залить(50, 60)
(50,60)
• можно начать с любой точки
внутри области
• заливаются все соседние
пиксели одного цвета
• заливка прекращается на
границе другого цвета
?
К.Ю. Поляков, Е.А. Ерёмин, 2017
Если линия не замкнута?
http://kpolyakov.spb.ru

20. Пример

Алгоритмы и программирование, 7 класс
20
Пример
O
20 30 40
70
100 110 120
X
?
?
30
80
?
Из каких фигур?
В каком порядке
рисовать?
Координаты углов
прямоугольников?
130
Y
К.Ю. Поляков, Е.А. Ерёмин, 2017
http://kpolyakov.spb.ru

21. Пример

22. Алгоритмы и программирование

22
Алгоритмы и
программирование
§ 42. Вспомогательные
алгоритмы
К.Ю. Поляков, Е.А. Ерёмин, 2017
http://kpolyakov.spb.ru

23. Зачем это нужно?

Алгоритмы и программирование, 7 класс
23
Зачем это нужно?
Задача:
?
Можно ли решить
известными методами?
?
Что особенного?
Особенность: три похожие фигуры
!
Идея: научить Рисователя рисовать такие
треугольники!
К.Ю. Поляков, Е.А. Ерёмин, 2017
http://kpolyakov.spb.ru

24. Что такое вспомогательный алгоритм?

Алгоритмы и программирование, 7 класс
24
Что такое вспомогательный алгоритм?
Вспомогательный алгоритм (процедура) —
это новая команда, которую мы «учим»
выполнять исполнителя.
?
O
?
Y
Что общего?
Что отличается?
общее: размеры, угол поворота
отличия: координаты, цвет
К.Ю. Поляков, Е.А. Ерёмин, 2017
Координаты углов?
X (x, y-60)
60
(x, y)
(x+100, y)
100
базовая точка
http://kpolyakov.spb.ru

25. Составляем вспомогательный алгоритм

Алгоритмы и программирование, 7 класс
25
Составляем вспомогательный алгоритм
Параметры — это данные
необходимые для работы
процедуры.
(x, y-60)
60
(x, y)
100 (x+100, y)
алг треугольник (цел x, y, цвет ц)
нач
(x, y-60)
в точку(x, y)
(x+20, y-20)
линия в точку(x, y-60)
60
линия в точку(x+100, y)
линия в точку(x, y)
(x, y) 100 (x+100, y)
кисть(ц)
залить(x+20, y-20)
кон
Какую строку можно изменить?
?
К.Ю. Поляков, Е.А. Ерёмин, 2017
http://kpolyakov.spb.ru

26. Основная программа

Алгоритмы и программирование, 7 класс
26
Основная программа
(120,100)
60
(20,100) 100
?
Какие данные нужны для
вызова процедуры?
(120,160)
? Что если запустить?
алг Трио
нач
треугольник(20, 100, синий)
треугольник(120, 100, зеленый)
треугольник(120, 160, красный)
кон
К.Ю. Поляков, Е.А. Ерёмин, 2017
http://kpolyakov.spb.ru

27. Полная программа

Алгоритмы и программирование, 7 класс
27
Полная программа
использовать Рисователь
алг Трио
нач
треугольник(20, 100, синий)
треугольник(120, 100, зеленый)
треугольник(120, 160, красный)
кон
основная
программа
алг треугольник (цел x, y, цвет ц)
нач
вспомогательный
в точку(x, y)
алгоритм
линия в точку(x, y-60)
(процедура)
линия в точку(x+100, y)
линия в точку(x, y)
кисть(ц)
залить(x+20, y-20)
кон
К.Ю. Поляков, Е.А. Ерёмин, 2017
http://kpolyakov.spb.ru

28. Алгоритмы и программирование

28
Алгоритмы и
программирование
§ 43. Применение циклов
К.Ю. Поляков, Е.А. Ерёмин, 2017
http://kpolyakov.spb.ru

29. Рисование с помощью циклов

Алгоритмы и программирование, 7 класс
29
Рисование с помощью циклов
Задача:
O
20
40
20
Y
x
окружность( 20
20,
окружность( 40
40,
окружность( 60
60,
окружность( 80
80,
100
окружность(100,
100
X
окружность( x , 20, 10)
20, 10)
20, 10)
20, 10)
20, 10)
20, 10)
шаг изменения
переменной цикла
цел x
нц для x от 20 до 100 шаг 20
окружность(x, 20, 5)
кц
К.Ю. Поляков, Е.А. Ерёмин, 2017
http://kpolyakov.spb.ru

30. Рисование с помощью циклов

Алгоритмы и программирование, 7 класс
30
Рисование с помощью циклов
Задача: O
y
20
20
40
X
?
40
Чем отличаются
ряды?
60
Y
Ряд(20)
Ряд(40)
Ряд(60)
цел y
нц для y от 20 до 60 шаг 20
Ряд(y)
кц
!
Нужно добавить процедуру Ряд!
К.Ю. Поляков, Е.А. Ерёмин, 2017
http://kpolyakov.spb.ru

31. Использование процедур

Алгоритмы и программирование, 7 класс
31
Использование процедур
Задача:
O
20 30 40
10
30
X
?
Из каких фигур
состоит?
(x+10,? y-20)
(x, y)
?
(x+20,
y)
базовая точка
(x+10,
y+20)
?
50
Y
К.Ю. Поляков, Е.А. Ерёмин, 2017
http://kpolyakov.spb.ru

32. Процедура Ромб

Алгоритмы и программирование, 7 класс
32
Процедура Ромб
(x+10, y-20)
(x, y)
(x+20, y)
(x+10, y+20)
?
алг Ромб(цел x, y)
нач
в точку(x, y)
линия в точку(x+10, y-20)
линия в точку(x+20, y)
линия в точку(x+10, y+20)
линия в точку(x, y)
кон
Зачем 2 параметра (y не изменяется)?
К.Ю. Поляков, Е.А. Ерёмин, 2017
http://kpolyakov.spb.ru

33. Вызов процедуры в цикле

Алгоритмы и программирование, 7 класс
33
Вызов процедуры в цикле
O
20 30 40
X
10
30
50
Y
Ромб(20,
Ромб(30,
Ромб(40,
Ромб(50,
Ромб(60,
30)
30)
30)
30)
30)
К.Ю. Поляков, Е.А. Ерёмин, 2017
цел y
нц для y от 20 до 60 шаг 10
Ромб(y, 30)
кц
http://kpolyakov.spb.ru

34. Штриховка

Алгоритмы и программирование, 7 класс
34
Штриховка
Задача:
O
x1
x2 X
N полос
y1
y2
Y
?
Как найти h?
x2 x1
h
N
h
цел h
h:= div(x2-x1, N)
цел x1=100, x2=300
деление нацело
цел y1=100, y2=200
кисть(серый)
прямоугольник(x1, y1, x2, y2)
К.Ю. Поляков, Е.А. Ерёмин, 2017
http://kpolyakov.spb.ru

35. Штриховка

Алгоритмы и программирование, 7 класс
35
Штриховка
Задача:
O
x1 x1+h
x2-h x2 X
N полос
цел x
нц для x от x1+h до x2-h шаг h
линия(x, y1, x, y2)
кц
y1
y2
Y
h
x
x
x1+h,
линия(x1+h,
y1, x1+h,
y2)
x1+2*h, y1, x1+2*h, y2)
линия(x1+2*h,
...
...
...
x2-h,
линия(x2-h,
y1, x2-h,
y2)
К.Ю. Поляков, Е.А. Ерёмин, 2017
http://kpolyakov.spb.ru

36. Алгоритмы и программирование

36
Алгоритмы и
программирование
§ 44. Анимация
К.Ю. Поляков, Е.А. Ерёмин, 2017
http://kpolyakov.spb.ru

37. Как сделать анимацию?

Алгоритмы и программирование, 7 класс
37
Как сделать анимацию?
Анимация — это быстрая смена изображений
(«кадров») на экране.
а)
?
б)
Насколько быстрая?
К.Ю. Поляков, Е.А. Ерёмин, 2017
в)
г)
≥ 16 кадров/c
http://kpolyakov.spb.ru

38. Перемещение шарика на фоне

Алгоритмы и программирование, 7 класс
38
Перемещение шарика на фоне
Где-то сохранить:
выводим тут
• запомнить фон под
шариком
• нарисовать шарик
Переместить:
• восстановить фон под шариком (стереть)
• изменить координаты
• запомнить фон под новым местом
• нарисовать шарик
не нужно
запоминать!
? Если фон одноцветный?
К.Ю. Поляков, Е.А. Ерёмин, 2017
http://kpolyakov.spb.ru

39. Начало программы

Алгоритмы и программирование, 7 класс
39
Начало программы
200
200
использовать Рисователь
алг Движение
нач
новый лист(200, 200, синий)
перо(1, прозрачный)
шарик без
...
контура!
кон
К.Ю. Поляков, Е.А. Ерёмин, 2017
http://kpolyakov.spb.ru

40. Новая команда

Алгоритмы и программирование, 7 класс
40
Новая команда
параметры
алг Шарик(цел x, y, цвет ц)
нач
цел R=10
Что такое 10?
кисть(ц)
окружность(x, y, R)
кон
показываем!
?
Шарик(20, 100, желтый)
Шарик(20, 100, синий)
?
В чём отличие?
стираем!
К.Ю. Поляков, Е.А. Ерёмин, 2017
http://kpolyakov.spb.ru

41. Основной цикл

Алгоритмы и программирование, 7 класс
41
Основной цикл
?
O 10
? X
190
(10, 100)
(190, 100)
100
Y
200
Начальное положение:
цел x=10, y=100
Цикл:
нц пока x < 190
... | двигаем шарик
кц
К.Ю. Поляков, Е.А. Ерёмин, 2017
?
Когда закончится?
http://kpolyakov.spb.ru

42. Как двигать шарик?

Алгоритмы и программирование, 7 класс
42
Как двигать шарик?
нц пока x < 190
Шарик(x, y, жёлтый)
Шарик(x, y, синий)
x:= x + 2
кц
| рисуем шарик
| стираем
| перемещаем
?
нц пока x < 190
Шарик(x, y, жёлтый)
ждать(20)
Шарик(x, y, синий)
x:= x + 2
кц
К.Ю. Поляков, Е.А. Ерёмин, 2017
|
|
|
|
Что плохо?
рисуем шарик
смотрим 20 мс
стираем
перемещаем
http://kpolyakov.spb.ru

43. В чём проблема?

Алгоритмы и программирование, 7 класс
43
В чём проблема?
нц пока x < 190
Шарик(x, y, жёлтый)
Шарик(x, y, синий)
ждать(20)
x:= x + 2
кц
нц пока x < 190
Шарик(x, y, жёлтый)
ждать(20)
x:= x + 2
Шарик(x, y, синий)
кц
К.Ю. Поляков, Е.А. Ерёмин, 2017
почти не
видно!
стирает в другом
месте!
http://kpolyakov.spb.ru

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

44
Алгоритмы и
программирование
§ 45. Управление с помощью
клавиатуры
К.Ю. Поляков, Е.А. Ерёмин, 2017
http://kpolyakov.spb.ru

45. Команды для работы с клавиатурой

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

46. Основной цикл

Алгоритмы и программирование, 7 класс
46
Основной цикл
всегда верно!
нц пока да
Шарик(x, y, жёлтый)
с:= код клав
Шарик(x,
y, синий)
Шарик(x,
y, синий)
с:=
код клав
| переместить шарик
кц
К.Ю. Поляков, Е.А. Ерёмин, 2017
бесконечный
цикл
?
Что плохо?
http://kpolyakov.spb.ru

47. Вся программа

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

48. Управление по требованию

Алгоритмы и программирование, 7 класс
48
Управление по требованию
События на экране развиваются и без действий
игрока, но он может вмешаться.
нц пока да
| если нажата клавиша, то
|
изменить направление движения
| нарисовать шарик
работает и
| ждать 20 мс
без игрока!
| стереть шарик
| переместить шарик
кц
К.Ю. Поляков, Е.А. Ерёмин, 2017
http://kpolyakov.spb.ru

49. Обработка нажатия клавиши

Алгоритмы и программирование, 7 класс
49
Обработка нажатия клавиши
если нажата какаянибудь клавиша
если сигнал клав то
с:= код клав
| изменить направление движения
все
Как изменить направление?
Движение:
сдвиг по x
x:= x + dx
Как остановить?
сдвиг по y
y:= y + dy
?
?
если с=КЛ_ВЛЕВО то dx:=-5; dy:=0 все
если с=КЛ_ВПРАВО то dx:=5; dy:=0 все
...
если с=КЛ_ПРОБЕЛ то dx:=0; dy:=0 все
К.Ю. Поляков, Е.А. Ерёмин, 2017
http://kpolyakov.spb.ru

50. Конец фильма

Алгоритмы и программирование, 7 класс
50
Конец фильма
ПОЛЯКОВ Константин Юрьевич
д.т.н., учитель информатики
ГБОУ СОШ № 163, г. Санкт-Петербург
[email protected]
ЕРЕМИН Евгений Александрович
к.ф.-м.н., доцент кафедры мультимедийной
дидактики и ИТО ПГГПУ, г. Пермь
[email protected]
К.Ю. Поляков, Е.А. Ерёмин, 2017
http://kpolyakov.spb.ru

51. Источники иллюстраций

Алгоритмы и программирование, 7 класс
51
Источники иллюстраций
1.
авторские материалы
К.Ю. Поляков, Е.А. Ерёмин, 2017
http://kpolyakov.spb.ru

English Русский Rules