# 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.
layout: OneGraph: graph: objects: - Curve: univariateFunction: fn: 1 + 2*(x) ind: x label: text: "'f(x) = 1 + 2x'" x: 2

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:

layout: OneGraph: graph: objects: - Line: yIntercept: 3 slope: 2 color: red lineStyle: dashed label: text: y = 3 + 2x x: 2 align: right - Curve: univariateFunction: fn: 1 + 2*(x) ind: x color: red label: text: "'f(x) = 1 + 2x'" x: 2 align: left - Line: xIntercept: 1 invSlope: 2 color: green lineStyle: dashed label: text: x = 1 + 2y x: 4 align: right - Curve: univariateFunction: fn: 3 + 2*(y) ind: y color: green label: text: "'f(y) = 3 + 2y'" y: 2.5 align: left

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

layout: OneGraph: graph: objects: - Curve: univariateFunction: fn: 1 + (x)^2 ind: x color: red label: text: "'f(x) = 1 + x^2'" x: 2

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):

layout: OneGraph: graph: xAxis: min: -10 max: 10 yAxis: min: -10 max: 10 objects: # define a curve parametrically # using two functions, x(t) and y(t) # the min and max define the range of t - Curve: parametricFunction: xFunction: 8*cos(t) yFunction: 8*sin(t) min: 0 max: 1.57 color: blue

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

layout: OneGraph: graph: xAxis: min: -10 max: 10 yAxis: min: -10 max: 10 objects: - Curve: parametricFunction: xFunction: 0.5*t*cos(t) yFunction: 0.5*t*sin(t) min: 0 max: 20 color: purple

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:

layout: OneGraph: graph: objects: - Curve: univariateFunction: fn: sqrt(25 - (x)^2) min: 0 max: 5

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:

params: - {name: x, value: 0, min: -10, max: 10, round: 0.01} calcs: m: "(cos(params.x))" layout: OneGraph: graph: xAxis: { min: -10, max: 10} yAxis: { min: -10, max: 10} objects: - Curve: univariateFunction: fn: cos((x)) - Point: # plot point at (params.x, calcs.m) coordinates: - params.x - calcs.m # use drag to just change params.x drag: - directions: x param: x expression: params.x + drag.dx

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:

params: - name: yIntercept value: 1 min: 0 max: 5 round: 0.01 layout: OneGraph: graph: objects: - Curve: univariateFunction: fn: params.yIntercept + (x)^2 ind: x color: red label: text: "`f(x) = \${params.yIntercept.toFixed(2)} + x^2`" x: 2 drag: - vertical: yIntercept

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.

layout: OneGraph: graph: objects: - Curve: univariateFunction: fn: 1 + 2*(x) ind: x color: red label: text: "'f(x) = 1 + 2x'" x: 2 areaAbove: {fill: blue, opacity: 0.6} areaBelow: {}

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:

layout: OneGraph: graph: objects: - Curve: univariateFunction: fn: 1 + 2*(x) ind: x color: red label: text: "'f(x) = 1 + 2x'" x: 2 areaBelow: univariateFunction2: fn: 0.5*x ind: x fill: blue

Using the `Area` object and two curve parameters:

layout: OneGraph: graph: objects: - Area: univariateFunction1: fn: 1 + 2*x ind: x univariateFunction2: fn: 0.5*x ind: x fill: blue
KGJS
KineticGraphs.org
Getting Started

Authoring Sandbox

Graphs & Layouts

Graphs

Layouts

Sidebars

Graph Objects

Styling Graph Objects

Points

Lines

Curves

Contours

Shapes and Areas

Segments and Arrows

Angles and Angle Markers

User Interactions

Parameters

Calculations

Dragging

Economics

Econ Schema

Supply and Demand

Consumer Optimization

Exchange