<slopeField/>

<slopeField/> is a Graphical component that draws the slope field of a differential equation y’ = f(x,y) as short tick marks on a lattice covering the visible region of an enclosing <graph>.

The slope function is given inside the component, either as a bare expression — <slopeField>y - x</slopeField> — or as a <function> child. A bare expression is read as a function of x and y; use the variables attribute to name them differently. A <function> child is used exactly as written, since it names its own variables.

A function whose number of outputs does not suit the component — a two-output expression such as (y, -x) given to <slopeField/> — draws nothing and reports a warning saying which component does want it.

The field re-tiles automatically as the user pans or zooms, and its marks keep a constant on-screen length — so slopes appear at their true visual angle even when the axes are not equally scaled.

Each mark is centered on its lattice point, sampling the tangent line of the solution curve through that point. (By contrast, <vectorField/> puts an arrow’s tail on its lattice point, since a vector has a direction to point in.)

Attributes and Properties

Examples

Example: A slope field from an expression

Given directly as a child, the expression becomes the slope function. Here y’ depends only on x, so every mark in a column is parallel.

Example: A slope field of two variables

The slope may depend on y as well; a bare expression is always read as a function of both variables. Marks along the line y = x are horizontal, since y’ = 0 there.

Example: A solution curve through the field

Drawing a known solution on top of the field shows the curve following the marks everywhere. Here the slope function is defined separately and referenced inside the field, which is the alternative to writing the expression out.

Attribute Examples

Attribute Example: variables

variables names the inputs of a bare expression, in order: the horizontal axis first, then the vertical. It defaults to x y, so an equation written in those letters needs nothing. It has no effect on a <function> child, which names its own variables — writing both warns, since one of them cannot be doing anything.

The names may themselves be references, exactly as on a <function>, so a student can choose them:

The slope is q - r whichever axis each letter names, so swapping the two boxes — r in the first, q in the second — turns y’ = x - y into y’ = y - x and every mark flips.

Attribute Example: dx, dy

dx and dy set the horizontal and vertical spacing of the lattice, one unit each by default. A finer lattice usually wants a shorter markLength so the marks do not overlap, and a thinner lineWidth so they stay distinct where they nearly meet: a field is drawn in the component’s selected style, and the default style’s line is 4 pixels wide — heavy once there are hundreds of marks on screen. styleNumber="2" thins the marks as well, and recolors them.

Attribute Example: markLength

markLength is measured in pixels rather than graph units, and defaults to 20. Working in pixels is what keeps every mark the same length, and at the correct visual angle, no matter how the axes are scaled.

Attribute Example: xoffset, yoffset

xoffset and yoffset shift the lattice so a mark falls at (xoffset, yoffset). Both default to 0, which puts a mark at the origin.

Attribute Example: maxMarks

maxMarks bounds how many marks are drawn, and defaults to 2500. Rather than refusing to draw when the lattice would exceed it — for instance after zooming far out — the field keeps every n-th lattice line, so it stays readable.

Property Examples

Property Example: dx, dy, markLength

Each attribute of <slopeField/> is also available as a property of a named slope field.