## Graphing Non-Functions

My current gig is winding down, so this will probably be the last update on the function graphing engine for a while. Although the function graphing engine is architected to graph cartesian or parameteric functions, only cartesian functions were supported in the initial release. All functions defined in XML must implement an IPlottable interface, which means that evaluation and derivative methods are interpreted with y as a strict function of x. All functions must be marked as cartesian, since a parametric function will not plot in the initial implementation.

What about non-functions, that is cases where y is not strictly a function of x? As the saying goes, there is always a back door. Functions may identify themselves as self-plotting. In this case, the engine does not sample the function. Instead, it provides the function with all the relevant information regarding the current graph window and calls the function’s *plot()* method. A self-plotting function is welcome to draw anything it pleases, including Bezier curves, conic sections, spirals, or even smiley faces 🙂

Problems may arise with derived functions, however, i.e. other functions that derive their visual display from the definition of another function. A graphical Marker function is a perfect example. The Marker is an artist-generated, interactive graphic asset that is constrained to the path of another function. If domain values exist for which there is not a unique range value, then Marker movement is unpredictable.

This example shows how to work around the non-function issue to a degree. It plots parabolas that open upward, downward, and to the left or right. More specifically, the parabola directrix is either parallel to the x or y axis. Parallel to the x-axis is good. Parallel to the y-axis causes problems.

Suppose we want a Marker constrained to the parabola along with a display of the tangent and normal, as well as the directrix. The fixed distance from the point on the parabola to the directrix and axis of symmetry is also drawn.

Of the four use cases, the Marker follows y as a function of x in two and x as a function of y in the other two. We can’t use the function graphing engine to manage the Marker display as it always calls the base function (parabola) *eval()* method with an input x-coordinate. The derivative and normal displays won’t work in two cases because *dy/dx* is not uniquely defined.

In general, the equation of a parabola with vertex *(h,k)*, focus *(h,k+p)*, and directrix *y=k-p* is given by

*(x-h) ^{2} = 4p(y-k)*

which allows y to be defined as a function of x, or x as a function of y. There are really only two use cases requiring consideration, directrix parallel to the y-axis and directrix parallel to the x-axis. In one case, horizontal mouse movement is used to position the Marker. Vertical mouse movements control the Marker in the other case.

The custom Marker is composed directly into the custom Parabola function, which is marked as self-plotting. This function is responsible for creating the Marker and controlling its placement as well as drawing all supporting graphics.

The Parabola function is defined in XML as

<function id=”Parabola” class=”graph.tests.Parabola” params=”h:0,k:0,p:-1,parallelTo:y”>

<lineMetrics thickness=”2″ color=”0xff0000″ />

<data markerParams=”marker:graph.symbols.CustomMarkerSymbol,rolloverColor:0x9ACD32,digits:2″

markerCoord=”1″ >

<directrix thickness=”3″ color=”0x9933CC” alpha=”1″ lineStyle=”line_dashed” dashWidth=”6″ dashSpacing=”4″ />

<lineSet1 thickness=”2″ color=”0x0000ff” />

<lineSet2 thickness=”1″ color=”0x00ff00″ alpha=”0.5″/>

</data>

</function>

and the display is shown below.

The aspect ratio of this graph is not ideal for the example, but it’s adequate for illustrating the example. Note that the custom Parabola function is welcome to plot not only the parabola, but as many supporting graphics as it likes. The custom Marker may be dragged along the boundaries of the parabola and rollover displays the current y-coordinate by default.

A simple parameter change, h:0,k:0,p:1,parallelTo:y, causes the parabola to open to the right.

Parametric function graphing should be supported in the future, providing for a more clean and general-purpose means to plot any general parabola and supporting visuals. I thought this was an interesting example of how a decent architecture and simple concepts like Composition open up possibilities that do not seem possible based on the defined constraints of an engine.

Next post will be an update on new capability in the Freehand Drawing Library.

## Function Graphing Update Part II

I’ve been very quiet over the last few months, and for good reason. Just finished a gig involving two pretty complex learning applications for physical science. I worked on one as a primary developer, and the function graphing engine I authored was used in another. This is the first of a couple posts summarizing the work before returning to development of the Freehand Drawing Library.

The prior update on the function graphing engine was summarized in this post. This particular learning application involves chemical reactions and equilibrium. A simulation is started in one tab, as shown below.

Depending on the simulation length, a substantial number of molecules may interact in a single time step. Clicking on the Graph tab shows a real-time line plot of the state of various reactions.

The x-axis is time steps and the programmer plots the most recent N steps.

A new addition to the graphing engine is the ability to adjust x- and y-axis bounds and tic marks independently. This provides highly customizable zoom capability.

The graph may be panned by dragging, and panning is setup in XML to be restricted to the first quadrant.

This was a very interesting project both because I enjoyed working with the other application developer and to see a cool use of the function graphing engine.

## Recent Work: Upgrades to Function Graphing Engine

I wrote a class library for function graphing and exploration (with several complex, interactive features) years ago that uses XML for most of the graphing setup. The library dealt with functions defined by a modest number of parameters whose values may change, but the basic functional representation is immutable.

A student might explore x^{2} + 3x + 2 over a variety of intervals, or may even study ax^{2} + bx + c, where the constants a, b, and c are interactively varied. The function is still defined, in advance, by a small, finite number of parameters.

My client recently wished to use this engine to explore functions that arise from physical simulations over time. The ‘function’ is not mathematically defined by a formula. Instead, its values are sampled over time. Data points are plotted either separately, or connected by lines. Two new low-level functions, ScatterPlot and LinePlot were introduced into the defined functions library and new methods were added to the function graphing class to allow data that ‘defines’ a function to be updated at runtime. New methods to adjust the graph range and tic increments were also added.

The function graphing engine now supports panning restrictions by quadrant. Many physical simulations are sampled over time intervals, so the graph x-coordinate is a time sample (always greater than or equal to zero). For simulations whose y-axis values are positive, restricting graph panning to the first quadrant is desirable. One or two-quadrant combination panning restrictions are now allowed in the function graph XML.

<learningObject id=”simulationGraph” class=”display.graphing.functions.FunctionPlot” x=”35″ y=”40″ width=”350″ height=”280″ display=”f1,f2,f3″ pannable=”true” **restrictPan=”quadrant:1″** >

Here’s a screenshot of the engine in action,

The modifications have been quite interesting, but would have been far more difficult without the extreme level of internal and external documentation generated for this complex class library. Over two years went by between modifications. So, think about the next person that comes along after your code is written.

It might be you 🙂