Turtle. Линейные алгоритмы. Ссылка на методичку. Модуль 4. Урок 1

1.

Модуль 4. Урок 1.
Turtle.
Линейные алгоритмы
Ссылка на методичку

2.

Модуль 4. Урок 1. Turtle. Линейные алгоритмы
Обсуждение:
Новый заказ

3.

Получен новый заказ!
В ProTeam обратилась студия дизайна «Ваш уют».
Руководство студии планирует выпустить новую коллекцию обоев и
плитки с оригинальными рисунками.
Обсуждение
рабочих задач
Чтобы поставить производство на поток, нужен набор программ с
автоматической отрисовкой узоров.
Звучит интересно! Поможем заказчику?
Алёна,
менеджер проектов

4.

Рассмотрим одну из задач
Есть ли в Python инструменты для реализации такого заказа? Если
да, то какие и где узнать о них больше?
Обсуждение
рабочих задач
Задача. Поступил заказ от родителей мальчика, которому нравится всё, что связано с
морем и кораблями. Для своей комнаты он хочет узор кораблика, плывущего по морю.
Напишите программу, отрисовывающую кораблик как на картинке.

5.

Вспомним компоненты стандартной
библиотеки Python
Есть готовый модуль для работы с графикой — turtle!
Встроенные
возможности
(исполняются
сразу)
Модуль random
(работа со
случайными
величинами)
Модуль turtle
(графические
примитивы)
Модуль os
(взаимодействие
с системой ПК)
Модуль time
(получение и
подсчёт времени)
...
Обсуждение
рабочих задач
Стандартная библиотека Python

6.

Рассмотрим задачу внимательнее
Любой рисунок — это комбинация геометрических фигур: отрезков, углов,
окружностей и др.
Для работы с графикой нужно уметь:
❏ Задавать параметры фигур
(например, размер окружности
определяется её радиусом).
❏ Располагать фигуры относительно
друг друга в рабочем пространстве.
Обсуждение
рабочих задач
❏ Знать команды отрисовки
простейших геометрических фигур
(модуль turtle).

7.

Работа с графикой трудна и интересна!
Раньше вы обращали внимание, что работа разработчика тесно
связана с математикой. Сегодня мы ещё раз убедимся в этом.
Изучение команд
модуля turlte
Изучение разделов
математики, нужных
разработчикам
Умение
программировать
простые фигуры
Умение
составить из
фигур картинку
Обсуждение
рабочих задач
Автоматическая
отрисовка
изображений

8.

Цель рабочего дня —
автоматизировать отрисовку узоров для студии
дизайна.
Заказчик производит эксклюзивные материалы под личные
запросы клиентов.
● узнаете, как устроено изображение в памяти
компьютера и как оно рисуется на экране;
● узнаете и примените команды модуля turtle для
отрисовки геометрических фигур;
● узнаете и примените инструменты математики для
работы с изображениями.
Обсуждение
рабочих задач
Сегодня вы:

9.

Модуль 4. Урок 1. Turtle. Линейные алгоритмы
«Мозговой штурм»:
Модуль turtle

10.

Работа с графикой
Перед тем, как разбирать команды для работы с графикой,
обсудим, как устроены изображения в памяти компьютера.
Но как зашифровать нулями и единицами
изображение?
«Мозговой
штурм»
Мы уже обсуждали, что все данные в памяти компьютера
хранятся в виде единиц и нулей — «есть сигнал» и «нет
сигнала».

11.

Пиксель —
это минимальная (неделимая) часть графического
изображения
Растровое изображение —
совокупность точек (пикселей),
используемых для отображения
картинки на экране компьютера.
Модуль turtle работает с
растровой графикой
«Мозговой
штурм»
Растр — это набор пикселей.

12.

Работа с растровой графикой
Современные мониторы —
цветные. Цвет одного пикселя
кодируется набором нулей и
единиц.
«Мозговой
штурм»
Если бы мониторы были чёрнобелыми, то информация о пикселе
хранилась бы как ноль («нет цвета») или
один («есть цвет»).

13.

Работа с растровой графикой
К счастью, нам не нужно помнить последовательности из нулей и единиц
для задания цвета геометрической фигуры.
Интерпретатор узнаёт многие цвета по названиям:
Название
Цвет
Название
красный
"red"
розовый
"pink"
зелёный
"green"
небесно-голубой
"light blue"
синий
"blue"
оранжевый
"orange"
жёлтый
"yellow"
ярко-зелёный
"lime"
чёрный
"black"
фиолетовый
"violet"
«Мозговой
штурм»
Цвет

14.

Отрисовка растрового изображения
На платформе
черепашка по
умолчанию
обозначается
стрелкой.
«Мозговой
штурм»
Графические объекты модуля turtle отрисовываются в отдельной части
окна специальным исполнителем команд — черепашкой (англ. turtle —
«черепаха»).

15.

Отрисовка растрового изображения
Графические объекты модуля turtle отрисовываются в отдельной части
окна специальным исполнителем команд — черепашкой (англ. turtle —
«черепаха»).
«Мозговой
штурм»
Начальное положение
исполнителя при запуске
программы:

16.

Отрисовка растрового изображения
Подключение команд модуля turtle:
from turtle import *
Базовые команды:
Значение
forward(<количество пикселей>)
Переместить черепашку вперёд на
указанное число пикселей
left(<количество градусов>)
Повернуть черепашку влево на указанный
угол в градусах
right(<количество градусов>)
Повернуть черепашку вправо на указанный
угол в градусах
color(<название цвета>)
Установить исполнителю новый цвет с
указанным названием
exitonclick()
Оставить изображение на экране после
исполнения программы
«Мозговой
штурм»
Команда

17.

Рассмотрим задачу
«Мозговой
штурм»
Задача. Заказчик предпочитает минимализм и хочет купить плитку с рисунком
квадрата. Напишите программу, отрисовывающую чёрный квадрат без заливки
со стороной 150 пикселей.
Как подключить модуль turtle? Какие команды нужно использовать?

18.

Рассмотрим задачу
Задача. Заказчик предпочитает минимализм и хочет купить плитку с рисунком
квадрата. Напишите программу, отрисовывающую чёрный квадрат без заливки
со стороной 150.
а
Возможное решение:
а
а
а
«Мозговой
штурм»
90°

19.

Рассмотрим задачу
Задача. Заказчик предпочитает минимализм и хочет купить плитку с рисунком
квадрата. Напишите программу, отрисовывающую чёрный квадрат без заливки
со стороной 150 пикселей.
from turtle import *
forward(150)
left(90)
left(90)
forward(150)
left(90)
forward(150)
exitonclick()
«Мозговой
штурм»
forward(150)

20.

Перед тем, как продолжить:
1. Как изменить программу, чтобы черепашка отрисовывала не
чёрный, а красный квадрат?
«Мозговой
штурм»
2. Клиент передумал и решил украсить плитку более мелкими
квадратами со стороной 90. Сколько строк программы нужно
изменить? Как?

21.

Отрисовка растрового изображения
Подключение команд модуля turtle:
from turtle import *
Ещё один набор команд:
Значение
pensize(<количество пикселей>)
Изменить размер пера, которым рисует
исполнитель (изначально — 1)
circle(<радиус круга>)
Нарисовать круг с заданным радиусом в
пикселях
«Мозговой
штурм»
Команда

22.

Рассмотрим задачу
«Мозговой
штурм»
Задача. Заказчик хочет плитку с треугольниками. Он ещё не определился с
цветом, поэтому нужно запрограммировать оба: красный и голубой. Длина
стороны треугольника — 110 пикселей.
Как нарисовать треугольник? Какие команды нужно использовать?

23.

Рассмотрим задачу
Задача. Заказчик хочет плитку с треугольниками. Он ещё не определился с
цветом, поэтому нужно запрограммировать оба: красный и голубой. Длина
стороны треугольника — 110 пикселей.
Возможное решение:
60°
60°
«Мозговой
штурм»
60°

24.

Возможное решение:
from turtle import *
color('red')
forward(110)
left(60)
forward(110)
left(60)
forward(110)
left(60)
«Мозговой
штурм»
color('blue')
forward(110)
left(60)
forward(110)
left(60)
forward(110)
exitonclick()
Работает неправильно!
Кажется, ошиблись с углом...

25.

Правильное решение
Задача. Заказчик хочет плитку с треугольниками. Он ещё не определился с
цветом, поэтому нужно запрограммировать оба: красный и голубой. Длина
стороны треугольника — 110 пикселей.
Черепашка поворачивается не на 60, а
на 120 градусов («снаружи»
треугольника, а не «внутри»)!
60°
60°
120°
«Мозговой
штурм»
60°

26.

Правильное решение:
from turtle import *
color('red')
forward(110)
left(120)
forward(110)
forward(110)
left(120)
color('blue')
forward(110)
left(120)
forward(110)
left(120)
forward(110)
exitonclick()
После того, как
исполнитель нарисует
первый треугольник,
его нужно «довернуть»
до начального
положения.
«Мозговой
штурм»
left(120)

27.

Перед тем, как продолжить:
1. Как изменить программу, чтобы черепашка отрисовывала
больший треугольник со стороной 150?
«Мозговой
штурм»
2. Клиент хочет добавить к сравнению ещё один цвет — зелёный.
Как изменить программу, чтобы она отрисовывала
треугольники трёх цветов?

28.

Модуль 4. Урок 1. Turtle. Линейные алгоритмы
Платформа:
Ваш уют:
оформление комнат

29.

Выполните задания на платформе
«Ваш уют: оформление комнат»
Работаем на
платформе
learn.algoritmika.org

30.

Перерыв

31.

Модуль 4. Урок 1. Turtle. Линейные алгоритмы
«Мозговой штурм»:
Математика для
разработчика

32.

Отрисовка растрового изображения
Ещё некоторые важные команды:
begin_fill()
end_fill()
penup()
pendown()
goto(<координата Х>, <координата Y>)
Значение
Начать заливку фигуры (следом идёт
команда рисования фигуры)
Завершить заливку фигуры
Поднять перо исполнителя (полезно при
рисовании нескольких фигур)
Опустить перо исполнителя
Переместить исполнителя в точку с
указанными координатами
«Мозговой
штурм»
Команда

33.

Рассмотрим задачу
Задача. Запрограммировать узор для обоев из трёх кругов. Параметры кругов:
Слева наверху: жёлтый маленький круг радиусом 30 пикселей.
Внизу посередине: зелёный круг среднего размера радиусом 40 пикселей.
Справа наверху: красный большой круг радиусом 50 пикселей.
Как решить эту задачу?
Какие расположить круги в разных местах?
«Мозговой
штурм»
❏
❏
❏

34.

Координатная плоскость
Положение черепашки на плоскости определяется двумя числами —
координатами.
При запуске программы черепашка
появляется в начальной точке (0, 0).
(200, 200)
Начало
(0, 0)
(-200, - 200)
(200,- 200)
«Мозговой
штурм»
(-200, 200)

35.

Координатная плоскость
Положение черепашки на плоскости определяется двумя числами —
координатами.
При запуске программы черепашка
появляется в начальной точке (0, 0).
➢ Чтобы переместить исполнителя,
нужно задать ему новые
координаты.
(200, 200)
Начало
(0, 0)
goto(<координата Х>, <координата Y>)
(-200, - 200)
(200,- 200)
«Мозговой
штурм»
(-200, 200)

36.

Вернёмся к задаче
Задача. Запрограммировать узор для обоев из трёх кругов. Параметры кругов:
Слева наверху: жёлтый маленький круг радиусом 30 пикселей.
Внизу посередине: зелёный круг среднего размера радиусом 40 пикселей.
Справа наверху: красный большой круг радиусом 50 пикселей.
«Мозговой
штурм»
❏
❏
❏
Попробуем нарисовать первый круг.
Как это сделать?

37.

Вернёмся к задаче
Задача. Запрограммировать узор для обоев из трёх кругов. Параметры кругов:
Слева наверху: жёлтый маленький круг радиусом 30 пикселей.
Внизу посередине: зелёный круг среднего размера радиусом 40 пикселей.
Справа наверху: красный большой круг радиусом 50 пикселей.
from turtle import *
penup()
goto(-150, 130)
pendown()
color('yellow')
begin_fill()
circle(30)
end_fill()
exitonclick()
Чтобы при
перемещении
черепашки не
оставалось следов,
нужно поднимать и
опускать перо.
«Мозговой
штурм»
❏
❏
❏

38.

Вернёмся к задаче
Задача. Запрограммировать узор для обоев из трёх кругов. Параметры кругов:
❏
❏
❏
Слева наверху: жёлтый маленький круг радиусом 30 пикселей.
Внизу посередине: зелёный круг среднего размера радиусом 40 пикселей.
Справа наверху: красный большой круг радиусом 50 пикселей.
from turtle import *
penup()
goto(-150, 130)
color('yellow')
begin_fill()
circle(30)
end_fill()
exitonclick()
Чтобы сделать заливку
фигуры цветом, нужно
поместить отрисовку
фигуры между begin_fill() и
end_fill().
«Мозговой
штурм»
pendown()

39.

Вернёмся к задаче
Задача. Запрограммировать узор для обоев из трёх кругов. Параметры кругов:
❏
❏
❏
Слева наверху: жёлтый маленький круг радиусом 30 пикселей.
Внизу посередине: зелёный круг среднего размера радиусом 40 пикселей.
Справа наверху: красный большой круг радиусом 50 пикселей.
from turtle import *
penup()
goto(-150, 130)
color('yellow')
begin_fill()
circle(30)
end_fill()
exitonclick()
Как добавить второй и третий круг?
«Мозговой
штурм»
pendown()

40.

#желтый круг
#красный круг
penup()
penup()
goto(-150, 130)
goto(130, 110)
pendown()
pendown()
color('yellow')
color('red')
begin_fill()
begin_fill()
circle(30)
circle(50)
end_fill()
end_fill()
#зелёный круг
exitonclick()
penup()
goto(0, -100)
pendown()
color('green')
begin_fill()
circle(40)
end_fill()
«Мозговой
штурм»
from turtle import *

41.

Перед тем, как продолжить:
1. Даны координаты точек перемещения черепашки:
(100, 120), (0, -100), (-150, 0), (100, 120).
Какая фигура отобразится на координатной плоскости после
перемещения (за это время перо не поднималось)?
2. Можно ли оптимизировать прошлую
программу с помощью функций? Как?
«Мозговой
штурм»
1. Как изменить код предыдущей программы, чтобы вместо узора
из кругов появился аналогичный узор из квадратов?

42.

Модуль 4. Урок 1. Turtle. Линейные алгоритмы
Платформа:
Ваш уют:
оформление комнат 2

43.

Выполните задания на платформе
«Ваш уют: оформление комнат 2»
Работаем на
платформе
learn.algoritmika.org

44.

Модуль 4. Урок 1. Turtle. Линейные алгоритмы
Завершение
рабочего дня

45.

Для завершения работы
пройдите техническое интервью
1. Что такое пиксель? С каким видом графики работает модуль
turtle? Что такое черепашка?
Подведение итогов
рабочего дня
2. Какие геометрические фигуры вы умеете рисовать с
помощью черепашки?
3. Как задать положение черепашки на координатной
плоскости?
Костя,
Алёна,
старший разработчик
менеджер проектов

46.

Оценка эффективности проделанной
работы
Поделитесь с коллегами:
2. Что получилось не так, как хотелось?
3. Что нужно сделать, чтобы в следующий раз избежать
неудачи?
Подведение итогов
рабочего дня
1. Что у вас получилось лучше всего?

47.

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