Генеративная графика

Two.js — это мощная библиотека для работы с 2D-графикой на языке JavaScript, ориентированная на анимацию и генеративную графику. Основной объект библиотеки — Two, который управляет сценой, рендерером и основными настройками холста. Создание экземпляра выглядит следующим образом:

const two = new Two({
  width: 800,
  height: 600,
  type: Two.Types.canvas // поддержка 'webgl' и 'svg'
}).appendTo(document.body);

Ключевые параметры:

  • width и height — размеры холста.
  • type — выбор рендерера: canvas, svg, webgl.
  • Метод appendTo добавляет холст в DOM.

После инициализации можно создавать фигуры, линии, текст и управлять их свойствами.

Примитивные фигуры и их свойства

Two.js предоставляет следующие базовые фигуры: Rectangle, Circle, Ellipse, Polygon, Path, Line. Каждая фигура создаётся через объект two:

const circle = two.makeCircle(400, 300, 50); // x, y, радиус
circle.fill = '#FF8000';
circle.stroke = '#000000';
circle.linewidth = 2;

Основные свойства фигур:

  • fill — цвет заливки.
  • stroke — цвет обводки.
  • linewidth — толщина линии.
  • opacity — прозрачность.
  • translation — перемещение фигуры ({x, y}).
  • rotation — вращение в радианах.
  • scale — масштабирование ({x, y}).

Фигуры можно группировать, используя Group, что упрощает трансформации нескольких объектов одновременно.

Группы и иерархия объектов

Группы позволяют объединять несколько фигур в один логический блок:

const group = two.makeGroup(circle, rectangle);
group.translation.set(200, 100);
group.rotation = Math.PI / 4;

Изменения свойств группы применяются ко всем её дочерним объектам. Это удобно для создания сложных композиций и анимации нескольких объектов одновременно.

Анимация и интерполяция

Two.js использует цикл рендеринга, где функция two.update() обновляет сцену. Для анимации применяется метод bind с событием 'update':

two.bind('update', function(frameCount) {
  circle.rotation += 0.02;
  circle.scale = Math.sin(frameCount * 0.05) + 1;
}).play();

Особенности анимации:

  • frameCount — текущий кадр анимации.
  • Вращение (rotation) измеряется в радианах.
  • Интерполяция параметров позволяет создавать плавные переходы.

Пути и кривые

Объект Path позволяет создавать кривые Безье, сложные линии и формы:

const path = two.makePath(50, 50, 150, 50, 100, 150, true); // точки и замкнутость
path.fill = 'rgba(100, 150, 200, 0.5)';
path.stroke = '#333';
  • vertices — массив точек пути.
  • closed — замкнутая форма.
  • Для кривых можно использовать curve = Two.Types.curve (linear, catmull-rom, quadratic, bezier).

Цветовые градиенты и прозрачность

Two.js поддерживает RGBA и HEX-цвета. Для генеративной графики часто используются прозрачные слои и градиенты:

circle.fill = 'rgba(255, 128, 0, 0.7)'; // прозрачность 0.7

Можно динамически менять цвета в цикле анимации, создавая эффект переливов и плавных переходов.

Генеративные структуры

Генеративная графика строится на алгоритмах, создающих визуальные паттерны. Основные техники:

  1. Фрактальные разветвления:
function branch(x, y, len, angle) {
  if (len < 5) return;
  const x2 = x + len * Math.cos(angle);
  const y2 = y - len * Math.sin(angle);
  const line = two.makeLine(x, y, x2, y2);
  line.stroke = '#006600';
  branch(x2, y2, len * 0.7, angle + 0.3);
  branch(x2, y2, len * 0.7, angle - 0.3);
}
branch(400, 600, 100, Math.PI / 2);
  1. Случайные точки и шум:
for (let i = 0; i < 500; i++) {
  const x = Math.random() * 800;
  const y = Math.random() * 600;
  const circle = two.makeCircle(x, y, Math.random() * 5);
  circle.fill = `rgba(${Math.random()*255}, ${Math.random()*255}, ${Math.random()*255}, 0.5)`;
}
  1. Масштабируемые паттерны — использование циклов и тригонометрических функций для создания волн, спиралей, радиальных структур.

Работа с текстом

Two.js поддерживает текстовые объекты:

const text = two.makeText('Generative Art', 400, 100, { size: 48 });
text.fill = '#FF0000';
text.alignment = 'center';
text.family = 'Arial';

Параметры текста:

  • size — размер шрифта.
  • family — семейство шрифтов.
  • alignment — выравнивание (left, center, right).
  • Можно анимировать положение, масштаб и цвет текста для динамических эффектов.

Взаимодействие с пользователем

Two.js интегрируется с DOM-событиями. Для генеративной графики часто используют:

  • mousemove для изменения параметров форм по координатам курсора.
  • click для генерации новых элементов на сцене.
  • wheel для масштабирования объектов.

Пример интерактивного изменения цвета:

document.addEventListener('mousemove', e => {
  circle.fill = `rgb(${e.clientX % 255}, ${e.clientY % 255}, 150)`;
});

Экспорт и сохранение

Two.js поддерживает экспорт в SVG и Canvas. Для сохранения результата:

const svgData = two.renderer.domElement.toDataURL('image/svg+xml');
const canvasData = two.renderer.domElement.toDataURL('image/png');

Это позволяет использовать созданные генеративные паттерны в вебе и графических редакторах.

Интеграция с другими библиотеками

Two.js можно комбинировать с:

  • Dat.GUI для управления параметрами в реальном времени.
  • GSAP для продвинутой анимации.
  • Perlin/Noise библиотеки для создания органических структур.

Комбинирование этих инструментов позволяет создавать сложные, интерактивные и динамические генеративные композиции.

Оглавление