Звезды

Two.js — это библиотека для создания 2D-графики на JavaScript с акцентом на анимацию и интерактивность. Она использует концепцию сцены и объектов, позволяя управлять формами через простой API. Центральными элементами являются Two, Shape, Group, Path и Animation Loop.

Для начала необходимо создать экземпляр Two и прикрепить его к HTML-элементу:

const elem = document.getElementById('draw');
const params = { width: 800, height: 600 };
const two = new Two(params).appendTo(elem);

После этого можно добавлять фигуры на сцену, например, прямоугольники, линии, круги и полигоны. Все объекты автоматически рендерятся в формате SVG, Canvas или WebGL, в зависимости от конфигурации.

Создание звезд

Звезда представляет собой многоугольник с переменной длиной лучей. Для построения звезд в Two.js используют Path или Polygon, вычисляя координаты вершин через тригонометрию.

Формула для координат вершины звезды: Для n-лучевой звезды:

  • Внешний радиус: R
  • Внутренний радиус: r
  • Угол поворота между вершинами: angle = Math.PI / n
function createStar(cx, cy, spikes, outerRadius, innerRadius) {
    const points = [];
    const step = Math.PI / spikes;

    for (let i = 0; i < 2 * spikes; i++) {
        const radius = i % 2 === 0 ? outerRadius : innerRadius;
        const x = cx + Math.cos(i * step) * radius;
        const y = cy + Math.sin(i * step) * radius;
        points.push(new Two.Anchor(x, y));
    }

    return two.makePath(points, true, true);
}

Пояснения:

  • Two.Anchor(x, y) создаёт точку пути.
  • makePath(points, closed, curved) создаёт замкнутый путь (closed = true) и без кривых (curved = false).
  • Использование чередования радиусов позволяет получить классическую форму звезды.

Настройка стиля звезд

Two.js предоставляет гибкую систему стилизации объектов:

const star = createStar(400, 300, 5, 100, 50);
star.fill = '#FFD700';
star.stroke = '#FF8C00';
star.linewidth = 4;
two.update();
  • fill — заливка фигуры
  • stroke — цвет контура
  • linewidth — толщина линии
  • opacity — прозрачность
  • noFill() / noStroke() — отключение заливки или контура

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

const gradient = two.makeLinearGradient(0, 0, 0, 100, 
    new Two.Stop(0, '#FFFFE0'), 
    new Two.Stop(1, '#FFA500')
);
star.fill = gradient;
two.update();

Анимация звезд

Two.js имеет встроенный цикл анимации через two.bind('update', callback). Это позволяет изменять положение, масштаб, вращение или цвета звезд в реальном времени.

two.bind('update', function(frameCount) {
    star.rotation += 0.01;
    star.scale = 1 + 0.1 * Math.sin(frameCount * 0.05);
}).play();
  • rotation — поворот вокруг центра объекта
  • scale — масштаб фигуры
  • frameCount — количество кадров, прошедших с начала анимации
  • Функция play() запускает анимацию

Можно создавать эффект мерцания через изменение прозрачности:

two.bind('update', function(frameCount) {
    star.opacity = 0.5 + 0.5 * Math.sin(frameCount * 0.1);
});

Группировка звезд

Для удобного управления множеством звезд используют Group.

const group = two.makeGroup();
for (let i = 0; i < 50; i++) {
    const x = Math.random() * 800;
    const y = Math.random() * 600;
    const s = createStar(x, y, 5, 10, 5);
    group.add(s);
}
group.rotation = Math.PI / 8;
two.update();

Группы позволяют:

  • Поворачивать сразу все объекты
  • Изменять масштаб
  • Применять общие стили

Интерактивность

Two.js поддерживает обработку событий через DOM-элементы или дополнительные библиотеки для drag & drop, hover, click. Пример подсветки звезды при наведении:

elem.addEventListener('mousemove', function(evt) {
    const mx = evt.offsetX;
    const my = evt.offsetY;
    group.children.forEach(star => {
        const dx = star.translation.x - mx;
        const dy = star.translation.y - my;
        star.opacity = Math.sqrt(dx*dx + dy*dy) < 50 ? 1 : 0.5;
    });
    two.update();
});

Оптимизация при большом количестве звезд

  • Использовать Groups вместо отдельных объектов для рендеринга
  • Минимизировать вызовы two.update()
  • Применять Canvas Renderer при сотнях объектов
  • Использовать offscreen buffer для статичных элементов

Дополнительные эффекты

  • Сияние: stroke = gradient + linewidth > 2
  • Движение по траектории: изменять translation.x и translation.y через синусоиду или случайные значения
  • Пульсация: анимация scale и opacity
  • Комбинированные группы: вращение, масштабирование и цветовая анимация одновременно

Эти техники позволяют создавать динамичные, реалистичные звездные поля с анимацией и интерактивностью, полностью используя возможности Two.js.

Оглавление