: Vector Format Perlin Noise Effect Goal is to Achieve vector formatted Perlin noise line art. Visual Examples of the desired effect: It is possible to create a static Perlin noise effecting

@Carla748

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: bl.ocks.org/d2fn/0d3789278f3d9816e0fd
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:
jimherold.com/2012/04/20/least-squares-bezier-fit/
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: github.com/josephg/noisejs
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.

Vote Up Vote Down