Эффекты Svg-Фильтра. Часть 6. Создание Текстуры С Помощью Feturbulence

Узнайте, как использовать мощный примитив фильтра SVG. feТурбулентность для создания собственных текстур и эффектов искажения.

Предлагаемый цикл статей " Эффекты фильтров SVG Сара Суэйдан, независимый UI/UX-разработчик и автор множества технических статей из Ливана, посвящена работе SVG-фильтров и состоит из следующих статей: Эффекты фильтров SVG

1. Эффекты фильтрации SVG. Часть 1. Фильтры SVG 101
2. Эффекты фильтрации SVG. Часть 2. Обрисовываем текст с помощью feМорфология
3. Эффекты фильтрации SVG. Часть 3. Эффект постеризации изображения с помощью feComponentTransfer
4. Эффекты фильтрации SVG. Часть 4. Использование двухцветных изображений feComponentTransfer .

5. Эффекты фильтрации SVG. Часть 5. Сопоставление текста с текстурой поверхности с помощью feDisplacementMap
6. Эффекты фильтрации SVG. Часть 6. Создание текстуры с помощью feTurbulence

Этот примитив фильтра создает изображение, используя функцию турбулентности Перлина.

Это позволяет синтезировать искусственные текстуры, такие как облака или мрамор.

[…] Полученное изображение заполнит всю подобласть примитива фильтра для этого примитива фильтра.

Этот тип шума полезен для моделирования некоторых природных явлений, таких как облака, огонь и дым, а также для создания сложных текстур, таких как мрамор или гранит. И как феНаводнение , примитивный feТурбулентность Заполняет область фильтрации новым содержимым.

В этой статье мы рассмотрим, как можно создать шум с помощью feТурбулентность и как этот шум можно использовать для искажения изображений и текста, как мы это делали с текстурой feDisplacementMap в предыдущей статье.

Затем мы рассмотрим, как сгенерированный шум можно использовать в сочетании с эффектами освещения SVG для создания простой текстуры грубой бумаги.

Но сначала давайте рассмотрим feТурбулентность и его атрибуты и посмотреть, как каждый из них влияет на создаваемый шум.

Создание турбулентности и фрактального шума с помощью feTurbulence

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

Прочитав о функции генерации шума, я обнаружил, что она мне совершенно не помогает, когда я настраиваю примитив для эксперимента.

Ведь мы работаем с генератором случайного шума.

Итак, в большинстве случаев вы обнаружите, что создание текстуры будет вопросом экспериментов и настроек, пока вы не получите желаемый результат. Со временем станет немного проще предсказать, как может выглядеть текстура.

Я обнаружил, что играя с примитивом feТурбулентность и визуальная настройка его атрибутов была лучшим способом узнать о них и помогла мне понять, что делает каждый из этих атрибутов.

Поэтому мы используем визуальный подход, чтобы понять feТурбулентность , с помощью нескольких интерактивных демонстраций.

Сейчас feТурбулентность генерирует шум, используя Функция турбулентности Перлина .

Он имеет 5 основных атрибутов, которые управляют функцией и, следовательно, ее визуальным выводом:

• тип ;
• базовая частота ;
• количество октав ;
• семя ;
• стежкаПлитки .

Вы обнаружите, что в большинстве случаев вам нужно будет беспокоиться только о трех из этих атрибутов: тип , базовая частота И число октав .

базовая частота

базовая частота влияет на размер (или масштаб) и зернистость производимого шума.

Эффект базовой частоты лучше всего понять, если ее визуализировать и анимировать.

Вот почему я создал следующую демонстрацию.

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

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

Понижение значений базовая частота , например 0,001, создают более крупные шаблоны, а увеличение значений, 0,5+, создает более мелкие шаблоны.

Значения начинаются с 0 (нет частоты == нет закономерности) и выше.

Отрицательные значения не допускаются.

Как отмечает Майкл Маллани , «значения в диапазоне от 0,02 до 0,2 являются полезными отправными точками для большинства текстур».

Обратите внимание, что создаваемый шум не имеет цвета фона.

Это означает, что если вы удалите белый цвет фона в SVG, вы сможете увидеть фон темного тела сквозь шум.

Атрибут базовая частота также принимает два значения.

Если вы укажете два значения, то первое будет использоваться для базовой частоты по оси X, а второе будет соответствовать оси Y. Указав два разных значения, вы можете генерировать вертикальный или горизонтальный шум, который можно использовать для реализации некоторых фантастических эффектов, как мы увидим в следующем разделе.

Поиграйтесь со значениями еще раз базовая частота в этой демонстрации и обратите внимание, как он меняется по осям X и Y, если вы задаете ему разные значения.

Демо начинается с приятного горизонтального шума.

Значение x-baseFrequency при 0,01 относительно мало, что делает горизонтальный узор большим (поскольку он растягивается).

Если вы уменьшите его еще больше, например до 0,001, вы увидите, что горизонтальный узор станет больше похож на линии.

Попробуй это.

тип

Есть два типа:

• турбулентность , что является значением по умолчанию;
• фракталШум .

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

Рисунок 1. Шум типа турбулентности слева и фрактальный шум справа.

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

число октав

В музыке октава — это разница тонов между двумя нотами, частота одной из которых в два раза превышает частоту другой.

Таким образом, чем выше октавы, тем выше частота.

В feТурбулентность Чем выше число октав, тем больше деталей вы сможете увидеть в создаваемом шуме.

По умолчанию сгенерированный шум составляет одну октаву, что означает, что значение по умолчанию для атрибута равно число октав равно 1. Перетащите ползунок в следующей демонстрации, чтобы увидеть эффект увеличения количества октав в сгенерированной текстуре: Вы заметите, что начиная с число октав ="5" эффект добавления октав становится практически незаметным.

семя

Другими словами, он предоставляет другое начальное значение для случайной функции, используемой для генерации случайного шума.

Визуально вы увидите, что это влияет на то, где и как генерируются «волнистые линии».

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

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

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

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

стежкаПлитки

Эффект этого атрибута очень похож на эффект начального числа, а это означает, что он наиболее очевиден, когда у вас есть две соседние области (или «плитки») шума.

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

Вы можете указать браузеру попытаться сгладить результаты, чтобы две плитки выглядели «сшитыми» вместе.

Мне очень нравится, что атрибут и его эффект сравнивают со сшиванием.

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

Если вы хотите создать эффект сшивания, вы можете изменить значение на стежка .

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

Вы уже можете видеть, что шум между ними кажется непрерывным.

Переключить опцию стежкаПлитки В " на », изменив его значение на стежка чтобы увидеть, как шум меняет расположение по краям.

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

Итак, в дальнейшем мы сосредоточимся на этих троих.

Использование шума feTurbulence для искажения контента

Как нам начать использовать сгенерированный шум? Ведь просто заполнять область фильтрации шумом само по себе бесполезно.

В предыдущей статье мы использовали feDisplacementMap чтобы сопоставить фрагмент текста с текстурой внешнего изображения.

И мы упоминали об этом? feDisplacementMap использует информацию о цвете одного изображения для искажения другого.

Изображение, используемое в качестве карты смещения, может быть любым.

Это означает, что это может быть внешнее изображение или изображение, созданное в SVG, например, градиентное изображение или узор.

или текстура шума.

Другими словами, шум, который мы генерируем с помощью feТурбулентность , также может использоваться для искажения контента, если используется вместе с feDisplacementMap .

В следующем примере мы используем выходные данные feТурбулентность переместить изображение вместе с feDisplacementMap .

Я использую модель горизонтального шума, предоставляя два разных значения для атрибута.

базовая частота , аналогично тому, что мы делали ранее.

   

 <svg viewBox="0 0 180 100">
     <filter id="noise" x="0%" y="0%" width="100%" height="100%">
         <feTurbulence baseFrequency="0.01 0.4" result="NOISE" numOctaves="2" />
         <feDisplacementMap in="SourceGraphic" in2="NOISE" scale="20" xChannelSelector="R" yChannelSelector="R"></feDisplacementMap>
     </filter>
 
     <image xlink:href=".

" x="0" y="0" width="100%" height="100%" filter="url(#noise)"></image>
 </svg>

   

Я использовал высокое значение, чтобы эффект выглядел более драматично.

Теперь с помощью этого простого приложения мы можем открыть еще много возможностей объединения этих фактов:

• Фильтры SVG также можно применять к содержимому HTML;
• ценности базовая частота являются числами и поэтому могут быть анимированы.

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

Наша цель здесь — исказить кнопку по горизонтали.

Те.

Мы воспользуемся и немного подправим горизонтальный шум из предыдущей демонстрации.

Эффект искажения изображения слишком силен, поэтому сначала я наберу код, изменив значение турбулентности с (0,01 0,4) на (0 0,2):

<filter id='noise' x='0%' y='0%' width='100%' height='100%'> <feTurbulence type="turbulence" baseFrequency="0 0.2" result="NOISE" numOctaves="2" /> <feDisplacementMap in="SourceGraphic" in2="NOISE" scale="30" xChannelSelector="R" yChannelSelector="R"></feDisplacementMap> </filter>

Эффект немного лучше, но кнопка всё равно искажается больше, чем хотелось бы:



Мы хотим, чтобы искажение было менее драматичным.

Имейте в виду, что мы можем мгновенно уменьшить эффект шума, переключив тип шума с турбулентности по умолчанию на более плавный.

фракталШум .

Как только мы это сделаем, мы увидим, что эффект искажения также будет сглажен:



Это выглядит намного лучше.

Теперь, когда у нас есть эффект искажения, который нас устраивает, мы начнем нашу демонстрацию с фильтра, который изначально почти ничего не делает:

<filter id='noise' x='0%' y='0%' width='100%' height='100%'> <feTurbulence type="fractalNoise" baseFrequency="0 0.000001" result="NOISE" numOctaves="2" /> <feDisplacementMap in="SourceGraphic" in2="NOISE" scale="30" xChannelSelector="R" yChannelSelector="R"></feDisplacementMap> </filter>

Мы собираемся применить этот фильтр к нашей кнопке в CSS:

button { -webkit-filter: url(#noise); filter: url(#noise); }

На этом этапе кнопка по-прежнему выглядит неискаженной.

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

базовая частота в (0 0,2) и обратно внутрь примитива feТурбулентность по щелчку:

var bt = document.querySelectorAll('.

button')[0], turbVal = { val: 0.000001 }, turb = document.querySelectorAll('#noise feTurbulence')[0], btTl = new TimelineLite({ paused: true, onUpdate: function() { turb.setAttribute('baseFrequency', '0 ' + turbVal.val); } }); btTl.to(turbVal, 0.2, { val: 0.2 }) .

to(turbVal, 0.2, { val: 0.000001 }); bt.addEventListener('click', function() { btTl.restart(); });

И это действительно все, что нужно.

Вы можете поиграть с демо здесь : На момент написания этой статьи демо-версия работает в Chrome и Firefox. Это ошибки в текущей версии Safari, но проблема будет решена в следующей версии, поскольку демоверсия Safari Tech Preview показывает, что она работает нормально.

Хотя это не работает в MS Edge, кнопка вообще не искажается, а это означает, что отсутствие поддержки не влияет на ее удобство использования.

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

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

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

Есть один или два хороших трюка, которым должен научиться каждый.

Волнистый текст с использованием feTurbulence

В своей демонстрации Лукас использует несколько feТурбулентность функции:

<svg xmlns=" http://www.w3.org/2000/svg " version="1.1"> <defs> <filter id="squiggly-0"> <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="0" /> <feDisplacementMap id="displacement" in="SourceGraphic" in2="noise" scale="6" /> </filter> <filter id="squiggly-1"> <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="1" /> <feDisplacementMap in="SourceGraphic" in2="noise" scale="8" /> </filter> <filter id="squiggly-2"> <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="2" /> <feDisplacementMap in="SourceGraphic" in2="noise" scale="6" /> </filter> <filter id="squiggly-3"> <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="3" /> <feDisplacementMap in="SourceGraphic" in2="noise" scale="8" /> </filter> <filter id="squiggly-4"> <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="4" /> <feDisplacementMap in="SourceGraphic" in2="noise" scale="6" /> </filter> </defs> </svg>

.

и применяя их через CSS к фрагменту HTML-текста с помощью CSS-анимации, анимируется от одного к другому:

@keyframes squiggly-anim { 0% { -webkit-filter: url("#squiggly-0"); filter: url("#squiggly-0"); } 25% { -webkit-filter: url("#squiggly-1"); filter: url("#squiggly-1"); } 50% { -webkit-filter: url("#squiggly-2"); filter: url("#squiggly-2"); } 75% { -webkit-filter: url("#squiggly-3"); filter: url("#squiggly-3"); } 100% { -webkit-filter: url("#squiggly-4"); filter: url("#squiggly-4"); } }

.

таким образом создается волнистый эффект. Опять же, используемый текст является реальным, т. е.

его можно искать, выбирать, использовать и редактировать (с помощью атрибута довольный и редактируемый ).

Посмотрите живую демонстрацию , но будьте осторожны, потому что.

Эта демонстрация требует больших ресурсов, и вы не сможете открыть Codepen на мобильном телефоне.

Итак, несколько полезных выводов из этого раздела:

• Шум, создаваемый feТурбулентность , может использоваться для искажения содержимого SVG и HTML.
• Значение базовая частота можно анимировать.

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

• Хотя в целом анимировать фильтры SVG можно, обычно не рекомендуется переусердствовать, поскольку они могут быть весьма ресурсоемкими.

  Старайтесь, чтобы анимация ограничивалась небольшими областями; Чем больше анимированная область, тем больше ресурсов она потребляет.

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

В этом разделе мы использовали ее в качестве карты смещения в feDisplacementMap .

Давайте посмотрим, что еще мы можем с этим сделать.

Имитируйте естественную текстуру с помощью feTurbulence.

Если вы когда-либо использовали плагины генерации шума в After Effects , возможно, вы уже встречали эту функциональность и ее примеры.

Рис_7. Примеры текстур, созданных в After Effects с помощью плагина Фрактальный шум .

( Источник ) feТурбулентность генерирует шум (случайные значения) для каждого из компонентов R, G, B и A. Вы можете изменить значения каждого из этих компонентов, чтобы создать различные варианты шума.

Чтобы смоделировать текстуру, нам обычно нужно сделать именно это: настроить компоненты R/G/B/A (отменить компоненты, насытить другие и т. д.), чтобы получить желаемый результат. В других случаях все, что нам нужно сделать, это пролить на это немного света.

Буквально.

В этом разделе мы рассмотрим Эффект текстуры грубой бумаги , созданный Майклом Маллани.

Чтобы создать эту текстуру, нам нужно осветлить текстуру созданного шума.

feТурбулентность с использованием SVG-освещения.

Источники света в SVG

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

• feДиффузноеОсвещение , который указывает на непрямой свет от внешнего источника и лучше всего используется для эффектов солнечного освещения;
• feSpecularОсвещение , который определяет вторичный свет, возвращающийся от отражающих поверхностей.

Прозрачные значения остаются плоскими, а непрозрачные значения повышаются, образуя пики, которые освещаются более заметно.

Другими словами, фильтр источника света использует входной альфа-канал для получения информации о глубине: области с большей непрозрачностью движутся вверх к зрителю, а области с меньшей непрозрачностью удаляются от зрителя.

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

Это довольно мощная штука! Оба типа света имеют атрибут, называемый поверхностьМасштаб , что практически является множителем z-индекса.

По мере увеличения этого значения «наклоны» текстуры поверхности становятся круче.

"Поскольку feТурбулентность генерирует альфа-канал, полный значений шума в диапазоне от 0 до 1, он формирует красивую переменную поверхность Z, которая создает блики, когда мы освещаем ее светом».

—Майкл Маллани

В SVG есть три типа источников света :

• feDistantLight : представляет удаленный источник света, который находится на произвольном расстоянии и, следовательно, определяется его углом от цели.

  Это наиболее подходящий способ изображения солнечного света.

• fePointLight : представляет собой точечный свет, исходящий из определенной точки, представленный в виде трехмерных координат X/Y/Z. Это похоже на источник света внутри комнаты или внутри сцены.

• feSpotLight : прожектор, который ведет себя как прожектор, но его луч можно сузить до конуса и направить свет на другие цели.

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

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

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

И наконец, вам нужно указать цвет вашего освещения.

Свойство цвет освещения используется для определения цвета источника света для feДиффузноеОсвещение И feSpecularОсвещение .

Раскрыв основы источников света, мы перейдем к нашему примеру.

Для текстуры грубой бумаги мы будем использовать солнечный свет. Это означает, что мы будем использовать белое рассеянное освещение, исходящее от удаленного источника.

В переводе на код наш свет выглядит так:

<feDiffuseLighting lighting-color="white" surfaceScale="2" in=".

" result=".

"> <feDistantLight azimuth="45" elevation="60" /> </feDiffuseLighting>

Атрибуты азимут И высота определить положение источника света в трехмерном пространстве.

Есть статья Рафаэля Понса , который просто потрясающе объясняет эти две концепции в простой и понятной форме, а также с красивыми и удобными иллюстрациями, которые помогут в объяснении.

Я настоятельно рекомендую это проверить.

Теперь, когда у нас есть свет, нам нужно создать шум, чтобы осветить его этим светом.

Мы разобьем демо-версию на этапы, чтобы увидеть, как она создается.

Нам нужно с чего-то начать, и мы начнем с генерации случайного базового шума в качестве основы нашей текстуры:

<feTurbulence baseFrequency='0.04' result='noise' />

Наш шум выглядит так:



Затем мы прольем на него свет и возьмем его оттуда:

<feTurbulence baseFrequency='0.04' result='noise' /> <feDiffuseLighting in='noise' lighting-color='white' surfaceScale='2'> <feDistantLight azimuth='45' elevation='60' /> </feDiffuseLighting>

Яркое выделение шума дает нам следующую текстуру:



Это еще не тот результат текстуры, который мы ищем.

Первое, что мы здесь замечаем, это то, что в текстуре много резких линий.

Мы хотим от них избавиться, потому что на поверхности бумаги нет резких линий.

Нам нужно сгладить эти линии.

Это можно сделать, изменив тип создаваемого шума на фракталШум :

<feTurbulence type="fractalNoise" baseFrequency='0.04' result='noise' /> <feDiffuseLighting in='noise' lighting-color='white' surfaceScale='2'> <feDistantLight azimuth='45' elevation='60' /> </feDiffuseLighting>

Это удалит все острые края из нашей текстуры:



Теперь мы на шаг ближе к нашей грубой бумажной текстуре.

Однако приведенная выше текстура недостаточно грубая.

Ему не хватает необходимой «шероховатости».

Увеличение количества мелких деталей в нем должно сделать его более грубым.

Для этого увеличим значение число октав .

Мы обнаружили, что около 5 — отличное число для достижения желаемого уровня шероховатости:

<feTurbulence type="fractalNoise" baseFrequency='0.04' numOctaves="5"

Теги: #CSS #веб-дизайн #svg

• Как Заблокировать Адрес Электронной Почты На Yahoo

  19 Oct, 24

• Как Мы В Domklik Делаем Виджеты С Помощью React

  19 Oct, 24

• Ветер Перемен: Расширение Серверов Arm Продолжается

  19 Oct, 24

• Левитация Светящейся Лампочки

  19 Oct, 24

• Приглашаем Вас Выступить На Pycon Russia 2019

  19 Oct, 24

• Объявлены Победители Конкурса На Лучшее Использование Digg Api

  19 Oct, 24

• Tribewanted.com: Онлайн-Вербовка Диких Племен

  19 Oct, 24

• Кибервойна – Особенности Национальной Военной Игры

  19 Oct, 24

• Panasonic Представила 4-Кратный Диск Blu-Ray

  19 Oct, 24

• Оптимизация Приложений .Net: Большие Результаты От Небольших Изменений

  19 Oct, 24