Fractals/Mathematics/Vector field

Vector field[1]

Here mainly numerical methods for time independent 2D vector fields are described.


  • vector function is a function that gives vector as an output
  • field : space (plane, sphere, ... )
  • field line is a line that is everywhere tangent to a given vector field
  • scalar/ vector / tensor:
    • Scalars are real numbers used in linear algebra. Scalar is a tensor of zero order
    • Vector is a tensor of first order. Vector is an extension of scalar
    • tensor is an extension of vector



Forms of 2D vector:[2]

  • [z1] ( only one complex number when first point is known , for example z0 is origin
  • [z0, z1] = two complex numbers
  • 4 scalars ( real numbers)
    • [x, y, dx , dy]
    • [x0, y0, x1, y1]
    • [x, y, angle, magnitude]
  • 2 scalars : [x1, y1] for second complex number when first point is known , for example z0 is origin



The numerical gradient of a function:

  • "is a way to estimate the values of the partial derivatives in each dimension using the known values of the function at certain points."[3]

Gradient function G of function f at point (x0,y0)

  G(f,x0,y0) = (x1,y1)


  • function f
  • point (x0,y0) where gradient is computed


  • vector from (x0,yo) to (x1,y1) = gradient



  • "The gradient is calculated as: (f(x + h) - f(x - h)) / (2*h) where h is a small number, typically 1e-5 f(x) will be called for each input elements with +h and -h pertubation. For gradient checking, recommend using float64 types to assure numerical precision."[5]
  • in matlab[6][7]
  • in R[8]
  • python[9]


ODE means Ordinary Differential Equation, where "ordinary" means with derivative respect to only one variable (like  ), as opposed to an equation with partial derivatives (like  ,  , ...) called PDE. (matteo.basei)

Field types


Criteria for classification

Force types A gravitational force fields

  • the field lines are the solution of  
  • the trajectory of a test mass is the solution of  


  • g is the standard gravity
  • m is a mass
  • F is a force field

An electric field

  • The field lines are the paths that a point positive charge would follow as it is forced to move within the field. Field lines due to stationary charges have several important properties, including always originating from positive charges and terminating at negative charges, they enter all good conductors at right angles, and they never cross or close in on themselves.  The field lines are a representative concept; the field actually permeates all the intervening space between the lines. More or fewer lines may be drawn depending on the precision to which it is desired to represent the field. The study of electric fields created by stationary charges is called electrostatics.




  • start with
    • plane (parameter plane or dynamic plane)
    • scalar function
    • vector function
  • create scalar field using scalar function ( potential)
  • create vector field from scalar field using vector function ( gradient of the potential)
  • compute:


// p5 js Tutorial】Swirling Pattern using Gradient for Generative Art by Nekodigi

//get gradient vector
function curl(x, y){
  var EPSILON = 0.001;//sampling interval
  //Find rate of change in X direction
  var n1 = noise(x + EPSILON, y);
  var n2 = noise(x - EPSILON, y);
  //Average to find approximate derivative
  var cx = (n1 - n2)/(2 * EPSILON);

  //Find rate of change in Y direction
  n1 = noise(x, y + EPSILON);
  n2 = noise(x, y - EPSILON);

  //Average to find approximate derivative
  var cy = (n1 - n2)/(2 * EPSILON);
  //return new createVector(cx, cy);//gradient toward higher position
  return new createVector(cy, -cx);//rotate 90deg

function draw() {
  tint(255, 4);
  image(noiseImg, 0, 0);//fill with transparent noise image
  //fill(0, 4);
  //rect(0, 0, width, height);
  strokeWeight(4);//particle size
  for(var i=0; i<particles.length; i++){
    var p = particles[i];//pick a particle
    p.pos.add(curl(p.pos.x/noiseScale, p.pos.y/noiseScale));
    point(p.pos.x, p.pos.y);



The separatrix is clearly visible by numerically solving for trajectories backwards in time. Since when solving for the trajectories forwards in time, trajectories diverge from the separatrix, when solving backwards in time, trajectories converge to the separatrix.

gradient descent


Field line computing


Problem Statement:

  • Field line tracing ( not curve sketching[11]}
  • drawing contour maps ( in computer graphic) = Numerical continuation ( in math)
  • compute an integral curve from a seed point through a vector field without any analysis of its structure on the uniform grid ( raster scan or pixels)

Methods ( solvers) available for the field-lines[12][13]

  None of these 4 methods generate an exact answer, but they are (from left to right) increasingly more accurate. They also take (from left to right) more and more time to finish as they require more samples for each iteration.
  You won't be able to create reliably closed curves using iterative sampling methods as small errors at any step may be amplified in successive steps. There is also no guarantee that the field-line ends up in the exact coordinate where it started.
  The Grasshopper metaball solver on the other hand uses a marching squares algorithm which is capable of finding closed loops because it is a grid-cell approach and sampling inaccuracy in one area doesn't carry over to another. 
  However the solving of iso-curves is a very different process    from the solving of particle trajectories through fields. ... 
  Typically field lines shoot to infinity rather than form closed loops. That is one reason why I chose the RK methods here, because marching-cubes is very bad at dealing with things that tend to infinity.[16]


Construction of a field line

Given a vector field   and a starting point   a field line can be constructed iteratively by finding the field vector at that point  . The unit tangent vector at that point is:  . By moving a short distance   along the field direction a new point on the line can be found


Then the field at that point   is found and moving a further distance   in that direction the next point of the field line is found


By repeating this and connecting the points,the field line can be extended as far as desired. This is only an approximation to the actual field line, since each straight segment isn't actually tangent to the field along its length, just at its starting point. But by using a small enough value for  , taking a greater number of shorter steps, the field line can be approximated as closely as desired. The field line can be extended in the opposite direction from   by taking each step in the opposite direction by using a negative step  .

rk4 numerical integration method


Fourth-order Runge-Kutta (RK4) in case of 2D time independent vector field

  is a vector function that for each point p

p = (x, y)

in a domain assigns a vector v


where each of the functions   is a scalar function:


A field line is a line that is everywhere tangent to a given vector field.

Let r(s) be a field line given by a system of ordinary differential equations, which written on vector form is:



  • s representing the arc length along the field line, like for example continous iteration count
  •   is a seed point

2 variables


Given a seed point   on the field line, the update rule ( RK4) to find the next point  along the field line is[17]



  • h is the step size along field line = ds
  • k are the intermediate vectors:


only x




Given a seed point   on the field line, the update rule ( RK4) to find the next point  along the field line is[18]



  • h is the step size along field line = dx
  • k are the intermediate vectors:



  •  [19]

Visualisation of vector field


Plot types (Visualization Techniques for Flow Data) : [20]

  • Glyphs = Icons or signs for visualizing vector fields
    • simplest glyph = Line segment (hedgehog plots)
    • arrow plot = quiver plot = Hedgehogs (global arrow plots)
  • Characteristic Lines [21]
    • streamlines = curve everywhere tangential to the instantaneous vector (velocity) field (time independent vector field). For time independent vector field streaklines = Path lines = streak lines [22]
  • texture (line integral convolution = LIC)[23]
  • Topological skeleton [24]
    • fixed point extraction ( Jacobian)
  "path lines, streak lines, and stream lines are identical for stationary flows" Leif Kobbelt[25]

quiver plot



  • "A quiver plot displays velocity vectors as arrows with components (u,v) at the points (x,y)"[26]

stream plot


Example fields




fBM stands for Fractional Brownian Motion

SDF = Signed Distance Function[27]

  • by dimension ( 1D, 2D, 3D, ...)
  • by color
  • by distance function ( Euclid distance,
  • algorithm [28]
    • the efficient fast marching method,
      • ray marching [29]
      • like Marching Parabolas, a linear-time CPU-amenable algorithm.
    • Min Erosion, a simple-to-implement GPU-amenable algorithm
    • fast sweeping method
    • the more general level-set method.
  • visualisation ( gray gradient, LSM,
  • simple predefined figures or arbitrary shape

It is not

Distance Function

single channel color






Adaptively Sampled Distance Fields




fonts, glyphs



// The MIT License
// Copyright © 2020 Inigo Quilez
// Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

// Signed distance to a disk

// List of some other 2D distances:
// and

float sdCircle( in vec2 p, in float r ) 
    return length(p)-r;

void mainImage( out vec4 fragColor, in vec2 fragCoord )
	vec2 p = (2.0*fragCoord-iResolution.xy)/iResolution.y;
    vec2 m = (2.0*iMouse.xy-iResolution.xy)/iResolution.y;

	float d = sdCircle(p,0.5);
	// coloring
    vec3 col = (d>0.0) ? vec3(0.9,0.6,0.3) : vec3(0.65,0.85,1.0); // exterior / interior
    col *= 1.0 - exp(-6.0*abs(d)); // adding a black outline ( gray gradient) to the circle
	col *= 0.8 + 0.2*cos(150.0*d); //  adding waves
	col = mix( col, vec3(1.0), 1.0-smoothstep(0.0,0.01,abs(d)) ); // note: adding white border to the circle

	fragColor = vec4(col,1.0);



hg_sdf: A glsl library for building signed distance functions


  • b3dsdf = A toolkit of 2D/3D distance functions, sdf/vector ops and various utility shader nodegroups (159+) for Blender 2.83+.

Potential of Mandelbrot set













  • Bifurcation of Quartic Polynomial Vector Fields by @rboyce1000
The coloured curves are the separatrices (i.e. real flow lines reaching infinity) of the complex ODE dz/dt = p(z) = z^4 + O(z^2), where the four roots of p(z) are pictured as the black dots: one fixed at the origin, and the remaining three forming the vertices of an equilateral triangle centered at the origin and rotating.
Bifurcation occurs at certain critical angles of the rotation, where separatrices instantaneously merge to form homoclinic orbits. Following bifurcation, the so-called 'sectorial pairing' is permuted. 
There are a total of 5 possible sectorial pairings for the quartic polynomial vector fields (enumerated by the 3rd Catalan number). 
Three out of the five possibilities can be seen in 2/3 video, while the remaining two can be seen in part 1/3
In 3/3 example, at a bifurcation we have that either: only two of the four roots are centers (the other two remaining attached to separatrices), or NONE of the roots are centers (a phenomenon which does not occur for the quadratic or cubic polynomial vector fields). 
This video is inspired by the work of A. Douady and P. Sentenac. ( rboyce1000)


  • create polynomial with desired properities
    • f(z) = z*g(z) with root at origin
    • g(z) is a 3-rd root of unity =  

f(z) = z(z^3 - 1)

One can check it with Maxima CAS

(%o1)                              %i y + x
(%i2) p:z*(z^3-1);
(%o2)                    (%i y + x) ((%i y + x)  - 1)
(%i3) display2d:false;

(%o3) false
(%i4) r:realpart(p);

(%o4) x*((-3*x*y^2)+x^3-1)-y*(3*x^2*y-y^3)
(%i5) m:imagpart(p);

(%o5) x*(3*x^2*y-y^3)+y*((-3*x*y^2)+x^3-1)
(%i6) plotdf([r,m],[x,y]);

(%o6) "/tmp/maxout28945.xmaxima"

(%i8) s:solve([p],[x,y]);

(%o8) [[x = %r1,y = (2*%i*%r1+%i+sqrt(3))/2],
       [x = %r2,y = (2*%i*%r2+%i-sqrt(3))/2],[x = %r3,y = %i*%r3],
       [x = %r4,y = %i*%r4-%i]]

to rotate it around origin let's change 1 with :  ( multiplier of the fixed point) where t is a proper fraction in turns


Original function from comments:


See also



  1. Vector field in wikipedia
  2. Euclidian vector in wikipedia
  3. matlab : gradient function
  4. stackoverflow question: is-there-any-standard-way-to-calculate-the-numerical-gradient
  5. nnp_numerical_gradient by Mamy Ratsimbazafy
  6. matrixlab-examples : gradient
  7. matlab-function-gradient-numerical-gradient by itectec
  8. numDeriv : grad
  9. numpy : gradient
  10. Numerical Methods for Particle Tracing in Vector Fields by Kenneth I. Joy
  11. curve sketching by David Guichard and friends
  12. liruics : Introduction to Scientific Visualization - Flow Field
  13. raster-algorithms-basic-computer-graphics-part-2 by what-when-how
  14. : Euler's method interactive
  15. interactive Runge Kutta 4 by Greg Petrics
  16. grasshopper3d forum: field-lines-how-to-rebuild-and-make-periodic?overrideMobileRedirect=1
  17. Classification and visualisation of critical points in 3d vector fields. Master thesis by Furuheim and Aasen
  18. Classification and visualisation of critical points in 3d vector fields. Master thesis by Furuheim and Aasen
  19. Weisstein, Eric W. "Integral Curve." From MathWorld--A Wolfram Web Resource
  20. Flow Visualisation from TUV
  21. Data visualisation by Tomáš Fabián
  22. A Streakline Representation of Flow in Crowded Scenes from UCF
  23. lic by Zhanping Liu
  24. Vector Field Topology in Flow Analysis and Visualization by Guoning Chen
  25. Vector Field Visualization by Leif Kobbelt
  26. matlab ref : quiver plot
  27. CedricGuillemet: SDF = Collection of resources (papers, links, discussions, shadertoys,...) related to Signed Distance Field
  28. Distance Fields by Philip Rideout in 2018
  29. ray-march = Rendering procedural 3D geometry by raymarching through a distance field