Проект Simple Paint

1.

Модуль 5. Урок 3.
ООП. Проект
Simple Paint
Ссылка на методичку

2.

Модуль 5. Урок 3. ООП. Проект Simple Paint
Обсуждение:
Проект
Simple Paint

3.

Получен новый заказ!
Студия Press and Play решила переключиться с разработки
динамичных игр на простые и полезные приложения.
Сегодня специалистам ProTeam предстоит запрограммировать
прототип графического редактора Simple Paint.
Заказчик выслал нам техническое задание.
Обсуждение
рабочих задач
Давайте изучим его!
Алёна,
менеджер проектов

4.

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

5.

Проектное задание:
Цель –– запрограммировать графический
редактор.
Запрограммировать рисование нескольких
графических объектов мышью.
Реализовать дополнительную возможность
рисовать с помощью клавиатуры.
Реализовать возможность выбирать цвет пера.
При наличии времени можно добавить заливку
цветом.
Какие инструменты планирования вы знаете?
Обсуждение
рабочих задач
Задачи:

6.

Работа над проектом
Как профессиональные разработчики, мы воспользуемся следующими
механиками:
Обсуждение
рабочих задач
❏ Чек-лист этапов работы над проектом.
❏ Mind map функционала проекта.
❏ Презентация результата и обмен обратной связью.
Эти механики помогут нам выстроить
рабочий процесс и сдать проект в срок.
Алёна,
менеджер проектов

7.

Задачи для реализации Simple Paint
➔ Изучить техническое задание и ожидаемый вид программы.
➔ Разбить проект на задачи с помощью mind map.
➔ Реализовать базовую часть Simple Paint.
➔ Улучшить проект интересными деталями
(при наличии времени).
Обсуждение
рабочих задач
➔ Опубликовать проект в Лаборатории.
➔ Обменяться обратной связью с коллегами.
Алёна,
менеджер проектов

8.

Составим mind map проекта
Откройте проектное задание с mind map на платформе.
Обсуждение
рабочих задач
Какие элементы функционала вы можете выделить?

9.

В целом подход к реализации mind map может быть любым.
Обсуждение
рабочих задач
Возможная mind map проекта:

10.

Цель рабочего дня —
реализовать прототип графического редактора
Simple Paint.
● реализуете проект в рамках общепринятого рабочего
процесса;
● обработаете события, связанные с мышью и
клавиатурой;
● опубликуете проект в «Лаборатории» и получите
обратную связь от коллег.
Обсуждение
рабочих задач
Сегодня вы:

11.

Модуль 5. Урок 3. ООП. Проект Simple Paint
Подтверждение
квалификации

12.

Чтобы приступить к рабочим задачам,
продемонстрируйте уровень своих
знаний.
Подтверждение
квалификации
Покажите, что вы готовы к «мозговому
штурму» и проектной работе!

13.

Что такое объект?
Что такое свойство и метод?
Подтверждение
квалификации
Как программно обратиться к свойству
или методу объекта?

14.

Объект —
это набор данных и действий, которые удобно
воспринимать как единое целое.
Говорят, что объект обладает свойствами и управляется методами.
Методы
заяц.скорость = 50
заяц.бежать()
черепаха.скорость = 1
черепаха.ползти()
рыба.скорость = 30
рыба.плыть()
Переменная, помещённая внутрь
объекта.
Функция, помещённая
внутрь объекта.
Подтверждение
квалификации
Свойства

15.

Подтверждение
квалификации
Как добавить уже существующему
объекту новое свойство?

16.

Создание нового свойства объекта
Создание нового свойства аналогично созданию переменной:
Объект.свойство = значение
Например, новое свойство можно задать объекту t типа Turtle:
У объектов область видимости отличается от функций,
поэтому при изменении его значения проблем не будет!
Подтверждение
квалификации
t.points = 0

17.

Что называется «внешним миром»
программы?
Подтверждение
квалификации
Что такое событие?

18.

Событие
— это информация, подготовленная системой исполнения, о
том, что происходит во «внешнем мире».
Система исполнения:
«Произошло событие!»
(готовит информацию о нём).
Работающая программа
Произошло какое-то
событие?
Подтверждение
квалификации
Внешний мир —
это любая подключённая к
компьютеру аппаратура.

19.

Может ли программа
реагировать на событие?
Подтверждение
квалификации
Если да, как это запрограммировать?

20.

Для обработки события программой нужно:
➔ подписаться на событие внешнего мира;
➔ указать в подписке функцию-обработчик, к которой обратится
интерпретатор.
Система исполнения:
«Произошло событие!»
(готовит информацию о нём).
Работающая программа:
«Это важное для меня событие!
Я должна отреагировать».
Произошло какое-то
событие?
РЕАКЦИЯ НА
СОБЫТИЕ
Подтверждение
квалификации
Внешний мир —
это любая подключённая к
компьютеру аппаратура.

21.

Подтверждение
квалификации
Как подписаться на событие
«клик по черепашке» и
обработать его?

22.

Обработка события «клик по черепашке»
Для обработки клика по объекту создадим функцию catch(), параметрами которой
будут координаты «пойманной» черепашки.
Место клика передаётся системой исполнения по подписке на событие.
Обработка события
Подписка на событие
t.onclick(catch)
ИМЯ ФУНКЦИИ-ОБРАБОТЧИКА
Подтверждение
квалификации
def catch(x, y):

23.

Квалификация подтверждена!
Подтверждение
квалификации
Отлично, вы готовы к «мозговому штурму» и
тренингу!

24.

Модуль 5. Урок 3. ООП. Проект Simple Paint
«Мозговой штурм»:
Объект Screen
и работа с ним

25.

Улучшаем
Какое событие происходит на данной картинке?
«Мозговой
штурм»
Сколько раз пользователь кликает по черепашке?

26.

Улучшаем
Какое событие происходит на данной картинке?
Сколько раз пользователь кликает по черепашке?
Что происходит?
❏ Пользователь перемещает курсор и
рисует черепашкой.
Также программе известны координаты
перемещения...
Похоже ли это на «клик по черепашке»?
«Мозговой
штурм»
❏ Пользователь зажимает левую кнопку
мышки на черепашке.

27.

Программируем возможность рисовать
Это не «клик по черепашке», а «перетаскивание черепашки»!
Следовательно:
«Мозговой
штурм»
➔ для подписки на событие потребуется другая команда;
➔ для обработки необходимо написать новую функцию draw().

28.

Программируем возможность рисовать
Это не «клик по черепашке», а «перетаскивание черепашки»!
Следовательно:
В каждый момент программе известны
координаты текущего положения черепашки
— Х и Y.
Используем их для рисования линии!
«Мозговой
штурм»
➔ для подписки на событие потребуется другая команда;
➔ для обработки необходимо написать новую функцию draw().

29.

Подписки на события: новая команда
Команда
t.onclick(<имя_функции>)
Назначение
Подписка на «клик по черепашке»
(требует функцию с двумя параметрами)
t.ondrag(<имя_функции>)
Подписка на «перетаскивание
черепашки» (требует функцию с двумя
def draw(x, y):
Подписка на событие
t.ondrag(draw)
Обработка события
«Мозговой
штурм»
параметрами)

30.

Возможный код программы:
from turtle import *
t = Turtle()
t.color('blue')
t.width(5)
t.shape('circle')
t.pendown()
Создаём объект типа Turtle и
настраиваем его свойства.
Перо опущено, иначе рисования
не будет!
def draw(x, y):
t.goto(x, y)
t.ondrag(draw)
Создаём функцию-обработчик для
draw(): при «перетаскивании
черепашки» перо перемещается
в точку перетаскивания.
«Мозговой
штурм»
t.speed(3)

31.

Программируем возможность рисовать
Обратите внимание, в ожидаемой версии проекта допускалась
отрисовка нескольких объектов!
Какое событие происходит при перемещении пера в другую точку
начала рисования?
Подсказка.
События могут быть связаны
не только с черепашкой.
«Мозговой
штурм»
Как обработать клик не по черепашке?

32.

Объект типа Screen и работа с ним
Перенос точки рисования связан с событием «клик по экрану»!
Объект типа Screen (от англ. «экран») знает, что происходит в любой точке
рабочей плоскости.
scr = t.getscreen()
Нужен именно
тот экран, по
которому
перемещаются
черепашки!
«Мозговой
штурм»
Создание объекта Screen

33.

Подписки на события: новая команда
Команда
t.onclick(<имя_функции>)
Назначение
Подписка на «клик по черепашке»
(требует функцию с двумя параметрами)
t.ondrag(<имя_функции>)
Подписка на «перетаскивание
черепашки»
(требует функцию с двумя параметрами)
scr.onscreenclick(<имя_функции>)
Подписка на «клик по экрану»
def move(x, y):
scr.onscreenclick(move)
«Мозговой
штурм»
(требует функцию с двумя параметрами)

34.

Отрисовка нескольких фигур:
Создание пера для рисования
— объекта Turtle
Функция-обработчик
t.goto(x,
y)
перетаскивания
пера draw()
def move(x, y):
t.penup()
Создаём объект типа Turtle и
настраиваем его свойства.
Перо опущено, иначе рисования
не будет!
t.pendown()
scr = t.getscreen()
scr.onscreenclick(move)
t.ondrag(draw)
Создаём объект Screen как экран, по
которому может перемещаться
перо черепашки.
Клик по экрану (не черепашке!)
обрабатывается функцией move().
«Мозговой
штурм»
t.goto(x, y)

35.

Ваша задача:
Запрограммировать прототип графического редактора Simple
Paint.
Реализуйте отрисовку одной или нескольких кривых линий
одним цветом. Используйте объекты Turtle и Screen.
«Мозговой
штурм»
Если необходимо, используйте документацию.

36.

Модуль 5. Урок 3. ООП. Проект Simple Paint
Платформа:
Проект
Simple Paint

37.

Выполните задания на платформе
«Проект Simple Paint»
Проект
Simple Paint
learn.algoritmika.org

38.

Перерыв

39.

Модуль 5. Урок 3. ООП. Проект Simple Paint
«Мозговой штурм»:
События
клавиатуры

40.

Улучшаем приложение
➔ добавим возможность выбирать цвет нажатием на клавишу на
клавиатуре. Например, g — green (зелёный);
Для этого изучим подписку на события клавиатуры и их
обработку!
«Мозговой
штурм»
➔ запрограммируем рисование идеально прямых линий с
помощью клавиш со стрелками: Up, Down, Left, Right.

41.

События клавиатуры
1. Ввод новых объектов для подписки на события
клавиатуры не нужен: достаточно объекта Screen.
2. Чтобы объект Screen начал «слушать клавиши»,
необходимо ввести команду scr.listen(). По умолчанию
отслеживается только мышь.
3. Подписка на событие клавиатуры происходит с помощью
метода scr.onkey().
«Мозговой
штурм»
4. Для обработки напишем собственные функцииобработчики.

42.

Подписки на события: новая команда
Команда
t.onclick(<имя_функции>)
Назначение
Подписка на «клик по черепашке»
(требует функцию с двумя параметрами)
t.ondrag(<имя_функции>)
Подписка на «перетаскивание
черепашки» (требует функцию с двумя
scr.listen()
Команда, указывающая объекту Screen, что
нужно слушать и клавиши
scr.onkey(<имя_функции>, <клавиша>)
Подписка на «клик по клавише» (функция
должна быть без параметров)
«Мозговой
штурм»
параметрами)

43.

Изменение цвета пера клавишами:
Создание пера для рисования
— объекта Turtle
Функция-обработчик
перетаскивания
пера draw()
t.goto(x,
y)
def setGreen():
t.color('green')
scr = t.getscreen()
Обрабатываем нажатие на клавишу
‘g’ собственной функцией setGreen().
Перед подпиской на событие
указываем, что экран должен
следить и за клавишами.
scr.listen()
scr.onkey(setGreen,'g')
scr.onscreenclick(move)
t.ondrag(draw)
Возможность использования
других цветов задаётся
аналогичным образом.
«Мозговой
штурм»
Функция-обработчик переноса
пера в другую точку move()

44.

Рисование с помощью клавиатуры
➔ Подписка на нажатие клавиши-стрелки будет аналогичной
нажатию на клавишу с буквой.
◆
◆
◆
◆
Стрелка вверх — ‘Up’.
Стрелка вниз — ‘Down’.
Стрелка влево — ‘Left’.
Стрелка вправо — ‘Right’.
«Мозговой
штурм»
➔ В функциях-обработчиках однократного нажатия на стрелку опишем
перемещение опущенного пера черепашки в нужную сторону на 5
пикселей.

45.

Рисование с помощью клавиатуры
➔ Подписка на нажатие клавиши-стрелки будет аналогичной
нажатию на клавишу с буквой.
◆
◆
◆
◆
Стрелка вверх — ‘Up’.
Стрелка вниз — ‘Down’.
Стрелка влево — ‘Left’.
Стрелка вправо — ‘Right’.
Рассмотрим клавишу «стрелка вправо».
Как переместить перо на 5 пикселей вправо относительно
текущего положения?
«Мозговой
штурм»
➔ В функциях-обработчиках однократного нажатия на стрелку опишем
перемещение опущенного пера черепашки в нужную сторону на 5
пикселей.

46.

Рисование с помощью клавиатуры
Вспомним команды t.xcor() и t.ycor(), возвращающие текущие координаты
объекта!
Однократное нажатие на клавишу «стрелка вправо»:
t.xcor() + 5, t.ycor()
Какими будут координаты при нажатии на клавишу «стрелка вниз»?
Какой метод Turtle переместит черепашку в точку с такими координатами?
«Мозговой
штурм»
t.xcor(), t.ycor()

47.

Рисование с помощью клавиш:
Создание пера для рисования
— объекта Turtle
Функция-обработчик
перетаскивания
пера draw()
t.goto(x,
y)
Функция-обработчик переноса
пера в другую точку move()
def stepRight():
t.goto(t.xcor() + 5, t.ycor())
scr = t.getscreen()
scr.listen()
scr.onkey(stepRight,'Right')
Другие подписки на события
Обрабатываем нажатие на клавишу
«стрелка вправо» собственной
функцией stepRight().
Примечание. Шаг сдвига также
может быть определён как новое
свойство Turtle!
«Мозговой
штурм»
Функции-обработчики
изменения цвета пера

48.

Ваша задача:
Дополнить прототип графического редактора Simple Paint новым
функционалом.
Реализуйте изменение цвета пера нажатием на клавиши
клавиатуры (g — green, b — blue и др.).
«Мозговой
штурм»
Запрограммируйте возможность рисования прямых линий с
помощью клавиш-стрелок.

49.

Модуль 5. Урок 3. ООП. Проект Simple Paint
Платформа:
Проект
Simple Paint

50.

Выполните задания на платформе
«Проект Simple Paint»
Проект
Simple Paint
learn.algoritmika.org

51.

Модуль 5. Урок 3. ООП. Проект Simple Paint
Завершение
рабочего дня

52.

Публикация прототипа
и подведение итогов
➔ Опубликуйте прототипы проекта в «Лаборатории».
◆ Над каким проектом вы сегодня работали?
Чем он отличался от прошлых прототипов?
◆ Что показалось вам наиболее тяжёлым?
Как вам удалось справиться с трудностями?
Подведение итогов
рабочего дня
➔ Поделитесь с коллегами результатами работы:

53.

«Бонусные
задачи»
Подведение итогов
рабочего дня
Дополнительные задания для
повышения эффективности