Vector field drawing

Documentation

Physics

Some particles move in a random force field, somehow following Newton's second law of dynamics.

Particle settings

After the particle speed is updated from the force(s), a slow-down coefficient is applied to the speed. The particle speed slider lets you choose this coefficient between 0 and 1 (1 means not slowed-down).

Force field settings

The force field is generated from Perlin noise, but there are two methods here.

The first one (Basic) uses 3D Perlin noise to generate random vector angles in 2D in a "continuous way". The third dimension is used as time to get the angles to change.

The second method (Moving torus in 3D) is similar, but it uses a torus that moves randomly through 3D Perlin Noise to take the vector angles values. That way there are no problems on the borders. A new problem that appears is that the generation is unbalanced, some areas are "contracted" in 3D space. There is a clean way to avoid that by using 4D noise, but it doesn't seem easy to get in javascript.

When Space size is increased, the noise is used on a larger area, so that more discontinuity with space appear.

When Force noise is increased, some random values of higher intensity are added to the field before it affects each particle (different valeus for each particle).

Force field magnitude controls the norm (i.e. intensity) of the vectors in the force field.

Force change rate controls the speed at which we evolve using the third dimension of the Perlin Noise.

Field bias

Something to add constant values to the force field.

Drawing style

Color gradient

The color gradients use functions of the form value(t) = a + b*sin(c + w*t) to compute the red-green-blue components of the colors.

The parameters a,b,c and w can be different for each component, and even each particle (c changes with particle color offset). All the sliders in this section are about defining these parameters.

Color noise settings

Some perlin noise (noise(c + w*t)) can be added to each color component. Synchronized color noise adds the same noise to all components. The previous parameter w is controlled with noise "frequency".

The parameters a,b,c and w can be different for each component, and even each particle (c changes with particle color offset). All the sliders in this section are about defining these parameters.

Rectangle mode

This mode is the same as the default one, excepted that the particles are drawn with rectangles : the particles are constrained to move only up down left or right, and a new rectangle is drawn from the previous one using the speed as width or height (depending on the direction).

Custom color gradient

This panel allows you to paint the canvas with your own picture (press pause to have only the picture on the canvas). Then you can define a color gradient from there by picking points from an ellipse or just randomly to define the colors. There's a button to optimize (order) the colors.

Tricks

Resize your window before reloading the page (Reset button) to use smaller resolutions.

Recent changes

- 25/09/2016 : added Traveling Salesman optimization to the custom color gradient, added "Recent changes", fixed bug : changing displayed values of sliders while on pause.
- 25/09/2016 : corrected pen style color bug, button "Go !" bug.
- 26/09/2016 : added simulated annealing and blur to custom color gradient, added noise to field magnitude.
- 26/09/2016 : added field view, rescaled field generation on a torus.
- 27/09/2016 : added Taubin smoothing in color gradient post-processing. Circle view of color gradient.
- 28/09/2016 : debugged Taubin smoothing in color gradient post-processing. Clearer circle view of color gradient.