Curves

Curves can be generated in two ways: by a univariate function or by a parametric function.

First, let’s look at a how a univariate function is generated. There are a few key components of the function code:

• "fn": this is the function you want the curve to follow. For example, x+2 or 3y. See this page for syntax.
• "ind": this is your independent variable, which can be x or y depending on how your function is defined. In general, x is taken as the default, so if your independent variable is x, it does not need to be specified.

Notice that the curve is a line, which we’ve been able to generate using points, slopes, and intercepts. Here is a comparison of the two methods, with dashed lines and solid curves:

Here is a more complicated univariate function, the quadratic function:

We can also create parametric functions, which are especially useful for displaying circles or trigonometric functions. Parametric functions include:

• xFunction: a function in terms of t to show how x changes as the parameter t changes.
• yFunction: a function in terms of t to show how y changes as the parameter t changes.
• min and max: the minimum and maximum values that you want t to take, which may determine the length of the curve generated.

Here is an example of a quarter circle in the first quadrant (note that the max for t is 1.57, approximately pi/2):

You can be very creative with parametric functions, as shown below:

In general, it is often easier and more successful to draw circles, ellipses, and sinusoidal functions using the parametric form. Below is a univariate function for creating a circle. Notice that it does not format well near the x-axis:

If you do choose to draw a circular or elliptical curve using a univariate function, there are two ways to smooth out the end of the curve:

• Create two functions, one in terms of x and one in terms of y that each handle the area where they are well-defined.
• Change the sample point parameter.

Drag behavior

One practical use of curves is to have a point traveling along a curve. In this case, the drag of the point will follow the form of the curve, using a calculation, like this:

You can also move an entire curve in the x or y direction. Let’s try to change the y-intercept of the quadratic curve shown above:

If you would like to shade in the area above or below a curve, you can use the areaAbove and areaBelow attributes, which will shade in the area above and below the curve, respectively.

areaAbove and areaBelow can be customized for opacity, fill, etc. Anything that can be altered in a graphObject can also apply to the areas defined here. If you do not specify a fill color or an opacity, the area attributes will default to the color of the curve and an opacity of 0.2.

By default, the area below the graph will be shaded between the curve and the x-axis. If you would like to customize the upper and lower bounds of the shading, you can do so either in the definition of the curve, or with a new object called Area that takes in two curves as parameters.

Using an existing curve, with the shading ending at y = 0.5x:

Using the Area object and two curve parameters: