Originally published February 15, 2022 on Medium, republished here January 29, 2024.
Flow, my second generative artwork is a study of movement. The algorithm allows for a broad range of outputs which can generate feelings from tranquility to intensity, but always in the context of an active, continuous progression. I wanted to further explore this idea after my first project, Waves. The name “Flow” comes from this theme as well as the use of flow fields as an underlying anchor of the algorithm. If you’re not familiar with flow fields, Tyler Hobbs has a great article on them.
Motion Everywhere
While a static image of Flow expresses activity, it is designed so that each piece perpetually evolves while maintaining a certain look. This experience can resemble watching clouds in the sky.
The motion derives from a few places. First, the shapes scroll vertically and horizontally, either across the full screen or part of it, in which case they may disappear and reappear elsewhere. The scroll rate varies and therefore, over time it is unlikely the shapes will repeat the same positioning.
Secondly, each piece rotates on top of the flow field. “Vertical” and “horizontal” mentioned earlier are relative to this rotational angle. The rotation causes the shapes to interact with the flow field grid differently and distort as they do.
Lastly, some pieces will have patterns inside the shapes, which have their own motion. More on this later.
Core Structure
The algorithm uses a grid coordinate system directed by a flow field, creating the ability to plot shapes in a manner distorted by the field.
There are just two shapes, rectangles (“block” in the metadata) and ellipses (“round”), which are laid out on 5 different layers. A given piece may have just one or both shapes.
The shapes can also have a tilt, for example reforming a rectangle into a parallelogram.
Lastly the relative proportions of shapes can vary as well, meaning sometimes they all will have the same width or height or can vary dramatically from each other within a given layer.
Palettes
There are 15 different palettes used in the art, based on a few different approaches. They all share a common structure in which each layer of shapes has a range of possible colors and the background also carries its own color.
The most common type of palette has a pre-specified algorithm and takes in an input of a random starting hue (in HSL color space) and a direction (positive or negative). Depending on the palette it may have a dark background, light background, or one that transitions from dark to light.
The second most common approach is to choose from a list of colors arranged in gradients. Each gradient is two or more colors. The background and each layer chooses two points from one gradient to determine the final colors.
The deep palette chooses one of 4 pairs of gradients. Of the pair, one determines the background color and the other gradient is used for all the layers.
Lastly, the achromatic palette only allows for white, grays and black. There are 4 different versions of this with different backgrounds and lightnesses per layer.
Shape Appearance
In addition to colors, shapes have gradients to create a more 3-dimensional look. There are 4 different looks using different gradient structures.
Patterns
Each piece may also choose a pattern to fill in the back two layers.
One type of pattern is lines, of which there are 4 variations. The number of lines drawn in each shape depends on and changes dynamically with the size of the shape. Therefore you may see lines seem to disappear or appear as the art animates.
A second type of pattern is to have additional circles, squares or a mix inside the shape. These appear in up to 3 layers depending on the current size of the shape, and move around inside the shape.
Transparency
In a given piece the shapes may be fully opaque or have a small degree of transparency.
Density
As each piece is built, how much of the visual space is taken up by shapes is probabilistically determined by the density. On average pieces with low density will have more background visible than those with high density.
Smaller touches
In addition to the main aspects listed above, other elements in the art create subtle variety but are not listed in the metadata.
Background
The lines in the background can vary in length and in how many overlapping layers are drawn.
Outlines
Shapes optionally have outlines
Line Styles
For pieces that have outlines or lines as patterns, the line style could be one of three with subtly different effects.
Interactivity
As with Waves, Flow has some unique features embedded into the art.
First, the metadata can be seen directly in the art. The key ‘m’ reveals the same information that could be seen on OpenSea or other marketplaces.
The different layers of the art can be toggled on or off with 1–5. I turned them all off to produce the screenshots of the backgrounds above.
There are two speed dials for the art — how fast the shapes scroll around in the frame, and how fast the piece rotates. These can be controlled with left/right and up/down respectively. The piece can also be paused at any point with ‘p’.
To capture the current frame, ‘c’ is available. Used with other keys above, it should be able to grab exactly a particular look.
Full screen mode can be done with ‘f’. Note that on some platforms like OpenSea this may be disabled, but is available on the this website.
Lastly, for a little fun, there is an alternative view available with ‘a’, which turns off the distortions that the flow field produces. It creates a retro vibe which stands on its own, but serves as a bonus feature.
Performance
Producing Flow as an animated artwork had challenges which consumed a significant portion of effort. Broadly speaking, the objective is to allow for the art to be rendered in most conditions at 30 frames per second. Numerous optimizations have been made to achieve this. However, understanding that the devices that will display Flow will get better over time, when there were tradeoffs between the final look of the art and how it renders, I tended to favor the former.
Technicals
The code is written in JavaScript using no external libraries, and stored on chain in the smart contract.
Once the project is completed, the html files and metadata (which are generated from the code above) will also be stored on either arweave or IPFS and the contract will be frozen allowing no further changes.
Closing Thoughts
Flow was an incredibly fun project to create. Many ideas came up along the way which I put to the side as I focused on finishing it, but am looking to incorporate into future works.
I hope you enjoy the art.