Submit
advert

Particle Flow Fields

About Particle Flow Fields

This app creates flow fields: invisible force maps that push particles around. Each preset is just a pair of simple maths formulas that say how a particle should move in the x and y directions.

Some presets look smooth and wavy. Others spiral, attract, or scatter particles into chaotic patterns. Even though the rules are tiny snippets of maths, the results can feel alive and unpredictable.

Think of it like a virtual wind tunnel for pixels — the equations are the wind, and the particles are dust drifting in it.

You can switch between presets to see how the formulas change the flow. Because everything depends on position and time, the patterns constantly shift and evolve.

You can also create your own formulae to design custom flows. Just remember to use x, y, and t as your variables. You can also use JavaScript math functions like Math.sin(), Math.cos(), and Math.hypot().

The particles themselves are just dots that move according to the flow field. They have no mass or inertia, so they instantly change direction based on the formulas. You can adjust the amount of particles, their size, and color to see how they interact with the flow.

The Math Behind It

Each preset consists of two formulas: one for the x-direction and one for the y-direction. The formulas take three inputs:

  • x: The particle’s current x position, normalized between -1 and 1.
  • y: The particle’s current y position, normalized between -1 and 1.
  • t: The current time, which increases as the animation runs.

The output of each formula is a velocity value that determines how much to move the particle in that direction. For example, if the x formula outputs 0.1, the particle will move 0.1 units to the right in the next frame.

Video Explanation of Flow Fields

Creating Your Own Flow Fields

You can create your own flow fields by writing custom formulas for the x and y directions. Each formula defines the “wind” that pushes the particles around.

  • Use x, y, and t as your variables. x and y represent the particle’s position, while t represents time.
  • Experiment with mathematical functions like Math.sin(), Math.cos(), Math.tan(), and Math.hypot() to create interesting patterns.
  • Combine multiple functions and operations to create more complex behaviours. Use brackets to keep things clear and predictable.
  • Start with simple formulas and gradually build up complexity. For example:

    • fx = Math.sin(y + t), fy = Math.cos(x + t)
    • or fx = -y / (Math.hypot(x,y) + 0.1), fy = x / (Math.hypot(x,y) + 0.1)
  • Test your formulas by running the simulation and watching how the particles move. Adjust the parameters to get the effect you want.
  • Try adding Math.random() for a touch of unpredictability.

If you make something cool, please share it with us. We might even feature it as a preset! Submit your formulas.

Famous Flow Field Examples

Some of the presets are based on famous chaotic systems, discovered by scientists and mathematicians exploring the edge between order and chaos.

These versions are simplified adaptations of the original equations, designed to capture their chaotic look rather than their exact mathematics.

Lorenz Attractor

In the 1960s, Edward Lorenz discovered this system while studying weather. It’s famous for the “butterfly effect” — tiny changes in the start point lead to wildly different outcomes. The swirling loops show how simple equations can produce complex, chaotic motion.

Clifford Attractor

Introduced by Clifford Pickover in the 1980s, this attractor mixes sine and cosine in a way that creates dense, organic loops. It’s a favourite in computer art because of its smooth yet unpredictable flow patterns.

De Jong Attractor

Created by Peter de Jong, this map is known for generating intricate, flame-like shapes. It shows how just two equations with a few constants can produce endlessly varied, chaotic behaviour.

Henon Map

Michel Hénon designed this as a model of star motion in galaxies. It’s a simple quadratic system that still manages to spiral into a distinctive, fractal-like shape, often used as a textbook example of chaos.

Ikeda Map

Proposed by Ikeda Kensuke to model light in a laser cavity, this attractor spirals inward and outward like a glowing vortex. It’s widely studied in chaos theory and optics for its elegant, turbulent structure.

Icon for Brush Ninja: Online Animation Maker Brush Ninja Online Animation Maker
Icon for Paint Ninja: Draw and Paint Online Paint Ninja Draw and Paint Online
Icon for Code Ninja: Make Art with Code Code Ninja Make Art with Code
Icon for Emoji Art: Make Emoji Art Emoji Art Make Emoji Art
Icon for Photo Collage: Make Photo Collages Photo Collage Make Photo Collages
Icon for Comic Maker: Make Comics Comic Maker Make Comics