Эффект шума Перлина в векторном формате

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

Пример 1

Пример 2

Можно ли создать эффект статического шума Perlin, используя только Adobe Illustrator или Photoshop?

Если нет, могу ли я создать желаемый эффект с помощью Javascript и CSS и использовать изображение SVG в иллюстраторе?

Мы будем очень признательны за любые советы.

И Illustrator, и Photoshop поддерживают Javascript, так что теоретически это возможно. Однако, если вы проверите механику, стоящую за этим, вы обнаружите, что векторное решение невозможно. Да, программное обеспечение для рендеринга может делать это с миллионами строк — и на это уходит несколько дней.
На мой взгляд, показанные изображения не являются шумом Перлина.
@ Рафаэль Тогда что бы ты сказал?
@Rafael Возможно, не как таковой, но может быть возмущен шумом перлина.
Изображения, кажется, сделаны художником Мартином Латтером: flickr.com/photos/martinlatter/albums/72157621371266099 . Может, стоит забыть про вектор (слишком много линий) и заняться шейдерами? На сайте shapertoy.com легко начать работу .

Ответы (1)

Если вы хотите пойти по пути JS/CSS:

Один из подходов — использовать метод, аналогичный коду Дитриха Фезерстона, найденному здесь: http://bl.ocks.org/d2fn/0d3789278f3d9816e0fd .

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

http://jimherold.com/2012/04/20/least-squares-bezier-fit/

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

Если использование фреймворка D3 в коде Featherston вас смущает, вот ванильная js-реализация (растрового) шума перлина, на которую вы, вероятно, также могли бы сослаться: https://github.com/josephg/noisejs

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

Эффект шума Перлина в векторном формате
СпросиСетьПолитика конфиденциальности1y, 2v