Создаём с p5.js

Короткий курс творческого программирования с p5.js — библиотекой JavaScript для рисования и анимации на холсте. Ученик начинает с анимированного рисунка, на который уходит всего несколько строк кода, и от зала к зале осваивает элементы, из которых такое пишется: setup() и draw(), фигуры, цвета, переменные, условия, циклы, текст, собственные функции и массивы. Курс завершается двумя полноценными скетчами: системой частиц и рекурсивным фрактальным деревом.

В лабе 35 залов, и большинство идёт в трёх тактах: зал наблюдения, зал «Проверьте себя» и, по некоторым темам, зал «Напишите код».

• Наблюдение. Панель с кодом с одной стороны и работающим холстом с другой. Ученик двигает ползунки и видит, как одновременно меняются рисунок и числа в коде. Код он не правит: меняются только значения.
• Проверьте себя. Один-два вопроса с выбором ответа и, в большинстве залов, задача расставить строки короткой программы по порядку.
• Напишите код. Одно или несколько полей, где ученик вводит строку кода (вызов функции p5.js, оператор, условие, заголовок for, функцию), и она проверяется. Если верно, результат появляется на холсте, когда задание что-то рисует.

Ставок нет. В залах наблюдения нужно только смотреть и пробовать элементы управления; залы с вопросами и залы с вводом кода считаются пройденными, когда ученик выполнил всё, что в них требуется.

Залы по темам: 1 введение; 2-3 setup(); 4-5 draw(); 6-7 фигуры; 8-10 fill, stroke и noStroke; 11-12 цвета RGB; 13-15 глобальные и локальные переменные; 16-17 системные переменные; 18-20 if; 21-23 for; 24-25 text(); 26-28 собственные функции; 29-31 массивы; 32-33 forEach, map и filter; 34-35 проекты.

Чему учимся

Ученик учится читать программу на p5.js и писать собственные фрагменты, усваивая идею, что код описывает происходящее в каждом кадре.

• Знать, когда выполняется каждая часть: setup() один раз, в начале; draw() около 60 раз в секунду, а frameCount считает кадры (залы 2-5).
• Рисовать с помощью ellipse, rect и line в системе координат с началом в левом верхнем углу и задавать цвет с помощью fill, stroke и noStroke (залы 6-10).
• Понимать цвет RGB как три числа от 0 до 255 (залы 11-12).
• Различать глобальные переменные, которые сохраняются между кадрами, и локальные, которые сбрасываются при каждом вызове, и пользоваться +=, -= и *= (залы 13-15).
• Использовать то, что p5.js уже знает об окружении: mouseX, mouseY, width, height, mouseIsPressed (залы 16-17).
• Принимать решения с помощью if и отличать = от == (залы 18-20).
• Повторять действия циклом for и узнавать три его части (залы 21-23).
• Писать текст на холсте с помощью text(), textSize() и textAlign() (залы 24-25).
• Определять функции с параметрами и с return (залы 26-28).
• Хранить много значений в массиве, добавлять и удалять элементы и обходить массив с помощью for...of, forEach, map и filter (залы 29-33).
• Собрать всё вместе в двух более длинных скетчах с массивами, функциями и рекурсией (залы 34-35).

Ключевые математические идеи

Это лаб по программированию; математические идеи — те, на которых держится рисунок.

• Координаты. Холст — декартова плоскость с началом в левом верхнем углу и осью y, направленной вниз; эллипс или прямоугольник определяется положением и размером.
• Цвет RGB. Каждый цвет — тройка (R, G, B) со значениями от 0 до 255; (255, 0, 0) — чисто красный, а (0, 0, 255) — чисто синий.
• Остаток от деления. В зале 4 используется x % 400: когда x достигает 400, остаток снова становится 0, и шар начинает движение слева.
• Переменная как состояние. Счётчик, который растёт в каждом кадре и сравнивается с пределом (отскакивающий шар в зале 18).
• Условия и сравнения. Операторы >, >=, ==, !=; = присваивает, а не сравнивает.
• Итерация. Цикл for с началом, условием и шагом рисует ряд кругов с постоянным интервалом; изменение шага, начала или конца меняет их число.
• Функция как преобразование. Функция с return возвращает значение (cubo(3) равно 27); map применяет функцию к каждому элементу массива.
• Индексы. Массив начинается с индекса 0: при lista = [1, 2, 3] значение lista[1] равно 2, а lista.indexOf(3) — 2.
• Рекурсия. В дереве из зала 35 функция rama(len, n) вызывает сама себя с меньшей длиной (коэффициент) и на один уровень меньше и останавливается, когда n достигает 0; push() и pop() сохраняют и восстанавливают положение.

Заметки для урока

• Ученик не пишет программу целиком: задания на ввод кода — это одна-две строки, а всё остальное — двигать элементы управления, выбирать варианты и расставлять строки. Это первое знакомство с p5.js, а не мастерская свободного программирования.
• Задания на ввод кода проверяют написанное (функцию и её аргументы или вид выражения) и при ошибке показывают пример; преподаватель видит, что пробовал ученик, в том числе неудачные попытки.
• Вопросы про if (x = 5), который присваивает вместо сравнения, а JavaScript при этом не предупреждает, и про локальные и глобальные переменные — те места, где стоит остановиться вместе с классом.
• Два последних зала хорошо работают на проекторе: ученик меняет гравитацию, отскок, угол или глубину и связывает каждый параметр со строкой кода.

Уровень: бахильерато (информатика). Предварительных знаний по программированию не требуется. Используется JavaScript; в зале 20 отмечено, что, в отличие от Python, скобки в if обязательны.