Создание частиц

Paper.js предоставляет мощный инструмент для работы с векторной графикой и анимацией, который позволяет создавать интерактивные эффекты с минимальными усилиями. Частицы — один из самых популярных способов оживить сцену, и Paper.js делает этот процесс гибким и удобным.

Создание базовой системы частиц

Для начала создается объект-частица, который представляет отдельный элемент системы. В Paper.js частицы обычно реализуются через объекты Path.Circle или Shape, чтобы легко управлять их формой, цветом и позицией.

var particle = new Path.Circle({
    center: [100, 100],
    radius: 5,
    fillColor: 'red'
});

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

  • center задает начальную позицию частицы на холсте.
  • radius определяет размер частицы.
  • fillColor задает цвет, который можно анимировать.

Для управления движением частицы создается объект, содержащий свойства скорости и направления:

var particleData = {
    velocity: new Point(Math.random() * 4 - 2, Math.random() * 4 - 2)
};
particle.data = particleData;

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

Анимация частиц

Paper.js предоставляет функцию view.onFrame, которая вызывается каждый кадр анимации. Внутри нее обновляется положение каждой частицы:

view.onFr ame = function(event) {
    particle.position += particle.data.velocity;
};

Для сложных систем можно создавать массив частиц и обновлять каждую по отдельности:

var particles = [];

for (var i = 0; i < 100; i++) {
    var p = new Path.Circle({
        center: [Math.random() * view.size.width, Math.random() * view.size.height],
        radius: 3,
        fillColor: 'blue'
    });
    p.data.velocity = new Point(Math.random() * 4 - 2, Math.random() * 4 - 2);
    particles.push(p);
}

view.onFr ame = function(event) {
    for (var i = 0; i < particles.length; i++) {
        particles[i].position += particles[i].data.velocity;
    }
};

Управление эффектами частиц

Для добавления реализма к частицам можно использовать следующие приемы:

  • Сила притяжения и отталкивания: Частицы можно направлять к определенной точке или отталкивать от нее, используя векторы. Например:
var center = view.center;
view.onFr ame = function() {
    particles.forEach(function(p) {
        var direction = center - p.position;
        p.position += direction.normalize() * 0.5; // ускорение к центру
    });
};
  • Изменение прозрачности и размера: Частицы могут постепенно исчезать или уменьшаться:
p.fillColor.alpha -= 0.01;
p.scale(0.98);
if (p.fillColor.alpha <= 0) p.remove();
  • Случайные колебания: Для эффекта “дрожащих” частиц добавляется случайная компонента:
p.position += new Point((Math.random() - 0.5) * 2, (Math.random() - 0.5) * 2);

Взаимодействие частиц с мышью

Paper.js позволяет легко реализовать реакции частиц на движение мыши:

view.onMouseM ove = function(event) {
    particles.forEach(function(p) {
        var distance = event.point - p.position;
        if (distance.length < 50) {
            p.position -= distance.normalize() * 2; // отталкивание от курсора
        }
    });
};

Это создает динамическое ощущение взаимодействия и оживляет сцену.

Оптимизация системы частиц

Для больших систем частиц важно учитывать производительность:

  • Использовать минимальное количество объектов Path для частиц с одинаковыми свойствами.
  • Удалять частицы, которые вышли за пределы холста или полностью исчезли.
  • Анимировать только необходимые свойства, избегая сложных вычислений в onFrame.

Комбинирование с эффектами

Частицы можно сочетать с градиентами, тенями и эффектами смешивания (blendMode):

p.fillColor = {
    gradient: {
        stops: ['yellow', 'red']
    },
    origin: p.position,
    destination: p.position + [10, 10]
};
p.blendMode = 'lighter';

Это создает визуально насыщенные эффекты свечения и перемешивания цветов при наложении частиц.

Масштабирование и группировка

Для удобства управления большим количеством частиц используется Group:

var particleGroup = new Group();
particles.forEach(p => particleGroup.addChild(p));
particleGroup.scale(1.5);

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

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

Оглавление