JavaScript must be enabled in order for you to use JSXGraph and JSXGraph reference. However, it seems JavaScript is either disabled or not supported by your browser.

Class Index | File Index
Elements
Classes

Element Slopefield

JXG.GeometryElement
   ↳ JXG.Curve
      ↳ Vectorfield
            ↳ Slopefield

A slope field is a graphical representation of the solutions to a first-order differential equation of a scalar function.

Plot a slope field given by a function f(x, y) returning a number.

Defined in: vectorfield.js.
Extends Vectorfield.

Element Summary
Constructor Attributes Constructor Name and Description
 
Slopefield
Attributes Summary
Field Attributes Field Name and Description
 
arrowhead
Customize arrow heads of vectors.
 
scale
Set length of the vectors in user coordinates.
Method Summary
Method Attributes Method Name and Description
 
setF(func)
Set the defining functions of slope field.
Methods borrowed from class JXG.Curve:
addTransform, allocatePoints, generateTerm, getTransformationSource, hasPoint, interpolationFunctionFromArray, maxX, minX, moveTo, notifyParents, update, updateCurve, updateDataArray, updateRenderer, updateTransform, X, Y, Z
Methods borrowed from class JXG.GeometryElement:
_set, addChild, addDescendants, addParents, addParentsFromJCFunctions, addRotation, addTicks, animate, bounds, clearTrace, cloneToBackground, countChildren, createGradient, createLabel, draggable, eval, evalVisProp, formatNumberLocale, fullUpdate, generatePolynomial, getAttribute, getAttributes, getLabelAnchor, getName, getParents, getProperty, getSnapSizes, getTextAnchor, getType, handleSnapToGrid, hide, hideElement, noHighlight, normalize, prepareUpdate, remove, removeAllTicks, removeChild, removeDescendants, removeTicks, resolveShortcuts, setArrow, setAttribute, setDash, setDisplayRendNode, setLabel, setLabelText, setName, setParents, setPosition, setPositionDirectly, setProperty, show, showElement, snapToPoints, updateVisibility, useLocale
Events borrowed from class JXG.GeometryElement:
attribute, attribute:key, down, drag, keydrag, mousedown, mousedrag, mousemove, mouseout, mouseover, mouseup, move, out, over, pendown, pendrag, penup, touchdown, touchdrag, touchup, up
Element Detail
Slopefield
This element has no direct constructor. To create an instance of this element you have to call JXG.Board#create with type "slopefield".

Possible parent array combinations are:
{Function|String} F

Function f(x, y) returning a number.


{Array} xData

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


{Array} yData

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


Throws:
{Error}
If the element cannot be constructed with the given parent objects an exception is thrown. Parameter options:
Examples:
var field = board.create('slopefield', [
    (x, y) => x * x - x - 2,
    [-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});

var field = board.create('slopefield', [
    (x, y) => x * x - y * y,
    [-6, () => stepsize.Value(), 6],
    [-5, () => stepsize.Value(), 5]],
    {
        strokeWidth: 1.5,
        highlightStrokeWidth: 0.5,
        highlightStrokeColor: JXG.palette.blue,

        scale: () => s.Value(),

        arrowHead: {
            enabled: false,
            size: 8,
            angle: Math.PI / 16
        }
    });





				
                

				


			

			


			
				

    				 Attribute Detail
				

				
					 
					


					
					arrowhead

					

					

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

						
							

							Defined in:  options.js.
						
						
					


					

						
						
						
						
							

							
Default Value:

							

								{enabled: false, size: 5, angle: Math.PI * 0.125}
							

							

						

					

				
					 
					


					
					scale

					

					

						Set length of the vectors in user coordinates. This in contrast to vector fields, where this attribute just scales the vector.
						
							

							Defined in:  options.js.
						
						
					


					

						
						
						
							

							
See:

							
							
Vectorfield.scale

							
							

						
						
							

							
Default Value:

							

								1
							

							

						

					
				
			


			


			
				

					Method Detail
				

				
					 
					


					{Object}
					setF(func)

					

					

						Set the defining functions of slope field.
						
						
					


						
							

							
Parameters:

							
								

									{Function} func
									
								

								
Function f(x, y) returning a number.

							
							

						
						
						
						
						
							

							
Returns:

							
								
{Object} Reference to the slope field object.

							
							

						
						
						

					
					

					
Examples:

					
					
field.setF((x, y) => x * x + y * y);
board.update();

					
					

					

					
				
			


			

			


			
                
                

                    Attributes borrowed from other Elements
                


                

                
Attributes borrowed from class JXG.Curve: 
lineCap
Attributes borrowed from class JXG.GeometryElement: 
aria, cssClass, dash, dashScale, draft, dragToTopOfLayer, element3D, fillColor, fillOpacity, fixed, frozen, gradient, gradientAngle, gradientCX, gradientCY, gradientEndOffset, gradientFR, gradientFX, gradientFY, gradientR, gradientSecondColor, gradientSecondOpacity, gradientStartOffset, highlight, highlightCssClass, highlightFillColor, highlightFillOpacity, highlightStrokeColor, highlightStrokeOpacity, highlightStrokeWidth, isLabel, layer, needsRegularUpdate, nonnegativeOnly, precision, priv, rotatable, scalable, shadow, snapToGrid, strokeColor, strokeOpacity, strokeWidth, tabindex, trace, traceAttributes, transitionDuration, transitionProperties, visible, withLabel

                

                

                


				
				

					Fields borrowed from other Elements
				


				

				
Fields borrowed from class JXG.Curve: 
dataX, dataY, numberPoints, qdt, ticks
Fields borrowed from class JXG.GeometryElement: 
_org_type, _pos, ancestors, baseElement, board, childElements, descendants, dump, elementClass, elType, hasLabel, highlighted, id, inherits, isDraggable, isReal, lastDragTime, methodMap, mouseover, name, needsUpdate, notExistingParents, numTraces, parents, quadraticform, rendNode, stdform, subs, symbolic, traces, transformations, type, visProp, visPropCalc

				

				

				

				
				

					Methods borrowed from other Elements
				

				

				
Methods borrowed from class JXG.Curve: 
addTransform, allocatePoints, generateTerm, getTransformationSource, hasPoint, interpolationFunctionFromArray, maxX, minX, moveTo, notifyParents, update, updateCurve, updateDataArray, updateRenderer, updateTransform, X, Y, Z
Methods borrowed from class JXG.GeometryElement: 
_set, addChild, addDescendants, addParents, addParentsFromJCFunctions, addRotation, addTicks, animate, bounds, clearTrace, cloneToBackground, countChildren, createGradient, createLabel, draggable, eval, evalVisProp, formatNumberLocale, fullUpdate, generatePolynomial, getAttribute, getAttributes, getLabelAnchor, getName, getParents, getProperty, getSnapSizes, getTextAnchor, getType, handleSnapToGrid, hide, hideElement, noHighlight, normalize, prepareUpdate, remove, removeAllTicks, removeChild, removeDescendants, removeTicks, resolveShortcuts, setArrow, setAttribute, setDash, setDisplayRendNode, setLabel, setLabelText, setName, setParents, setPosition, setPositionDirectly, setProperty, show, showElement, snapToPoints, updateVisibility, useLocale

				

				

                

                
   				

    				Events borrowed from other Elements
                

                

                
Events borrowed from class JXG.GeometryElement: 
attribute, attribute:key, down, drag, keydrag, mousedown, mousedrag, mousemove, mouseout, mouseover, mouseup, move, out, over, pendown, pendrag, penup, touchdown, touchdrag, touchup, up

                

                

            

		




		

			
			Documentation generated by JsDoc Toolkit 2.4.0 on Mon Feb 24 2025 14:56:00 GMT+0100 (Mitteleuropäische Normalzeit)