Vectorfield

Element

A vector field on a plane can be visualized as a collection of arrows with given magnitudes and directions, each attached to a point on the plane.

Plot a vector field either given by two functions \(f_1(x, y)\) and \(f_2(x,y)\) or by a function \(f(x, y)\) returning an array of size 2.

Usage (signatures)
board.create('vectorfield', [F, xData, yData]);
Parameters
Name Type Description
F Array | function | String

Either an array containing two functions f1(x, y) and f2(x, y) or function f(x, y) returning an array of length 2.

xData Array

Array of length 3 containing start value for x, number of steps, end value of x. The vector field will contain (number of steps) + 1 vectors in direction of x.

yData Array

Array of length 3 containing start value for y, number of steps, end value of y. The vector field will contain (number of steps) + 1 vectors in direction of y.

Examples
// Defining functions
var fx = (x, y) => Math.sin(y);
var fy = (x, y) => Math.cos(x);

var field = board.create('vectorfield', [
        [fx, fy],    // Defining function
        [-6, 25, 6], // Horizontal mesh
        [-5, 20, 5], // Vertical mesh
    ]);

// Slider to control length of vectors
var s = board.create('slider', [[-3, 7], [3, 7], [0, 0.33, 1]], {name: 'length'});
// Slider to control number of steps
var stepsize = board.create('slider', [[-3, 6], [3, 6], [1, 20, 100]], {name: 'steps', snapWidth: 1});

// Defining functions
var fx = (x, y) => 0.2 * y;
var fy = (x, y) => 0.2 * (Math.cos(x) - 2) * Math.sin(x);

var field = board.create('vectorfield', [
        [fx, fy],        // Defining function
        [-6, () => stepsize.Value(), 6], // Horizontal mesh
        [-5, () => stepsize.Value(), 5], // Vertical mesh
    ], {
        highlightStrokeColor: JXG.palette.blue, // Make highlighting invisible

        scale: () => s.Value(), // Scaling of vectors

        arrowHead: {
            enabled: true,
            size: 8,  // Pixel length of arrow head
            angle: Math.PI / 16
        }
});

Attributes

Own

arrowhead

Description

Customize arrow heads of vectors. Be careful! If enabled this will slow down the performance. Fields are:

  • enabled: Boolean
  • size: length of the arrow head legs (in pixel)
  • angle: angle of the arrow head legs In radians.
Type
Object
Default Value
{enabled: true, size: 5, angle: Math.PI * 0.125}
Source
options.js, line 10933

scale

Description

Scaling factor of the vectors. This in contrast to slope fields, where this attribute sets the vector to the given length.

Type
Number | function
Default Value
1
See
Source
options.js, line 10920

Inherited

Members

Own

none

Inherited

Methods

Own

(static) setF(func) → {Object}

Set the defining functions of vector field.

Example

field.setF([(x, y) => Math.sin(y), (x, y) => Math.cos(x)]);
board.update();

Parameters

Name Type Description
func Array | function

Either an array containing two functions f1(x, y) and f2(x, y) or function f(x, y) returning an array of length 2.

Returns

Reference to the vector field object.

Type
Object

Details

Source
element/vectorfield.js, line 177

Inherited

Events

Own

none

Inherited

Throws

If the element cannot be constructed with the given parent objects an exception is thrown.

Type
Error

Details

Type
JXG.Curve
Source
element/vectorfield.js, line 39

Extends