Using Flield

Flield builds three-color compositions from seeded flow fields and symmetry. Pressing Random shows you what it does. Everything below is about steering it toward something you meant.

The basics

• Every composition is three colors: a background, plus two independently generated artwork layers.
• Each layer runs on its own seed, so the same seed and settings always regenerate the same result.
• On a wide screen the canvas sits on the right and every control that shapes it lives in the sidebar on the left. On a phone the controls move to a bar along the bottom and the canvas takes the rest of the screen. The Flield name and the site links share one strip under the artwork on both.
• Every page load opens on a freshly randomized composition rather than a fixed default. Background color, block size and shape mask are the exceptions, for reasons covered under Locks. A phone held upright starts on the Mobile preset, so the artwork fills the screen it is viewed on. A shared link always arrives at the size it was made with.

In-app tutorial

Everything on this page is also built into the app itself. The button opens a thirteen-step tutorial. You will find it at the bottom of the sidebar next to Copy Link, or at the end of the settings panel on a phone. Each step is paired with a small live example of the control it's describing.

The steps cover what a flow field is, Random, moving between the tabs, and layer settings. Then dimension presets and Tile, the shape mask, and locks. Then Palette Range and Density Range, Auto-randomize and Undo. Then saving, sharing and exporting. Motion comes last, with a small canvas that runs one cycle of each kind.

On a first visit, a small Take the tour prompt appears above the canvas. Take it or dismiss it and it will not come back. The button opens the tutorial anytime. Step through with the arrows, the dots at the bottom, or the left and right arrow keys.

Using the controls

Tabs

On a phone

The controls split in two. Undo, Auto-randomize, Random and a button for each panel sit in a bar fixed along the bottom. That puts them within reach of a thumb, so working through the exploration loop never costs an opening and a closing.

The two panel buttons raise a sheet over the lower part of the screen: one holds the settings, the other holds exporting and sharing. Whichever panel is showing, its button stays lit.

Press that one again to put the sheet away, or the other to swap panels without the sheet moving. Dragging it down by the handle along its top dismisses it, as does tapping the artwork or pressing Escape.

The sheet stops short of the artwork rather than covering it. The canvas shrinks to whatever is left, so you can judge a slider against the result as it moves. Drag the handle upward instead and the sheet takes more of the screen, for when the settings matter more than the view.

Whichever setting you last reached for stays behind when the sheet closes, on a single row above the bar. That way a value can be dialled in against the artwork at full size rather than through a narrow preview. Its own close button puts the row away.

Texture

One field can be drawn six ways. The Texture control at the top of each layer's Flow field section picks which. All six read the same field from the same five controls. Switching texture keeps the composition and changes only what is made of it.

Some sliders do a different job once the field is a heading rather than a shade. Those change name with the texture, so the panel always says which one you have.

On Streamlines and Weave, Field strength becomes Curl. That is how far the noise swings a strand off the flow direction. Flow stretch becomes Trail length. Smoothing passes becomes Strand weight, because the usual smoothing rule erases a strand one cell wide. What it does instead is thicken it.

On Contours, Field strength becomes Levels. That is how many lines get cut out of the field.

Base density keeps its name everywhere. It means the same thing in all six textures: the fraction of the canvas covered.

Everything downstream treats all six as ordinary cells. So any of them mirrors, kaleidoscopes, takes a shape mask and exports to PNG, SVG and GIF the same way. The two layers need not match either. Streamlines over streaks is a composition that streaks alone cannot make.

Motion reaches the two traced textures a little differently. Under Drift and Wind, their particles run along the field instead of the field sliding underneath them. Under Pulse, the trails lengthen and shorten instead of the density swinging. That breathes, rather than popping whole strands in and out.

Read what is a flow field? for the arrow grid drawn out beside the strands it produces.

Speed and interval

Two sliders in the General tab, on one scale that gives the fast end as much travel as the slow one. Both start at one second and run up to sixteen. Reroll every steps in doublings, because a reroll cadence is a choice between a few speeds rather than something to dial in.

Speed is how long a motion takes to come back round. It appears under Motion once you have picked one, since there is no cycle to time before that. Reroll every, under its own heading, is how long Auto-randomize waits before it rerolls.

They are separate because they answer different questions. A composition that drifts slowly while rerolling quickly is a perfectly reasonable thing to want.

An export has to reconcile them in the one case where both are running. There, a pass is a whole motion cycle rather than a reroll interval. The seam that makes a GIF loop is the cycle's own end, so cutting one short at the reroll would be the wrong trade. With Motion off there is no cycle, and a pass is one still held for the reroll interval.

Both travel in every shared link now. A link to a moving composition arrives at the speed it was made at, whether or not it offers to play.

Sliders

The click and drag target reaches well past the thin line you see, so grabbing a slider doesn't take a precise hit.

Flow scale is measured in canvas pixels, so a setting reads the same at any block size. Field strength puts clear banding around the middle of its range. A link or saved slot from before that change loads with its strength halved, so it renders exactly as it did.

Scrolling

A tab's content can run longer than the sidebar is tall. A soft fade shows up at whichever edge still has more to see, top, bottom or both. It clears once you have scrolled all the way to that edge.

On a short screen the column scrolls as one piece instead. A phone held sideways does this, as does a window dragged down to a sliver. The top row of controls stays put and the fades sit that one out.

Holding to confirm

A handful of controls throw away something that can't be got back, so a press on its own no longer runs them. Hold the button instead: it fills from left to right and fires the moment it is full, about a second in. Let go early and nothing happens beyond a reminder to hold. Reaching them from the keyboard activates them directly, with no wait.

• Lock All and Unlock All, which replace every lock you had set.
• Undo, which steps back without recording what it replaced, so there is no forward again. On a phone it also sits a thumb's width from the play button.
• Loading a slot, which drops the composition on screen for the saved one.
• Saving over a slot that already holds something, since that one outlives the tab. Saving into an empty slot is a plain press: there is nothing there to lose.

Confirmations

A few actions change something that might not be on screen right now, like Lock All changing icons on a layer tab that isn't open. Those show a brief confirmation above the canvas: Lock All and Unlock All, Undo, saving or loading a slot, and Copy Link.

Locks

Every randomizable field, background color, block size, and shape mask included, has a small lock icon next to it.

• A locked field holds its current value through a randomize pass instead of getting a new one.
• Lock and Unlock, the row under Random, apply to every field at once.
• Each tab's button shows a small padlock when any of its fields are locked, and a solid one once all of them are. Hover it for the exact count. That way Lock All or a lock on another tab never goes unnoticed.
• Background color, block size, and shape mask start locked. That's why a fresh page load keeps its starting background, grid resolution, and shape steady while everything else randomizes around them. Unlock any of the three to fold it into future randomize and Auto-randomize passes.

Tiling without a seam

The Tile preset, on the General tab next to Web, Tablet, and Mobile, sets up a square canvas that repeats without a visible seam. It does three things at once:

• Turns off the shape mask.
• Switches both layers to 4-way mirror symmetry, which makes each layer's left edge match its right edge, and its top edge match its bottom edge, exactly.
• Locks both settings, so Random and Auto-randomize keep exploring colors, density, and flow field without breaking the seam.

How to make a seamless tiling background covers why the mirror guarantees the seam, what breaks it, and how to use the tile in CSS once you have it.

Saving and sharing a composition

Each saved slot shows its three colors and the time it was saved, so you can tell them apart before loading one.

Both capture the exact same thing: colors, both layers, and the lock set. A loaded slot or an opened link is ready for Random or Auto-randomize the way it was set up.

Use Saved States to bookmark a composition for yourself. Use Copy Link, at the bottom of the sidebar, to hand an exact reproduction to someone else, or to yourself on a different device.

Keyboard shortcuts

All three stay out of the way while you're typing in a field, and the legend sits in the footer under the canvas.

Exploring an art direction with Auto-randomize

1. Press Random to reroll every unlocked field at once. Good for a first look, but left alone it just cycles through unrelated compositions. A roll is steered rather than blind. The two layers are held apart in hue, and both are held apart from the background in lightness, as far as each layer's Palette Range allows. That way three random colors still read as three.
2. Lock down what you want to keep, and let the rest stay unlocked. For example: lock a layer's seed and symmetry, leave density and flow field unlocked.
3. Click the Auto-randomize button, the play arrow next to Random, to repeat that reroll on a timer. The Reroll every slider in the General tab sets the wait, from one second up to sixteen.

What comes through is a run of variations that share the same underlying structure, small differences in fill and texture on a shape that stays recognizable. It reads less like random noise and more like a designer trying variations on one idea.

Three examples, each a long run at a two-second interval. The only thing that differs between them is what was locked.

Full random

Brand campaign

Kaleidoscope variations

GIF export is the same loop, captured. The step count option (1, 3, 5, 8) runs that same randomize sequence, frame by frame. Each frame is held for the Auto-randomize interval. You get the exact sequence Auto-randomize would generate, rather than whatever the artboard happens to be showing.

Motion and animated exports

Motion, in the General tab, holds every setting and both seeds, then animates the composition on screen. The last frame flows straight into the first, with no visible cut. There are four kinds beside None: Loop, Drift, Wind, and Pulse. Pick one and the canvas plays it straight away, which is also exactly what a GIF will record.

Loop

Breathes the flow field around a small closed path, one full turn across the frames. Each cell's dither is fixed by the seed, so shapes grow, shrink, and slide rather than flicker.

Drift

Flows the field one way along its flow direction, travelling exactly one period. So the pattern's density envelope repeats along that axis, at flow scale times stretch pixels.

Wind

Drift with weather. The field flows the same way and the same distance. A second, much broader noise field bends where it is sampled, rising and settling once per cycle like a gust.

Fine detail travels twice as far as the broad shapes, so wisps run ahead of the streaks they belong to. The gust starts and ends at nothing, so the cycle opens on Drift's first frame and the bending rises and settles once through it.

Pulse

Swings density with one sine wave, 40% of each layer's density either way, so the composition inflates and thins. Cells appear and vanish in a stable order, so it breathes rather than sparkles. It's the one kind that moves without any field strength.

Each kind is one cycle, and a cycle lasts as long as the Speed slider in the General tab says. Auto-randomize keeps its own interval, so the two can run at different rates.

Leave Auto-randomize running as well and the two combine: every pass rerolls, animates through one full cycle, then cuts to the next. The GIF length menu says how many passes to record.

Motion on its own has nothing to advance between passes, so it records one looping cycle whatever the length says.

Layer B moves with Layer A rather than in lockstep, like two depths of one flow field:

Picking any of them plays that kind on the canvas right away, at the export's own frame rate. What you see is what the file will be. Pick a step count to put the still back.

How to make a looping animated background covers the same four motions from the other side. Why they loop when a video clip does not, and which file format to reach for.

Widening or narrowing with Palette Range and Density Range

Each layer has two collapsible range controls, both collapsed by default:

• Palette Range constrains the hue, saturation, and lightness a randomized color is allowed to land in, instead of picking from the full wheel.
• Density Range does the same for Base density. It sets how full or empty a randomized layer is allowed to get. The default window is 0 to 0.5, because an unconstrained density can randomize all the way to 1.0 and fill a layer with flat color.

Narrowing or widening a range does not change what is locked. It changes how far a single unlocked field is allowed to wander. That's the difference between exploring a tight variation on one idea and exploring a much broader one.

Using what you make

Images you make with Flield are yours. Use them anywhere, commercially included, with no attribution required. Nothing needs to be credited and nothing needs to be asked for.

The tool's own noncommercial license is a separate matter. It governs the source code in the repository, not the artwork the code produces. Building the tool into a paid product is the thing that needs a license. Exporting a PNG and putting it behind a client's logo is not.