The unreasonable flexibility of flow fields in generative art
Vector-based creative coding 🎨
Flow fields are basically a grid of vectors. One can create all kinds of visuals based on it. A stunning example is the Wind Map by Fernanda Viégas and Martin Wattenberg with a fur-like texture visualizing the speed of the wind.
Today I’ll demonstrate how to cook up some unique visuals using flow fields. The standard flow fields look like this, yet I’ll showcase some alternative looks.
The ingredients
A flow field usually consist of (1) a vector field and (2) particle systems. The vector field can be made up of a grid of 2D or 3D vectors. When it comes to 3D, we can view the 2D canvas as a cross-section of a 3D space (more details in this Coding Train video by Daniel Shiffman). The particles are propelled by these forces and move along the field, leaving behind a trail.
The recipe
To vary the flow fields, we can decompose its various elements. For example, the things we can change include:
- the direction of the vectors,
- the speed of how the vectors move across time,
- the initial position of the particles, and so on.
The variations I tried
By varying the hue in the HSB colorspace and reduce the speed of the vector field varying across time, one can get visuals like this.
Instead of using Perlin noise, one can use trigonometry for vector directions.
We can keep the Perlin noise vector field, yet change the particle initialization. Taking a leaf from the Creative Coding in Canvas & WebGL course, I used Gaussian randomness to replace uniform randomness. The result is some wild entangled dancing lines.
If altering the stroke weight, we can get a fuzzy effect.
How about creating a composite vector field that is made of several vector fields through addition or other operations? We get something totally different again, sort of a felt texture.
What if we encode data into the procedure? I decided to plug in dataset of SpaceX launches since 2012. It include the date&time of the launches, payload masses, mission outcome, and landing outcome. I used these data to vary initial positions of the particles, length of the lines and transparency. The rendering is intended to be more expressionistic rather than precise and definite.
Other resources
The techniques mentioned above focus on constructing visuals based on movements, as visualized by trails of the particles.
An alternative method is to draw static lines of various lengths following the vector fields.
Tyler Hobbs’ article detailed several inspiring creative directions, such as binning the angle to get angular lines, or mixing with other techniques. Other possibilities, to just name a few, include changing the shape of the particles, or adding a radioactive decay to the particles, and varying visual attributes accordingly.
The code for my sketches can be found on Github. Using it for commercial purpose or copyminting is strictly forbidden.
