Flow field

Visualize particles moving in a velocity field.

Click on the options to show more details.

Change velocity field

\(\mathbf{F}(x,y)=\left<\right>\)

Click here for instructions. Use presets here.

Invalid input. Need help? Or go back.

Particle settings

Particles are the colored dots on screen.

Show particles

OFF

ON

Particle count

Controls the number of particles.

Particle size

Controls the maximum particle size.

Color offset

Changes the color of the particles.

Color options

Colors particles based on movement.

Vector settings

Vectors are the arrows on screen.

They indicate the direction of the vector field.

Show vectors

OFF

ON

Normalize vectors

Draw all vectors with equal length.

OFF

ON

Vector density

Controls how many vectors are drawn.

Vector length

Controls each vector's relative length.

Grid settings

The coordinate grid shows the position of particles and vectors in the plane.

Show grid

OFF

ON

Tools

Once you turn them on, move your mouse to the middle of the particle field to activate.

Shoot particles from cursor

Release particles from the cursor.

OFF

ON

Show value at cursor

Shows the value of the vector field.

OFF

ON

Notes

Vector fields are beautiful. This program aims to make them accessible in a fun and interactive way.

There are still a few limitations to the program, which will hopefully be addressed in a future update.

Flow Field Version 1.0 by Chase Lean 27/3/2022

Instructions

To change the flow field, enter an equation describing the vector field into the text box.

For example:

Click here for another example.

When you are done, press ENTER to submit.

You can use the following operations:

Addition: x+y

Subtraction: x-y

Multiplication: x*y

Division: x/y

Exponentiation: x^y

Factorial: x!

You can use the following constants and mathematical functions:

e ≈ 2.71828
sin(x)
csc(x)
sinh(x)
arcsin(x)
arcsinh(x)
ln(x)
sqrt(x)
floor(x)
min(x, y, ...)

pi ≈ 3.14159
cos(x)
sec(x)
cosh(x)
arccos(x)
arccosh(x)
log2(x)
cbrt(x)
ceil(x)
max(x, y, ...)

abs(x)
tan(x)
cot(x)
tanh(x)
arctan(x)
arctanh(x)
log10(x)
sign(x)
round(x)
random(x)

All trigonometric functions take their arguments in radians. For degree input, follow this example: sin(60deg).

There is also an input shortcut:

Original: F(x, y) = < x-y, x+y >

Shortcut: x-y, x+y

If you provide just one component eg: < x >, then both components will be the same: < x, x >

Presets

Not sure what equation to enter? Here are some beautiful presets you can choose from.

Help

Having trouble with the input? Here are some common mistakes and how to fix them.

1. Missing the asterisk (*) for multiplication

Incorrect: xy, xsin(y)

Correct: x*y, x*sin(y)

(*) is not required when multiplying with constants or with parentheses.
For instance, 2x and 2(x) are allowed.

2. Using an unsupported variable

Letters such as z, r and theta are not allowed.

The only supported variables are x and y.

3. Missing function parentheses

Incorrect: sinx, sin[x], sin|x|

Correct: sin(x)

4. Mismatched parentheses

Incorrect: cos((x+2/3)

Correct: cos((x+2)/3)

5. Making a spelling mistake

Some differences in notation will be autocorrected.
For instance, log(x) is assumed to be ln(x). But logg(x) will return an error.

6. Using an unsupported function or constant

For instance, entering phi*x, or gamma(x) will return an error.

7. Using an unsupported vector field notation

Incorrect: F(x, y) = x*i + y*j

Incorrect: F(x, y) = (x, y)

Correct: F(x, y) = < x, y >

You can also directly write "x, y".

Limitations

Below are the limitations of this program and what I'll (hopefully) be working on in the future.

If you have any suggestions, please let me know!

1. Pan and zoom features are not supported on mobile.

Their implementation is separate from the click, drag and mouse wheel features on PC.

2. The frame rate decreases at high particle count.

Drawing lots of particles on the HTML canvas causes lag, which is especially pronounced on mobile devices. Thus, the maximum particle count is limited to 2000. A possible solution is draw the objects with the help of the GPU.

3. The resolution of the coordinate grid is between 10^-10 and 10^10.

This value was chosen to limit floating point errors.

4. The scale on the x and y axes cannot be changed.

This feature has not yet been implemented.

5. The program can be made more user-friendly for those who are not well versed in college level mathematics or higher.

A pop-up explaining vector fields in detail, as well more detailed instructions and bigger selection of presets can be added.

6. The accuracy of the numerical approximation can be improved.

Euler's method is currently used to animate the path of the particles in the velocity field. It works for providing the general shape of the vector field, but is unsuitable when high accuracy is required.

7. The animation fails at points where the value of the vector field becomes unbounded.

Weird things happen in the neighborhood of points where F approaches infinity. For example, F(x, y) = < tan(x), tan(y) > at x = pi/2. The adaptive step size provided by the Runge-Kutta-Fehlberg method is one possible approach to handle this.

8. The maximum distance a particle can travel per frame is limited.

This was implemented to reduce the damage caused by the existence of points when F is unbounded. It also results in loss of accuracy.