RW

Anatomy of a Line Field Animation

January 15, 2026 | 10 minutes (1930 words)

What started as fun idea, and low-stakes desire to add a subtle wind movement background animation to my homepage, turned into an exploration of JavaScript canvas rendering, noise functions, planar waves, and the surprisingly rich parameter space of moving lines.

This post walks through the mental model behind the line field animation used as the background for this website, how it evolved from a static grid to an organic wind simulation, and learnings and reflection on creative coding through conversational iteration with LLM’s.

The Mental Model

At its core, the animation is simple: draw a field of parallel lines on a canvas, then displace each point along those lines based on mathematical functions that change over time to simulate wind.

The key insight is that lines are just sequences of points. If you can control where each point sits, you can make the line wave, ripple, or flow.

How Wind “Moves”

Wind isn’t modeled as emanating from a point source. Instead, it’s a traveling planar wave. A useful reference is ocean waves approaching a beach rather than ripples from a dropped stone. Each point’s position is projected onto the wind direction axis, and a sine wave sweeps along that axis over time:

1

  displacement = sin(position_along_wind_axis + time)

As time advances, the sine wave pattern shifts in the wind direction, creating the illusion of wind sweeping across the field. With two wind sources at different angles, the waves interfere to create complex, naturalistic patterns.

Layered Displacement

The final displacement of each point combines several layers:

  1. Simplex noise — Organic, spatially-coherent randomness that scrolls in the wind direction
  2. Traveling sine waves — Parallel wavefronts for each wind source
  3. Per-line modifiers — Jitter (phase randomization), whisp (amplitude variation), and gust envelopes

Each layer operates at different spatial frequencies and serves a different purpose, but they all scroll or animate over time to create cohesive movement.

The Evolution: From Static to Organic

The animation started simple, just a field of lines. Each turn in the session increased the complexity by adding additional parameters and controls. Below is a timeline of how the animation evolved along with the prompt used for each step.

Stage 1: A Grid of Lines

The first version was trivially simple: parallel lines at a fixed angle, evenly spaced.

"Add a field of lines parameterized by line width, line spacing (the distance between lines), and line direction. Also add controls for line color and opacity. Let's add this to /animations in isolation."

The LLM (opus 4-5) provided this initial skeleton including a canvas element, a render loop, and controls for the requested parameters.

Controls:

  • Line Direction — The angle at which lines are drawn across the canvas
  • Line Spacing — Distance between parallel lines (smaller = denser field)
  • Line Width — Stroke thickness of each line
  • Opacity — Transparency of the lines
  • Line Color — The color of the lines
Animation paused on mobile. Tap play to start.
N S E W

Stage 2: Wind and Movement

"Let's now add movement to the field of lines. I'd like to simulate wind blowing over the lines, parameterized by wind speed and wind direction. I'd also like wind size to represent the overall size of a single wind element's influence over a line. The larger the wind size, the more it displaces the length of the line. Let's also include jitter and jitter diameter per line. The jitter influences the randomness by which a line reacts to wind, and the jitter diameter controls the distance a line can move from its origin."

Wind is modeled as a sine wave traveling in a direction causing displacement of the points making up the field of lines, resulting in the illusion of movement. Points along the wind axis move together, creating the illusion of cohesive wind pushing through the field. Simplex noise adds organic variation—each point samples a 2D noise field, shifting perpendicular to the line direction.

Controls:

  • Wind Speed — How fast the wave travels through the field
  • Wind Direction — The direction the wave propagates
  • Wind Size — Wavelength of the wind pattern (larger = broader, gentler curves)
  • Jitter Amount — Randomizes each line’s wave phase (0 = lines move in sync, higher = lines move independently/chaotically)
  • Jitter Diameter — Overall displacement magnitude (larger = points move further from origin)
Animation paused on mobile. Tap play to start.
N S E W
N S E W

Stage 3: Dual Wind Sources

"Let's add an additional wind source, with an independent wind direction and wind speed. Let's model displacement as wave interference between the two wave sources. I'd also like to add a wind density parameter that controls the spacing between wind points of origin."

Adding a second wind with independent direction and speed created interference patterns. The interaction between winds produces complex, naturalistic movement that neither wind creates alone.

New controls:

  • Wind 2 Speed/Direction — A second independent wind source that combines with the first
  • Wind Density — How many wave cycles fit in the viewport (higher = more turbulent appearance)
Animation paused on mobile. Tap play to start.
N S E W
N S E W
N S E W

Stage 4: Depth Effect

"I'd like to add depth. Let's imagine the field of lines as a horizontal plane. Lines displaced above the plane appear closer to the viewer. Lines displaced below the plane appear farther away. I'd like a depth effect parameter that controls the opacity. When set to 0, all lines appear with constant opacity regardless of displacement. When set to 10, lines with greatest negative displacement (i.e. lines that appear to be further away) have 0 opacity and are fully translucent.

Using the noise displacement value to modulate opacity: points that displace more appear “closer” and more opaque. This simple trick adds surprising depth to a 2D animation.

New control:

  • Depth Effect — How strongly displacement affects opacity (0 = uniform opacity, 1 = maximum depth variation)
Animation paused on mobile. Tap play to start.
N S E W
N S E W
N S E W

Stage 5: Whisp Effect

"Can we make individual wind elements feel more whispy?"

I left this prompt intentionally vague to see how the model would respond. First it attempted to add per-point turbulence, but this was too noisy. Eventually, we settled on this concept of “whisp”, which controls the intensity of wave amplitude on the displacement of clusters of lines.

Whisp as a control works well with jitter, but they are distinct controls. Jitter is a parameter that influences lines independently, and alters the line’s offset in relation to a wave. Whisp is a source of noise that moves slowly over the field and influences clusters of lines. As whisp noise moves over clusters of lines, it multiplies the amplitude of independent waves (i.e. wind) interacting with the same cluster of lines. This means whisp is an independent temporal noise source that moves through the field lines, independently of the two wind sources, allowing for temporary stronger wind effects.

New control:

  • Whisp — Per-line variation in wind response (0 = all lines move uniformly, higher = some lines and their neighbors catch more wind than others)
Animation paused on mobile. Tap play to start.
N S E W
N S E W
N S E W

Stage 6: Gusts

"Let's add a gust parameter that controls the rate of wind noise generation for the two wind sources."

Wind speed sets the maximum intensity. Gust modulates how much of that maximum is active in different regions. Slow-moving spatial noise modulates each wind’s intensity. At low gust values, you see calm areas punctuated by gusts sweeping through.

New controls:

  • Wind 1 Gust — Oscillation envelope for the first wind (10 = constant, 1 = mostly calm with occasional gusts)
  • Wind 2 Gust — Oscillation envelope for the second wind (independent of Wind 1)
Animation paused on mobile. Tap play to start.
N S E W
N S E W
N S E W

Prompting for Creative Code

What surprised me most was how well conversational iteration works for this kind of project. Each prompt built on the last, and the AI maintained context about what we’d built.

A few patterns that worked well:

Start vague, then refine: “Add a subtle animation” -> “Make it wave” -> “Add wind direction” -> “Two wind sources”

Incorporate feeling without controlling implementation: “Make it feel more whispy” would often lead to a better solution than “add turbulence to each point.”

Iterate via feedback: When the first whisp implementation felt wrong, describing why (“too choppy, no gradual movement”) helped find a better approach.

Use a sandbox: Adjusting parameters live and experimenting at the extreme ends of values is often more intuitive than reading the code alone.

The Sandbox: Playing with Parameters

I find the general recipe of build a sandbox first, then refine through iteration works surprisingly well across a broad range of problems, not just for creative coding and play like this animation exercise. The underlying principle, which echoes themes from REPL-driven development, is the faster your feedback loop, the more you can explore and sample from the solution space to find an ideal solution.

If you want to play with the sandbox I used to create this animation yourself, visit the animations sandbox and experiment. And if you build something interesting, I’d love to see it.

Future Directions

This line field animation was just a fun idea I had, but there are others I would like to explore:

Genetic Animations

What if parameters evolved over time based on fitness functions? Lines that “survive” based on aesthetic criteria, gradually evolving toward interesting configurations.

Layered Animations

Multiple animation layers with different parameters, composited with blend modes. A fast, fine-grained layer over a slow, broad layer could create rich depth.

Interactive Response

Animations that respond to mouse position or cursor movement. Wind that flows away from the cursor, or lines that orient toward it.

Graph-Based Visualizations

Instead of parallel lines, what about connected graphs? Nodes that drift with noise, edges that stretch and compress, creating organic network visualizations.

Audio-Reactive

Parameters modulated by audio input—bass driving wind speed, treble affecting jitter. The animation becomes a visualizer.

LLM’s open new dimensions

What started as an amusing simple background animation experiment quickly became an exploration of noise functions, wave interference, and the expressive power of parameterized systems.

I would never have spent the time learning and playing with traveling planar waves, simplex noise, or linear interpolation, if it weren’t for the ease by which LLM’s enable this form of play. Just as each parameter in the animation opens a dimension of variation, LLM’s open a dimension of infinite creativity and exploration.