Javascript Math Toolkit Function Graphing Engine Update Part IV


I’m currently working on finishing the basic architecture of the Javascript Math Toolkit function graphing engine.  The graph itself is currently divided into three main containers.  The bottom container is for the grid and axes.  The middle container houses function layers and the topmost container is reserved for interactive overlays.  Visibility of function layers, btw, can be easily toggled on and off.

Two types of overlays are currently supported, Markers and Slice Tools.  A graph Marker is a simple, circular overlay that may be dragged across the graph boundary.  Markers may be constrained or unconstrained.  If constrained, the Marker will automatically follow the trace of another function in the graph.

Mouse over, out, and move handlers may be assigned to a Marker.  This allows function coordinates, for example, to be queried and displayed in the UI as part of an educational exercise.

A graph SliceTool is a horizontal or vertical graph construct that may be dragged only in the opposite direction.  The slice tool divides or slices the graph area into two planes.  Another way to use the tool is to dynamically query only x- or y-coordinates (lines of constant-y and constant-x).

The following screen shot shows a constrained Marker and a single, vertical slice tool.


The marker is constrained to follow the trace of the polynomial function.  On drag, the x-y coordinates at the current marker location are displayed in an output area below the graph.  The vertical slice tool may be dragged only horizontally by the triangular areas at the top and bottom.  The callback function is provided with the x-coordinate at the current graph location, which is used to evaluate the abs. value function and display its value in this demo.  A variety of educational applications are enabled by these two simple overlay tools.

I am in the process of completing a final demo that illustrates the use of unconstrained Markers by using a small Marker set to define a polynomial interpolation function.  Moving the Markers across the graph area changes the behavior of the interpolator and provides the ability to interactively explore how that algorithm works.

As you would expect, constrained markers are automatically repositioned after any zoom/pan operation on the graph.

After finishing that demo, I will move onto freehand drawing.


Update:  Here is the result of the polynomial interpolation demo.  The four markers are added to the graph and their coordinates define interpolation points for a Lagrange-style polynomial.  The interpolation is computed using Neville’s algorithm and is packaged into a custom library function.  Each graph marker is assigned the same mouse-move handler and the coordinates/graph are updated as follows:

switch( )
  case "marker1":
    __x[0] = newX;
    __y[0] = newY;
  case "marker2":
    __x[1] = newX;
    __y[1] = newY;
  case "marker3":
    __x[2] = newX;
    __y[2] = newY;
  case "marker4":
    __x[3] = newX;
    __y[3] = newY;
// reset the interpolation points
__polynomial.set_params( {xpoints:__x, ypoints:__y} );
// redraw the graph

and, here is a screen shot


One Comment on “Javascript Math Toolkit Function Graphing Engine Update Part IV