Flow fields
4 min read

Flow fields

Flow fields

Day 4 of GenuaryThe next next Fidenza.

While participating in Genuary 2022, I was introduced to the concept of flow fields. A flow field is a grid of angles that can be used to create interesting generated shapes that have a sense of movement. The idea is that you pick a starting poing on the grid and then draw curves influenced by the direction of the angle at the current point. Basic variation can be introduced by adjusting the length, weight and colour of each curve.

The post linked above has a great visualisation of the underlying grid of angles that we can then use to draw curves through. The prompt for Day 4 of Genuary, was to create "the next  next Fidenza", and while I think that might be a lofty goal for a days worth of work, I had a lot of fun exploring flow fields, and thought I would document my process and experiments.

First pass.

Getting a grid up and running and drawing curves randomly through it.

The first thing I wanted to do was to set up a base grid, and setup a way to draw curves through the field of various lengths, colours and weights.

These are the results of that bit of work. Starting points placed randomly, colours and weigts also chosen randomly.

While the curves themselves are interesting, the way they overlap and bunch up (due to the random nature of point placement), leaves a bunch of empty space and causes some of the shorter lines to be obscured by the larger ones, or several smaller ones.

So the next step was to remidiate this.

Pass two.

Preventing colissions and picking a colour scheme.

Each line segment is drawn in steps. The length of each step is a fraction of the overall image's size, which in this case comes out to around 20px in the direction of the current angle. After each successful step, I kept track of where we had just drawn, with a circle the size of a multiple of the current line's thickness. By making the circle's radius adjustable, it means I can specify exacly how tightly each line should be drawn to its neighbour, and this'll work for lines of varying thickness.

Now that each point drawn is tracked, whenever I want to draw the next point, I can check to see if it would be drawn in one of the stored circles and decide what to do accordingly.

There are still some bits where lines overlap or toucgh slightly, but no where near as much as before. So I think this technique works well for what I am trying to achieve here. It's also fairly quick, drawing ~1000 curves of 10-200 steps each still gives a fairly smooth framerate.

In this pass, I also picked a colour palette to make each itteration a bit easier to look at and judge solely based on form, rather than the mishmash of random colours that may or may not be appealing.

Pass three.

Further refinements and carring on expirimenting.

The above examples all used Perlin noise as a means for distorting the angles at each point. While this works fine, I wanted to explore different ways of generating this distortion to see if I could get a more interesting field of angles.

The next few images are expierments with Cubic noise generation as well as smoother and closer curves.

Initially the plan with this year's Genuary was to try and get through a small sketch each day, but flow fields have proven to be such a flexible and joyous tool, that I can't help but to keep exploring to find that one method of turbulence generation that will yield surprising and interesting results!