Flow Fields and Perlin Noise

A problem with the look

Perlin noise started as a complaint. In the early 1980s Ken Perlin was at Mathematical Applications Group, Inc. (MAGI), working on the computer-generated sequences for Disney's Tron (1982). Everything the software rendered looked machine-like, built instead of grown.

So he went after the opposite: smooth, natural-looking randomness, like the variation in marble, bark, or clouds. He published it at SIGGRAPH in 1985, in a paper called "An Image Synthesizer." Sources don't agree on the year he first worked it out, so call it the early 1980s, during Tron.

Gradient noise and value noise

The simple way to get smooth randomness is value noise: put a random number at each point of a grid, or lattice, and blend between them. It works, but the peaks and valleys stay pinned to the lattice, and a faint blocky grid shows through however much you smooth it.

Perlin did something else. At each lattice point he put a pseudo-random gradient vector, a direction, and interpolated the dot products of those gradients with the offset to whatever point you ask about. What you get is a continuous, band-limited field with no visible grid in it, the un-machine-like quality he was after. Load Value vs gradient in the tool and flip Noise type back and forth. Scale zooms the field in and out, and Octaves layers finer detail on top.

In 1997 the Academy of Motion Picture Arts and Sciences gave him a Technical Achievement Award "for the development of Perlin Noise." He kept refining it: simplex noise in 2001, then "Improving Noise" at SIGGRAPH 2002, a revised version of the original.

Then the technique left film. It reached artists through Processing, the language Casey Reas and Ben Fry started in 2001 in John Maeda's Aesthetics and Computation Group at the MIT Media Lab. Its built-in noise() function was documented as Perlin noise, and that's how the name got to a generation of artist-programmers, most of whom never read the 1985 paper.

There's a catch. Processing's noise() is value noise, not the gradient noise Perlin published. The project's GitHub issue #2549, "Real Perlin noise would be nice," documents the difference, and it was closed without a code change. For art it almost never matters. It's close enough, just not the same algorithm. Set Noise type to value and you're looking at the kind of noise noise() gives you.

Following the field

A flow field, as generative artists use the term now, is a simple idea. Lay a grid of angles over the canvas. Often, though not always, the angles come from sampling 2D noise at each grid point. Then drop a point anywhere, look up the angle in its cell, step a short distance that way, and repeat. Do it from thousands of starting points and you get families of curves that drift like compass needles in an invisible, slowly changing field.

You can't see the field on its own. Drag Count to 0 and the canvas goes blank. Bring it back and each point starts tracing. Step length is how far a point moves per step, and Steps per curve is how long it keeps going.

The idea of an agent following a field is a decade older than the noise-art scene. Craig Reynolds' 1987 SIGGRAPH "boids" paper set up agents following simple local rules, and his 1999 GDC paper, "Steering Behaviors For Autonomous Characters," lists "flow field following" among its reusable steering behaviors. Daniel Shiffman's The Nature of Code, which grew out of Processing's teaching culture, brought that vocabulary to a much bigger audience, with one chapter on noise and another on autonomous agents and steering.

Hobbs gives it a name

The essay that gave today's scene a shared vocabulary for the technique is Tyler Hobbs' "Flow Fields," posted on his site on February 3, 2020. He lays out the grid-of-angles method and is frank about the usual shortcut.

about 90% of the time, people use Perlin noise to initialize the vectors

— Tyler Hobbs, "Flow Fields," tylerxhobbs.com, February 3, 2020

He also recommends artists come up with their own distortion techniques, because Perlin noise is, in his words, "so overdone." Hobbs-style, the preset the tool opens on, uses gradient noise anyway.

The essay underlies his best-known work, Fidenza, 999 outputs released on Art Blocks on June 11, 2021. He describes it as a flow-field algorithm for non-overlapping curves, thick curved rectangles placed with collision detection, and probability-weighted color palettes.

Fidenza is my most versatile generative algorithm to date

— Tyler Hobbs, "Fidenza," tylerxhobbs.com

Fidenza-inspired goes the other way from Hobbs-style: a handful of thick ribbons instead of hundreds of hairlines, with Stroke weight turned up and Taper ends on. A lesson on Hobbs and long-form generative art is coming, and it takes Fidenza up properly.

Meridian, a sibling

Matt DesLauriers' Meridian, an edition of 1,000, came out on Art Blocks Playground on September 28, 2021. He describes it as

a 15kb JavaScript program that constructs stratified landforms using hundreds of thousands of small strokes of colour

— Matt DesLauriers, "Notes on Meridian," Substack

It's in the same family as flow fields, noise-driven mark-making, and its layered bands are easy to mistake for one. As far as his notes describe it, though, it builds landforms instead of tracing a single grid of angles. The Stratified (sibling) preset borrows the look, not the mechanism. It keeps Angle multiplier near zero, so the curves barely turn away from horizontal. Raise it and the bands loosen into a flow field.

Where this sits in the library

This part is this site's own reading, not documented history. Flow fields come after the instructions and constraints of Vera Molnár and Sol LeWitt, and after the systems of Nees, Nake, and Mohr. Those artists wrote rules for a machine, or a person, to carry out exactly. A flow field trades the written rule for a sampled, continuous field, and the artist designs a system whose raw material is noise. Nothing shows that Perlin, Hobbs, Reas, or Fry took Molnár or LeWitt as influences here. The documented chain runs through tools and teachers: MAGI, Perlin's noise, Processing's noise(), Hobbs' essay. Every curve on the canvas comes from one Seed. Press New seed and the same rules give you a new field.