Рисователь- программирование графики Поляков

Ещё один цикл

цикл по переменной

цел 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, г. Санкт-Петербург

kpolyakov@mail.ru

ЕРЕМИН Евгений Александрович

к.ф.-м.н., доцент кафедры мультимедийной дидактики и ИТО ПГГПУ, г. Пермь

eremin@pspu.ac.ru

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

• авторские материалы