Совместное использование с p5.js

Two.js — это библиотека для рисования 2D-графики с поддержкой анимации и трансформаций. Несмотря на свою автономность, её возможности можно расширять за счёт интеграции с другими фреймворками, такими как p5.js, которая специализируется на удобной работе с холстом (canvas) и интерактивными элементами. Совместное использование этих библиотек позволяет сочетать мощную анимационную систему Two.js с гибкой средой визуальных эффектов p5.js.

Создание холста p5.js для Two.js

Первым шагом является инициализация холста p5.js и привязка Two.js к его элементу. В p5.js это делается через функцию createCanvas, а Two.js можно инициализировать на DOM-элементе холста.

let two;
let p5Canvas;

function setup() {
  p5Canvas = createCanvas(600, 400);
  
  // Инициализация Two.js
  two = new Two({
    width: width,
    height: height,
    autostart: true
  }).appendTo(p5Canvas.elt);
}

Ключевые моменты:

  • p5Canvas.elt возвращает DOM-элемент <canvas>, на который можно «повесить» Two.js.
  • Параметр autostart: true запускает цикл анимации Two.js автоматически.

Создание объектов Two.js на p5.js холсте

После инициализации Two.js можно добавлять графические объекты. Two.js предоставляет примитивы (Rectangle, Circle, Ellipse, Polygon) и группы (Group).

let circle;

function setup() {
  createCanvas(600, 400);
  two = new Two({ width: width, height: height }).appendTo(canvas.elt);

  circle = two.makeCircle(300, 200, 50);
  circle.fill = '#FF6347';
  circle.stroke = '#333';
  circle.linewidth = 2;
}

Особенности интеграции:

  • Все координаты и размеры должны соответствовать холсту p5.js.
  • Можно использовать p5.js-функции для динамического вычисления параметров объектов Two.js.

Анимация объектов с использованием p5.js

p5.js обеспечивает цикл draw(), который вызывается каждый кадр. Внутри него можно управлять свойствами объектов Two.js для создания анимации.

let angle = 0;

function draw() {
  background(220);

  angle += 0.05;
  circle.translation.x = 300 + 100 * cos(angle);
  circle.translation.y = 200 + 100 * sin(angle);

  two.update(); // Обновление сцены Two.js
}

Примечания:

  • two.update() необходим, если autostart отключен.
  • Использование p5.js-функций cos, sin, frameCount удобно для создания циклической анимации.

Совместная работа с интерактивностью

p5.js предлагает удобные функции для обработки событий мыши и клавиатуры (mousePressed, keyPressed). Эти события могут управлять объектами Two.js напрямую.

function mousePressed() {
  circle.fill = color(random(255), random(255), random(255));
}

function keyPressed() {
  if (key === 'R') {
    circle.rotation += Math.PI / 4;
  }
}

Особенности:

  • p5.js отвечает за события и удобную работу с пользователем.
  • Two.js управляет визуализацией и трансформациями объектов.

Использование групп и слоёв

Two.js поддерживает группы объектов (Group), что упрощает организацию сложных сцен. В интеграции с p5.js это позволяет создавать слои, которые можно динамически анимировать.

let group = two.makeGroup();
let rect1 = two.makeRectangle(200, 200, 80, 50);
let rect2 = two.makeRectangle(250, 250, 100, 60);
group.add(rect1, rect2);

function draw() {
  background(240);
  group.rotation += 0.01;
  two.update();
}

Преимущества группировки:

  • Объекты внутри группы можно перемещать и вращать как единое целое.
  • Интерактивность p5.js можно применять к всей группе.

Смешивание рендеринга Two.js и p5.js

Two.js позволяет выбирать между SVG, Canvas и WebGL рендерерами. При использовании с p5.js чаще всего применяют Canvas-рендеринг, чтобы избежать конфликтов с p5.createCanvas().

two = new Two({
  width: width,
  height: height,
  type: Two.Types.canvas
}).appendTo(canvas.elt);

Рекомендации:

  • Использование WebGL в Two.js с p5.js возможено, но требует отдельного холста.
  • SVG может быть использован для генерации статических изображений, но не подходит для динамической анимации в режиме p5.js draw().

Практические советы по оптимизации

  1. Обновлять только изменяемые объекты — лишние вызовы two.update() на больших сценах могут замедлять производительность.
  2. Использовать p5.js для вычислений — позиции, углы, скорость движения лучше вычислять средствами p5.js, а Two.js использовать для визуализации.
  3. Группировать объекты для совместной анимации и применения трансформаций.
  4. Разделять слои интерактивности и визуализации — p5.js может управлять событиями, а Two.js визуализировать результаты.

Расширенные техники взаимодействия

  • Физические симуляции: можно использовать p5.js для расчёта сил и столкновений, а Two.js — для рендеринга объектов.
  • Смешанные анимации: комбинируя frameCount p5.js и анимации Two.js (Two.Tween), создаются сложные эффекты плавного движения.
  • Масштабирование и трансформации: Two.js позволяет задавать scale, rotation и translation для объектов или групп, а p5.js может динамически вычислять параметры для этих трансформаций.

Эта интеграция превращает Two.js в мощный инструмент для создания интерактивных и визуально сложных 2D-сцен, используя возможности p5.js для управления циклом анимации и пользовательским вводом.

Оглавление