Vector Format Perlin Noise Effect

Goal is to Achieve vector formatted Perlin noise line art. Visual Examples of the desired effect:

Example 1

Example 2

It is possible to create a static Perlin noise effecting using only Adobe Illustrator or photoshop?

If not, could I create my desired effect with Javascript and CSS and utilize the SVG image in illustrator?

Any advice would be greatly appreciated.


If you want to go the JS/CSS route:

One approach would be to use a technique similar to Dietrich Featherston’s code found here:

In Featherston’s code, actors are randomly placed on the canvas and then walked in the direction determined by the Perlin noise function. If each of these “walking” paths could be saved individually instead of collectively on the canvas, you could then approximate each of these paths with its own vector path using, say, the cubic bezier approach described here:

Of course, this would take a lot of memory and processing time, saving and using all the points in these walking paths individually, so you would probably have to adjust the interval at which you sample points on a path. For any given image size, you will have to find a “sweet spot” of interval sizes that balance the memory/processing required against the accuracy of the resulting vector path.

If the use of the D3 framework in Featherston’s code is confusing you, here’s a vanilla js implementation of (raster) perlin noise that you could probably reference as well:

Of course, if the only reason you want it in vector format is for higher resolution, then you could just run the above code on a really large canvas and save the result.

Source : Link , Question Author : Matt , Answer Author : AndrewUlrich

Leave a Comment