Turbolence и шумы

Snap.svg предоставляет мощный механизм для создания динамических визуальных эффектов с использованием SVG-фильтров. Одним из ключевых инструментов для генерации сложных визуальных шумов и искажения объектов является фильтр feTurbulence, который позволяет создавать текстуры, волны и эффекты хаотичного движения.

Создание фильтра Turbulence

Для создания фильтра используется метод paper.filter(), который позволяет описать последовательность SVG-фильтров. Основной элемент для генерации шума — это feTurbulence.

Пример создания фильтра шума:

var paper = Snap("#svg");

// Создание фильтра turbulence
var turbulenceFilter = paper.filter(Snap.filter.turbulence({
    baseFrequency: 0.05,
    numOctaves: 3,
    type: 'turbulence',
    seed: 2
}));

Пояснение параметров:

  • baseFrequency — базовая частота шума. Чем выше значение, тем более мелкие и плотные детали в шуме.
  • numOctaves — количество «слоёв» шума. Увеличение значения добавляет детализацию.
  • type — тип фильтра: 'turbulence' для шума, 'fractalNoise' для более мягкой фрактальной текстуры.
  • seed — случайное число для генерации уникальной текстуры.

Применение фильтра к объектам

Фильтр можно применять к любому SVG-элементу. Например, к прямоугольнику:

var rect = paper.rect(50, 50, 200, 200).attr({
    fill: '#3498db'
});

// Применение turbulence фильтра
rect.attr({
    filter: turbulenceFilter
});

В результате прямоугольник получает визуальный шум, создающий иллюзию текстуры или лёгкого искажения поверхности.

Анимация Turbulence

Snap.svg позволяет анимировать параметры фильтров для создания динамических эффектов. Чаще всего анимация применяется к атрибуту baseFrequency, что позволяет добиться эффекта движения или «живого» шума.

Пример анимации:

Snap.animate(0.01, 0.1, function(val) {
    turbulenceFilter.node.firstElementChild.setAttribute('baseFrequency', val + ' ' + val);
}, 2000, mina.linear, function() {
    Snap.animate(0.1, 0.01, function(val) {
        turbulenceFilter.node.firstElementChild.setAttribute('baseFrequency', val + ' ' + val);
    }, 2000);
});

Объяснение:

  • Используется Snap.animate для плавной смены значения baseFrequency.
  • В цикле можно изменять частоту от маленькой к большой и обратно, создавая эффект «дыхания» или плавного колебания шума.
  • mina.linear задаёт линейную интерполяцию анимации.

Комбинирование с другими фильтрами

Фильтр Turbulence особенно эффективен в комбинации с другими фильтрами, такими как feDisplacementMap, который позволяет искажать объекты в соответствии с картой шума.

Пример создания эффекта волны:

var displacementFilter = paper.filter(
    paper.filter.turbulence({ baseFrequency: 0.05, numOctaves: 2, type: 'turbulence' }) +
    paper.filter.displacementMap({ in: 'SourceGraphic', scale: 20 })
);

rect.attr({ filter: displacementFilter });
  • displacementMap использует шум для деформации исходного графического элемента.
  • Параметр scale регулирует интенсивность искажения.

Генерация фрактальных шумов

Для создания органичных и текстурных эффектов применяется тип fractalNoise. В отличие от простого turbulence, фрактальные шумы создают более мягкие, непрерывные переходы.

Пример:

var fractalFilter = paper.filter(Snap.filter.turbulence({
    baseFrequency: 0.02,
    numOctaves: 5,
    type: 'fractalNoise',
    seed: 10
}));

rect.attr({ filter: fractalFilter });
  • Использование более низкой частоты (baseFrequency) делает шум «размытым» и плавным.
  • Высокое количество октанов (numOctaves) добавляет детализацию без резких краёв.

Практические применения

  • Искажение текста или логотипов: фильтр turbulence можно применять к текстовым элементам для создания эффекта «живой» надписи.
  • Вода и дым: комбинирование turbulence и displacementMap позволяет создать реалистичное движение воды, дыма или огня.
  • Абстрактные фоны: фрактальные шумы создают сложные текстурные фоны без необходимости использовать растровые изображения.

Советы по оптимизации

  • Для динамических анимаций следует использовать минимальное количество октанов и умеренные значения baseFrequency, чтобы не перегружать браузер.
  • Анимацию фильтров лучше ограничивать элементами небольшого размера или невидимыми частями интерфейса.
  • Seed стоит менять для генерации уникальных шумов, особенно если несколько элементов используют один и тот же фильтр.

Эти методы позволяют создавать сложные визуальные эффекты на основе SVG-фильтров в Snap.svg, расширяя возможности анимации и дизайна интерфейсов.

Оглавление