About this page

How to use this page: Users enter a first-order ODE in the form dy/dx = f(x,y), or a system in the form dx/dt = f(t,x,y) and dy/dt = g(t,x,y). (Note: A limited number of alternative variables can be chosen, to make it easier to adapt to different applications or textbook conventions.)

For ODEs, a slope field is displayed; for systems, a direction field is shown. (In the case of non-autonomous systems—that is, where either dx/dt or dy/dt depends on t—the direction field shown is for t = 0.)

By specifying initial values, users can see approximate solution curves, with several choices for the solution method (click links to read more at Wikipedia):

The "switching" option next to the choice of method is an adaptation that produces better solution plots in some cases. It affects all of the numerical methods for ODEs (it has no effect on solutions for systems). Specifically: If, at any point, |dy/dx| > 3 (i.e., if the tangent lines get too steep), the method switches the roles of x and y. For example, for the DE dy/dx = -y/x (a circle), here are solution curves for RK4 with h=0.05 without switching (left) and with switching (right):

the effect of choosing the 'switching' option

I created this page as a replacement for the very nice JODEapplet by Marek Rychlik. I had used his Java applet for many years in my Calculus 2 and DE classes, but have recently had issues with unstable Java installations and nuisance security alerts. (In particular, I never know if a particular classroom's computer will be able to run it.) This page is written in JavaScript (not Java), so it does not have those compatibility and security issues. In addition, your Web browser's "zoom" features will work with this page, so you can increase the display size if you need to do a demonstration for a large class.

Special thanks to Larry Friesen at Butler Community College, who suggested many improvements to this page, and (with his colleagues and students) tested it extensively.

dy/dx =


dx/dt =
dy/dt =



with h =

To specify initial values for solution curves, either:
 • enter (x,y) = ( , )
 • or click on the graph:

To save the current settings (or send them to someone else), bookmark or copy THIS LINK.
To save the image, right-click this thumbnail: [current graph].

Numerical solution tables, and timeplots (for systems)
Initial point:
How to enter expressions

For the most part, expressions are entered using standard mathematical notation, with a few caveats:

Technical notes

(September 3, 2014) First release: This page has been tested on Chrome (fairly extensively), Firefox (less), and Explorer (minimally). It is reasonably functional, but not complete yet.

(September 7, 2014) Added numerical tables and extended addresses (with updating link to current state of the page).

(September 9, 2014) Added the option for selectable "presets." The "BDH" presets are exercises from Differential Equations, Blanchard/Devaney/Hall, 3rd edition (mostly).

(September 11, 2014) Tweaked some features, and added a couple of additional methods.

(October 9, 2014) Added support for systems with two dependent variables.

(October 16, 2014) Improved support for systems (they are now included in the link, and the solution tables are formatted better).

(October 27, 2014) Some system presets included. You can also save the graph as a PNG file, or open it in a new window, using the given link, or by right-clicking on the link. (In theory, you can also copy it to the clipboard, although I have not been able to paste it into another program.) Note: In Firefox, "View image" will open the image IN THE CURRENT WINDOW.)

(February 25, 2016) Create time plots for systems, and allow limited changes to the names of the independent and dependent variables (e.g., x and y, or y and t, etc.)

(March 11, 2016) Recognizes when an initial value is an equilibrium point; zooming/panning and tracing (via hovering) on timeplots. Phase plane curves default to "t>0" only; this is controlled by the "lock t=0" option under the timeplot.

(February 1, 2017) When a link includes initial-value points, the last of these points shows up in the input boxes.

(March 1, 2017) Added an explanation of the "switching" option (see "About this page").

TODO: Display the initial point for each curve. For non-autonomous systems, allow user to select the value of t for which the direction field is displayed. Add more methods, including one or more adaptive methods which adjust the size of h.

The contents of this page are © 2016 Darryl Nester. It is available to anyone who wishes to use it (like most things on the Internet). Please send me an email if you have found it to be useful, or if you have suggestions. (In particular, if you have a "preset" you would like to suggest, email me the link above.)