The original Fields collection of digital drawings began on OBJKT. com in December 2021. This series introduced obstacles or holes in topological fields of spreading lines, thereby disrupting the flow and leading to emergent branching forms. Each drawing has a starting condition and set of rules and I generate them by hand without envisioning a particular outcome. I think of each line as the crest of a single wave traversing space through time, navigating voids and competing with other evolved aspects of itself. Field drawings are largely generative, but they do require situational awareness and adjustments to the rules that make them challenging to recreate in code. I was astounded by the early tests Orr shared, and we came up with new rules and possibilities for this collaboration.

Follow the creative process below…

f(x)ield drawings start with a path, a bezier curve. Paper.js is useful for forming and editing vector paths. Each line is composed of many circles of varying size laid along the path.

In order to make parallel lines follow curves, the path offset has to be perpendicular. This presents a challenge and opportunity to explore different visualizations.

Arcs are drawn between the offsets, again using bezier curves.

But what to do when one form branches into two? Set up their spine and offsets, but the form has to be a bit more complex.

What happens when one form shares the same “walls”? They are all connected visually, but they are not connected to each other.

The lines grow in sequence and encounter holes that they must accommodate, thereby creating emergent forms.

The arc lines need to be more responsive to the holes.

Underlying the initial path, there is a path that collides with holes and borders, figuring the start and end points of arcs. What if we play with the initial path direction and shape? Also, removing intersecting arcs leaves large gaps in the composition.

Some more testing more circular elements and experimenting with more points on the bezier curves.

To ensure borders and holes do not overlap, they are coded to end or squish out of existence.

Testing a different approach to overcome the gap issue by pushing arc ends toward the center of the composition and basing curves on the arc radius. Also, debug mode (y) is born.

Eureka! The border has a thickness and holes connect. Did I mention how amazing paper.js is with boolean operations and shapes?

Finally, no more gaps. Each line is continuous, following the path of the borders and meeting at the holes nice fillets.

More testing of different layouts, colors, textures, edges, and compositions.

Menu