Рисование пером: многоугольники, звёзды и сравнение с turtle в Python

Scratchобновлено 07.10.20269 мин чтенияесть тренажёр

Перо в Scratch — это расширение, которое позволяет спрайту оставлять след на сцене, как карандаш на бумаге. Опустили перо — спрайт рисует линию при каждом движении, подняли — перемещается без следа. С циклом «повторить» из нескольких блоков получаются многоугольники, звёзды и сложные узоры.

Загружаем…

Как подключить перо в Scratch

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

Расширение подключается к конкретному проекту. Если открыть новый проект, перо придётся добавить снова — это нормально, так устроены все расширения Scratch 3.0. Рисует не спрайт как картинка, а невидимый слой поверх фона: линии лежат под спрайтами, поэтому персонаж никогда не скрывается за собственным следом.

Сама идея — объект, который ползает по экрану и рисует хвостом линию, — придумана задолго до Scratch. Сеймур Пейперт описал в книге «Mindstorms» язык Logo, где дети управляли черепашкой с пером[1]. Scratch, созданный в MIT Media Lab, унаследовал эту черепашку в виде расширения, а Python — в виде модуля turtle, который можно запустить прямо в редакторе выше.

Блоки пера и что они делают

В категории «Перо» 9 блоков: очистка, печать, опускание и подъём пера, а также пять блоков для цвета и толщины линии. Запомнить их проще всего по таблице.

БлокДействиеСовет
«очистить всё»Стирает все линии и отпечатки со сценыСтавьте первым после зелёного флага
«печать»Оставляет на сцене отпечаток текущего костюмаУдобно для узоров из картинок
«опустить перо»Спрайт начинает рисовать при движенииСначала переместитесь в начальную точку
«поднять перо»Спрайт двигается без следаНужен перед каждым «прыжком» в новую точку
«установить цвет пера [■]»Цвет выбирают пипеткой или палитройПипеткой можно взять цвет прямо со сцены
«изменить [цвет] пера на (10)»Сдвигает цвет, насыщенность, яркость или прозрачностьВ цикле даёт плавную радугу
«установить размер пера (1)»Толщина линииДля детских рисунков удобно 3–5

Цвет пера в Scratch задаётся числом от 0 до 100: красный около 0, жёлтый около 15, зелёный около 30, синий около 65. После 100 шкала начинается заново, поэтому «изменить цвет пера на 10» в бесконечном цикле никогда не «сломается», а будет крутить радугу по кругу.

Первая фигура: квадрат пером

Чтобы нарисовать квадрат, спрайт 4 раза проходит 100 шагов и поворачивается на 90 градусов. Перед этим перо поднимают, переносят спрайт в начальную точку, стирают старый рисунок и только потом опускают перо.

когда щёлкнут по зелёному флагу
поднять перо
перейти в x: (0) y: (0)
повернуться в направлении (90)
очистить всё
установить размер пера (3)
опустить перо
повторить (4) раз
    идти (100) шагов
    повернуть вправо на (90) градусов

Квадрат пером в Scratch — классическое первое упражнение, которое восходит к черепашке Logo из книги Пейперта. Порядок первых блоков важен. Если опустить перо до «перейти в x: 0 y: 0», при каждом запуске от прошлого места спрайта к центру протянется лишняя линия. Если забыть «повернуться в направлении 90», квадрат будет каждый раз наклонён по-разному. Сцена Scratch имеет размер 480×360 с центром в точке (0, 0), так что квадрат со стороной 100 точно поместится.

Совет для отладки: временно поставьте внутрь цикла «ждать 0.5 секунд». Рисунок станет появляться по одной стороне, и вы увидите, где спрайт поворачивает не туда. Как устроены координаты и направления, подробно рассказано в уроке про движение в Scratch.

Многоугольники, звёзды и круги

Любой правильный многоугольник рисуется одним правилом: число повторов равно числу сторон, а угол поворота — 360, делённому на это число. Для треугольника это 120 градусов, для шестиугольника — 60.

ФигураПовторовШагПоворот
Треугольник3120120°
Квадрат410090°
Шестиугольник66060°
Пятиконечная звезда5150144°
Почти круг361010°

Звезда — исключение из правила «360 на n»: поворот 144° заставляет линию перескакивать через вершину, и за 5 шагов спрайт делает два полных оборота (5 × 144 = 720). Круг в Scratch рисуется как многоугольник с большим числом коротких сторон — при 36 сторонах глаз уже не видит углов.

Удобно создать переменную «стороны» и собрать универсальный скрипт: «повторить (стороны) раз → идти 60 шагов → повернуть на (360 / стороны) градусов». Меняя одно число, ребёнок сам замечает закономерность: чем больше сторон, тем ближе фигура к кругу. Больше о повторениях — в уроке про циклы в Scratch.

Узоры: вложенные циклы и радуга

Узор — это фигура, повторённая несколько раз с поворотом: внешний цикл крутит спрайт, внутренний рисует одну фигуру. Так из шестиугольника получается цветок, а из квадрата — снежинка.

когда щёлкнут по зелёному флагу
очистить всё
установить размер пера (2)
опустить перо
повторить (12) раз
    изменить [цвет] пера на (8)
    повторить (6) раз
        идти (60) шагов
        повернуть вправо на (60) градусов
    повернуть вправо на (30) градусов

Внешний цикл выполняется 12 раз, каждый раз поворачивая спрайт на 30°, — в сумме ровно полный оборот (12 × 30 = 360). Внутренний цикл рисует шестиугольник. Блок «изменить цвет пера на 8» даёт каждому лепестку свой оттенок. Попробуйте заменить 12 на 36, а 30 — на 10: узор станет плотным, как кружево.

Спираль получается, если длина шага растёт: заведите переменную «шаг», начните с 2 и прибавляйте 2 на каждом повторе, поворачивая на 91°. Лишний градус сдвигает каждый виток, и вместо квадрата получается закрученная спираль.

Те же рисунки на Python с черепашкой

Модуль turtle в Python — это прямой родственник пера в Scratch: команды pendown(), penup(), forward() и right() работают так же, как четыре знакомых блока: опустить, поднять, идти и повернуть. Меняется только запись.

import turtle

t = turtle.Turtle()
t.pensize(3)
t.pendown()
for i in range(4):
    t.forward(100)
    t.right(90)

Этот код рисует тот же квадрат, что и скрипт выше. Цикл for i in range(4) соответствует блоку «повторить 4 раза», а отступ в 4 пробела — тому, что блоки вложены в цикл. В редакторе вверху страницы уже лежит программа с узором из шести шестиугольников: нажмите «▶ Запустить», и черепашка нарисует его на белом холсте под редактором.

ScratchPython turtleВажное отличие
«опустить перо» / «поднять перо»t.pendown() / t.penup()Черепашка рисует сразу, без отдельной команды
«идти (100) шагов»t.forward(100)Одинаково
«повернуться в направлении (90)»t.setheading(0)В Scratch 90 — вправо, в turtle вправо — это 0
«установить цвет пера»t.pencolor("red")В Python цвет пишут словом или кодом
«очистить всё»t.clear()Стирает рисунок одной черепашки

Направления — главная ловушка при переходе. В Scratch направление 0 смотрит вверх, а 90 — вправо; в turtle угол 0 смотрит вправо, а 90 — вверх. Поворот вправо на 90 градусов при этом одинаков в обеих средах. Подробно модуль разобран в статье о черепашьей графике turtle в Python, а готовые фигуры — в уроке «рисуем фигуры черепашкой».

В школьной информатике черепашка тоже встречается: федеральная образовательная программа (ФОП ООО) называет исполнителей Робот, Черепашка и Чертёжник среди тем 8 класса[2]. Ребёнок, который рисовал многоугольники в Scratch, приходит на эту тему с готовым пониманием углов и циклов.

Когда рисование не работает

Если рисунок не появляется или выглядит странно, причина обычно одна из 4 типичных. Почти всегда причина в порядке блоков или в настройках, а не в ошибке Scratch.

  • Толщина линии 0 или прозрачность 100. Линия есть, но её не видно — поставьте размер от 1 и прозрачность 0.
  • Цвет линии совпадает с фоном на 100 %. Белая линия на белой сцене невидима — смените фон или цвет.
  • Нужен рисунок, который потом двигается как 1 объект. Готовый след — это не спрайт, его нельзя сдвинуть или повернуть целиком; для этого рисуйте костюм.
  • Фигура выходит за край сцены в 480×360. Спрайт упирается в границу, и линия ломается — уменьшите шаг.

Мифы о рисовании кодом

Миф о рисовании кодом обычно звучит так: «это не настоящее программирование» или «это только для художников». Оба мнения не подтверждаются.

Миф: «рисование кодом — развлечение, к программированию отношения не имеет». Это не подтверждается: в каждом узоре есть циклы, вложенность, переменные и вычисление углов — те же понятия, что в школьном курсе и на экзаменах.

Миф: «чтобы рисовать кодом, нужно уметь хорошо рисовать руками». Такой связи не существует: рисунок получается из чисел и правил, а не из движения руки. Многим детям, которые не любят рисовать карандашом, узоры кодом нравятся именно поэтому.

Создатели Scratch (Maloney и соавторы) описывают среду как место, где можно начать легко и дойти до сложного[3]: квадрат собирается за минуту, а узор с переменными и вложенными циклами может занять весь вечер.

Чего делать нельзя

Нельзя начинать рисовать до перемещения в начальную точку — отсюда берётся большинство лишних линий. Вот и другие правила.

  • Нельзя забывать «очистить всё» в начале скрипта: новые рисунки наложатся на старые.
  • Не стоит подбирать углы наугад, когда их можно вычислить: 360 делим на число сторон.
  • Не следует копировать блоки «идти» и «повернуть» 36 раз подряд вместо цикла «повторить».
  • Не стоит ставить «опустить перо» внутрь цикла — достаточно одного раза перед ним.
  • Нельзя ждать, что нарисованная линия будет реагировать на клики, как спрайт: это просто картинка на слое.

Источники

[1] Papert S. Mindstorms: Children, Computers, and Powerful Ideas. New York: Basic Books, 1980.

[2] Приказ Минпросвещения России от 18.05.2023 № 370 «Об утверждении федеральной образовательной программы основного общего образования».

[3] Maloney J., Resnick M., Rusk N., Silverman B., Eastmond E. The Scratch Programming Language and Environment // ACM Transactions on Computing Education. 2010. Vol. 10, № 4. Article 16.

[4] The Python Tutorial (официальная документация Python 3). Python Software Foundation.

Вопросы и ответы

Где найти перо в Scratch?

Его нет в палитре по умолчанию: нажмите кнопку «Добавить расширение» внизу слева и выберите «Перо». Категория появится в самом низу палитры.

Как стереть только часть рисунка?

Отдельного «ластика» нет. Можно рисовать поверх линией цвета фона или очистить всё и перерисовать нужную часть заново.

Можно ли рисовать мышкой, как в графическом редакторе?

Да: в цикле «повторять всегда» переносите спрайт к указателю мыши, а рисуйте, только если кнопка мыши нажата. Получится простая рисовалка.

Почему фигура рисуется не на том месте?

Скорее всего, не задана начальная точка и направление. Добавьте в начало «перейти в x: y:» и «повернуться в направлении 90».

Работает ли рисование пером в Scratch на планшете?

Да, расширение работает в браузерной версии на планшетах так же, как на компьютере. Сложные узоры с сотнями линий на слабом устройстве просто рисуются медленнее.

С чего перейти к Python после Scratch?

С модуля turtle: команды почти совпадают, а в официальной документации Python описан и сам язык[4]. Запустите узор в редакторе на этой странице и поменяйте числа.