Примеры фигур на Processing/p5.js

НЕ ОБЯЗАТЕЛЬНО ДЛЯ НОВИЧКОВ

Приветствую! Здесь вы наверняка найдете, что ищете. Примеры в лаборатории рассчитаны на то, что мы разбираем что-то конкретное.

Текущая статья посвящена p5.js и Processing — готовый код фигур с подробным разбором каждой строки: квадрат, треугольник, цветок, снежинка, фракталы, анимация.

Поэтому за теорией по текущей теме вам — в энциклопедию. Если ещё не погружались, то маршрут прост:

  1. Основы
  2. Система и сеть
  3. Данные и разметка
  4. Код и разработка
  5. Языки
  6. Искусственный интеллект
  7. Проект
  8. Инфраструктура и безопасность
  9. Спин-офф

Обязательно пройдитесь.

А теперь приступим к нашему предмету.

Теория и соседние материалы

Canvas 2D — программируемая графика, JavaScript — о разделе.

Веб-игры на HTML5 и Canvas, SVG — рисунки кодом.

Основы рисования на p5.js

p5.js — библиотека JavaScript для рисования и анимации прямо в браузере. Её часто ставят на курсах по творческому программированию, медиа-арту и веб-дизайну. Processing — старший брат на Java: те же идеи (setup, draw, линии, круги, цвета), другой синтаксис.

С чего начать

Теория по Canvas — Canvas 2D.

Тот же стиль «черепашки», но на Python — примеры Turtle.

Вектор в HTML без Canvas — SVG — рисунки кодом.

3D — Panda3D.

Здесь — готовые скетчи p5.js с разбором строк: скопировали в редактор, нажали ▶, получили картинку.

Как запустить пример за 30 секунд

  1. Откройте editor.p5js.org — бесплатный онлайн-редактор, регистрация необязательна.
  2. Слева вкладка sketch.js — удалите шаблонный код.
  3. Вставьте код из примера целиком (включая функции turtleForward / turtleLeft, если они есть в блоке).
  4. Нажмите кнопку ▶ Play (или Ctrl+Enter).
  5. Справа появится холст с рисунком. Ошибка в консоли внизу — красная строка; чаще всего опечатка или забыли скопировать вспомогательные функции.

Локально: файл index.html + sketch.js (каркас в разделе ниже).

Где Плюсы
editor.p5js.org Ничего не ставить, сразу рисовать
HTML + CDN Свой сайт, портфолио, урок офлайн
Processing IDE (Java) Десктоп, похожий API, см. таблицу в конце

Базовые термины

Термин Простыми словами
setup() Запускается один раз при старте: создать холст, фон, нарисовать статичную картинку
draw() Вызывается много раз подряд (каждый кадр) — анимация, игры, интерактив
createCanvas(w, h) Создаёт «лист» для рисования размером w×h пикселей
background(..) Заливает весь холст цветом (как ластик + заливка)
stroke / fill Цвет контура и заливки фигуры
line, rect, circle Линия, прямоугольник, круг/эллипс
translate, rotate Сдвинуть начало координат, повернуть систему осей
push / pop Сохранить и вернуть настройки (как «я рисую здесь, потом вернусь»)
noLoop() Остановить повтор draw() — для одной картинки без анимации

Какую фигуру выбрать

Вы ищете… Пример ниже Идея
Квадрат, многоугольник Квадрат, n-угольник Цикл + поворот на 360°/n
Треугольник Треугольник 3 стороны, поворот 120°
Дом, крыша Домик Прямоугольник + два наклонных ребра
Цветок Цветок Круги по кругу или дуги
Снежинка Снежинка Лучи из центра
Дерево, фрактал Дерево, Кох Рекурсия — функция вызывает себя
Спираль, роза Спираль, Роза Формула в полярных координатах
Движение Анимация draw() без noLoop()

Обязательный каркас

Любой статичный скетч строится по схеме: холст → фон → рисование → стоп.

function setup() {
  createCanvas(400, 400);
  background(255);
  angleMode(DEGREES);

  // здесь ваш рисунок

  noLoop();
}

function draw() {
  // для анимации: уберите noLoop() и рисуйте здесь каждый кадр
}

Разбор:

  • function setup() — p5.js сам вызывает эту функцию при загрузке страницы; писать setup() вручную не нужно.
  • createCanvas(400, 400) — окно 400×400 px; width и height потом доступны как переменные.
  • background(255) — белый фон (одно число = оттенки серого 0…255). Цвет RGB: background(255, 0, 0) — красный.
  • angleMode(DEGREES) — углы в градусах (90° = прямой угол). По умолчанию в p5 — радианы; для школы удобнее градусы.
  • noLoop() — после первого кадра draw() больше не вызывается; картинка «замирает». Для GIF-подобной анимации noLoop() не ставят.

Локальный запуск — index.html:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8" />
  <script src="https://cdn.jsdelivr.net/npm/p5@1.11.0/lib/p5.min.js"></script>
</head>
<body>
  <script src="sketch.js"></script>
</body>
</html>

Разбор:

  • Строка <script src="..p5.min.js"> подключает библиотеку с CDN (интернет нужен один раз при загрузке).
  • sketch.js — ваш код с setup() и draw(); имя файла может быть любым, если путь в HTML совпадает.
Система координат

Точка `(0, 0)` — левый верхний угол холста.

X растёт вправо, Y — вниз (как в Canvas и в Turtle на экране).

Центр экрана: `translate(width / 2, height / 2)` — так фигура оказывается посередине, а не в углу.

Типичные ошибки новичков
  • Белый экран — забыли нарисовать что-то в setup() или координаты за пределами холста.
  • turtleForward is not defined — не скопировали вспомогательные функции черепашки из раздела ниже.
  • Фигура «уехала» в угол — не сделали translate(width/2, height/2).
  • Анимация не идёт — стоит noLoop(); уберите для draw().
  • Углы «не те» — добавьте angleMode(DEGREES) или переводите радианы через radians(90).

Вспомогательные функции «черепашки»

На Python есть модуль turtle с командами forward и left. В p5.js их нет — добавляем один раз в начало файла (перед setup):

function turtleForward(len) {
  line(0, 0, len, 0);
  translate(len, 0);
}

function turtleLeft(deg) {
  rotate(deg);
}

Разбор:

  • После translate и rotate «вперёд» — это ось X в текущем направлении; линия идёт от (0,0) до (len, 0) в локальных координатах.
  • translate(len, 0) переносит «черепашку» в конец отрезка — следующая линия продолжит контур.
  • rotate(deg) поворачивает всю систему координат на deg градусов (при angleMode(DEGREES)).

Перед каждой фигурой:

push();                          // запомнить текущие translate/rotate/цвета
translate(width / 2, height / 2); // центр холста
// … рисуем …
pop();                           // вернуть как было — не ломать следующие фигуры

Стартовые фигуры

Пять типов, которые чаще всего ищут вместе с Turtle и Processing: квадрат, треугольник, домик, цветок, снежинка. Дальше — сетки, фракталы и функции.

Квадрат на p5.js (как forward + left в Turtle)

Четыре стороны, каждый поворот 90°. Длина стороны 100 px — меняйте на своё.

Разбор:

  • stroke(0) — чёрный контур; noFill() — без заливки, только линии.
  • strokeWeight(2) — толщина линии 2 px.
  • for (let i = 0; i < 4; i++) — цикл 4 раза: 4 стороны квадрата.
  • turtleForward(100) — сторона 100 px; turtleLeft(90) — поворот на прямой угол налево (против часовой в математической системе, но p5 рисует Y вниз — визуально получается привычный квадрат).
  • push / pop — изоляция: после квадрата координаты не «сломаны» для других объектов.

Что изменить: 100 → 150 — больший квадрат; цикл i < 6 и turtleLeft(60) — шестиугольник (360÷6 = 60°).

Равносторонний треугольник

Три стороны, внешний угол 120° (180° − 60° угла треугольника).

Разбор:

  • i < 3 — три итерации, три ребра.
  • 120 — поворот между сторонами равностороннего треугольника; формула для правильного n-угольника «черепашкой»: поворот = 360 / n снаружи… для треугольника внутренний 60°, снаружи 120°.

Связь с математикой: сумма внешних углов любого выпуклого многоугольника = 360°.

Домик (стены + крыша)

Прямоугольник из четырёх сторон и две линии крыши под 45°.

Разбор:

  • fill(200, 180, 140) — бежевые стены; контур остаётся stroke(50) — тёмно-серый.
  • Сначала цикл рисует стены (4 поворота по 90°).
  • После цикла turtleLeft(45) + forward(70) — наклонная первая половина крыши; left(90) + forward(70) — вторая.
  • translate(width/2 - 50, height/2 + 50) — сдвиг, чтобы дом стоял по центру и «на земле», а не уехал вверх.

Что изменить: fill(255, 0, 0) — красные стены; 70 → 90 — более острая или пологая крыша.

Простой красный цветок

Шесть маленьких кругов-лепестков вокруг центра + жёлтая серединка.

Разбор:

  • circle(x, y, d) — круг с диаметром d (не радиусом!). Центр лепестка: (0, -30) — на 30 px выше центра цветка.
  • rotate(60) после каждого лепестка — 360÷6 = 60° между лепестками.
  • Второй проход: noStroke() убирает контур, fill жёлтый — рисуем серединку circle(0, 0, 20).

Аналог в Turtle: цветок из circle — там t.circle(30) и t.right(60).

Цветок из кругов с заливкой (розовый)

Те же 6 лепестков, но залитые круги большего размера — лепестки перекрываются.

Разбор:

  • noStroke() — только заливка, без обводки.
  • circle(0, -50, 100) — лепесток дальше от центра (−50) и шире (диаметр 100).

Что изменить: i < 8 и rotate(45) — восемь лепестков; fill(255, 0, 255) — фиолетовый.

Простая снежинка

Восемь лучей из центра — поворот на 45° между лучами.

Разбор:

  • Тёмный фон background(20, 30, 50) — контраст с голубыми лучами.
  • line(0, 0, 50, 0) — отрезок длиной 50 от центра; без translate после линии все лучи стартуют из одной точки — это и нужно.
  • 8 лучей × 45° = 360°.

Усложнение: на конце каждого луча нарисуйте маленький line — классическая «веточка» снежинки (см. снежинку Коха).

Многослойный цветок

Три слоя лепестков разного цвета + жёлтый центр. Функция arcLeaf рисует один лепесток через кривую Безье.

Разбор:

  • Три цикла — три «яруса» лепестков; у каждого свой fill и шаг поворота.
  • beginShape() … endShape(CLOSE) — произвольный многоугольник/заливка по точкам.
  • bezierVertex — сглаженная кривая; лепесток похож на каплю, а не на круг.

Фрактальное дерево с рекурсией

Функция drawTree рисует ветку и вызывает сама себя для двух ответвлений — получается дерево.

Разбор:

  • depth = 6 — глубина рекурсии; level === 0 — базовый случай: дальше не рисуем (иначе бесконечность).
  • translate(width/2, height-20) + rotate(-90) — ствол растёт вверх от низа экрана (ось Y в p5 смотрит вниз, поэтому −90°).
  • map(level, 0, depth, 100, 180) — чем выше ветка, тем светлее коричневый (иллюзия освещения).
  • len * 0.7 — каждый уровень короче на 30%; угол ±30° — развилка.
  • push/pop вокруг каждой ветви — после левой ветки координаты восстанавливаются для правой.

Осторожно: depth больше 10 — тормоза; для отчёта хватит 5–7.

Сердце (кривые Безье)

Готовая «картинка на 14 февраля» — одна фигура из двух кривых.

Разбор:

  • bezierVertex(cx1, cy1, cx2, cy2, x, y) — кривая к точке (x,y) с двумя «ручками» управления.
  • Две такие кривые дают симметричное сердце; rotate(-50) наклоняет фигуру.

Квадрат из точек (двойной цикл)

8×8 сетка чёрных кружков — классика «циклы внутри цикла».

Разбор:

  • Внешний цикл row — строки, внутренний col — столбцы; всего 64 точки.
  • width/2 - 100 — смещение сетки к центру; col * step — шаг 25 px между точками.
  • circle(x, y, 12) — диаметр точки 12 px.

Шахматная сетка из точек

Тот же двойной цикл, цвет зависит от (row + col) % 2.

Разбор:

  • (row + col) % 2 === 0 — чётная сумма индексов → чёрная клетка, нечётная → белая (как шахматная доска).
  • Тернарный оператор условие ? a : b — короткая запись if/else для цвета.

Сетка квадратов

Вместо circle — rect в двойном цикле 3×3.

Разбор:

  • rect(x, y, w, h) — левый верхний угол (x,y), ширина и высота 20.
  • step = 30 — расстояние между началами квадратов; квадрат 20×20 — зазор 10 px.

Примеры фигур (функции и формулы)

Когда базовые циклы освоены, выносите рисование в функции — один раз написали drawStar, вызываете с разными параметрами.

1. Базовые многоугольники

1.1. Равносторонний треугольник через вершины

Вместо «черепашки» — три точки на окружности через cos / sin.

Разбор:

  • -90 — первая вершина «сверху» (как на часах в 12).
  • cos(a) * side, sin(a) * side — координаты на окружности радиуса side.
  • doFill = false — необязательный параметр; drawEquilateralTriangle(100, true) зальёт треугольник голубым.

1.2. Прямоугольник и квадрат

Разбор:

  • rectMode(CENTER) — rect(0, 0, w, h) рисует от центра, а не от угла; удобно после translate(width/2, height/2).
  • drawRectangle(100, 100) — квадрат; (100, 200) — вытянутый прямоугольник.

1.3. Правильный n-угольник

Разбор:

  • drawRegularPolygon(5, 100) — пятиугольник; 6 — шестиугольник, 8 — восьмиугольник.
  • (360 / n) * i — равномерное распределение вершин по кругу.

2. Звёздчатые фигуры

2.1. Звезда с n лучами

Чередуются внешний и внутренний радиус — классическая «звёздочка».

Разбор:

  • points * 2 вершин — на каждый луч два радиуса (наружу и внутрь).
  • i % 2 === 0 — чётные шаги на внешнем круге, нечётные на внутреннем.
  • drawStar(5, 100, 40) — флаг с пятью лучами; innerR ближе к outerR — «толстая» звезда, дальше — острая.

Примеры вызова:

drawStar(5, 100, 40);
drawStar(6, 90, 45);
drawStar(8, 110, 50);

3. Цветочные и радиальные узоры

3.1. Цветок — лепестки по формуле

Лепестки на окружности радиуса radius через тригонометрию.

Разбор:

  • i * (360 / petalCount) — угол i-го лепестка в градусах; radians(..) — p5 для cos/sin принимает радианы.
  • Центры лепестков лежат на окружности — цветок «ровный», в отличие от вращения одного круга.

3.2. Роза из дуг

Разбор:

  • arc(x, y, w, h, start, stop) — дуга эллипса от угла start до stop.
  • Каждый лепесток рисуется в своей повёрнутой системе координат (push/rotate/pop).

4. Фракталы

4.1. Дерево Пифагора

Похоже на рекурсивное дерево выше; угол 35° и другие пропорции — другой силуэт.

4.2. Снежинка Коха

Отрезок заменяется на «горку» ∧; повторяем — граница становится фракталом.

Разбор:

  • Три стороны равностороннего треугольника — цикл rotate(120).
  • depth = 4 — уже детальная снежинка; depth = 6 — тяжело для слабого ПК.
  • На depth === 0 рисуем простой отрезок — база рекурсии.

5. Параметрические кривые

5.1. Спираль Архимеда

Радиус растёт с углом: r = a + b·φ.

Разбор:

  • 360 * 5 — пять оборотов; deg += 2 — шаг 2° (меньше шаг — гладче линия, больше точек).
  • 5 + 2 * rad — спираль расширяется от центра.

5.2. Полярная роза

r = a·cos(k·φ) — лепестки розы из школьной полярной системы координат.

Разбор:

  • k = 5 — 5 лепестков (k нечётное); k = 4 — 8 лепестков (2k при чётном k).
  • steps = 720 для чётного k — нужен двойной оборот, чтобы замкнуть кривую.

6. Анимации

6.1. Вращающийся цветок

Без noLoop() — draw() крутится ~60 раз в секунду.

Разбор:

  • background(255) каждый кадр — стирает прошлый кадр (иначе шлейф из лепестков).
  • angle += 2 — поворот на 2° за кадр; += 5 — быстрее.
  • Переменная angle объявлена вне функций — сохраняется между вызовами draw().

6.2. Пульсирующая спираль

В радиус добавлен sin(t) — спираль «дышит».

Разбор:

  • Четвёртый аргумент stroke(.., 180) — прозрачность 0…255.
  • t += 1 каждый кадр — время растёт, форма меняется.

7. Геометрические узоры

7.1. Замощение шестиугольниками («улей»)

Соты — шестиугольники со сдвигом нечётных рядов.

Разбор:

  • sqrt(3) — высота правильного треугольника; dy = r * sqrt(3) — вертикальный шаг между рядами сот.
  • (row % 2) * (dx / 2) — каждый второй ряд сдвинут на полшага — классическая гексагональная сетка.

8. Processing (Java) и p5.js — отличия

Аспект Processing (Java) p5.js
Среда Processing IDE, файлы .pde Браузер, editor.p5js.org
Объявление setup void setup() &#123; size(400,400); &#125; function setup() &#123; createCanvas(400,400); &#125;
Типы переменных int i = 0;, float x; let i = 0;, const x = 1;
Цикл for (int i = 0; i < 4; i++) for (let i = 0; i < 4; i++)
Цвет fill(255, 0, 0); то же
Комментарий // //

Логика фигур одинаковая: те же line, rect, ellipse, translate, rotate. Перенос с Processing на p5.js — в основном замена size на createCanvas и синтаксиса Java на JavaScript.

9. Переиспользуемый шаблон для своих проектов

Разбор:

  • pixelDensity(1) — на Retina-экранах не удваивает плотность пикселей (проще отладка размеров).
  • Вся сцена в drawScene() — легко переключить статику (setup + noLoop) и анимацию (draw без noLoop).

10. Что попробовать самому

Задание Подсказка
Звезда на новогодней открытке drawStar(5, 120, 50, true) + тёмный background
Логотип из трёх кругов три circle() с разным fill, частичное перекрытие
«Часы» — вращающаяся стрелка в draw(): line(0,0,0,-80) и rotate(frameCount)
Шестиугольник черепашкой цикл 6 раз, left(60)
Сравнить с Python тот же квадрат в Turtle и здесь — одна геометрия, два языка

11. Связанные материалы