Grapher Help

Grapher provides many graphing options. It can be used in either the rectangular (x, y) or the polar (r, θ) coordinate system. Parametric equations are also supported. It can plot up to 6 functions input by the user when in the rectangular or polar modes. In the parametric mode, 3 curves are supported. Some special features are available.

New Initially, the standard canvas is 430 x 430 pixels. If a larger graph is desired, one can click "Show enlarged canvas" and a larger graph will be drawn.

It is best to make sure that "Allow motion" is not checked before typing anything to change any of the input boxes.

The Functions

See Options for special features. below.

You can type the functions to be graphed into any of the 6 function input boxes in rectangular and polar modes.

Rectangular coordinates: The independent variable is x.
Polar coordinates: You can either use o (preferred to avoid confusion) , x or t for θ .
Parametric mode: You can input x and y functions for up to 3 different curves. Use t for the independent variable.

Note: Actually you can use the independent variables x, t, and o in all three modes but the above suggestions will help prevent confusion.

The operational signs are +, -, *, /, % and **. You can use ( and ) to control the order of operations and with functions.

The % operator means modulus. That is, if we have a % b we would divide a by b as integers and the result is the remainder. For example, 13 % 3 = 1 as 13 divided by 3 is 4 with a remainder of 1.   Some more examples: 11 % 5 = 1.   215 % 10 = 5

The ** operator means "to the power". Thus, 3**2 = 9, 2**3 = 8, and 10**3 = 1000.

You can use some constants: PI (π = 3.141592653589793), QUARTER_PI, HALF_PI, TWO_PI, Math.E (e = 2.718281828459045).

You can use some values: a, b, c, d, e, and s. They will be explained in the values section.

You may be able to use minT, maxT, minX, maxX, minY, or maxY for the minimum and maximum allowed values for t, x, and y although these values may change if not specified or if equal spacing is checked.

Some of the functions that can be used are:

• abs(x) (absolute value of x)
• sqrt(x) (square root of x), sq(x) (square of x)
• exp(x) (e^x) , Math.log(x) (natural log of x, that is, ln(x) ), Math.log10(x) (log base 10 of x). In the log functions, x > 0 is absolutely required.
• max(x, a, ...) (maximum of arguments), min(x, a, ...) (minimum of arguments)
• round(x) (round x to nearest integer), floor(x) (round x down), ceil(x) (round x up),
  fract(x) (factional part of x. E.g. fract(12.345) = 0.345)
• constrain(x, low, high) (constrain the value between low and high)
• map(x, low, high, newLow, newHigh) (maps x from the range low to high into the range from newLow to newHigh. E.g. map(.25, 0, 1, 100, 200) = 125)
• random() (random number between 0 and 1), random(n) (random number between 0 and n),
  random(n, m) (random number between n and m)
• dist(x₁, y₁, x₂, y₂) (distance between points (x₁, y₁) and (x₂, y₂) )
• mag(x, y) (the magnitude of the vector (x, y) or the distance between the points (0, 0) and (x, y). Equivalent to
  dist(0, 0, x, y). )
• sin(x), cos(x), tan(x) (trig functions), asin(x), acos(), atan(x), (inverse trig functions). (asin and atan yield a result between -π/2 and π/2) while acos yields a result between 0 and π.) atan2(y, x) (tangent of the angle with vertical distance of y and horizontal distance x with the result between -π and π)
  (All trig functions work in radians unless "degrees" has been selected. You can use radians(x) to convert x degrees into radians and degrees(x) to convert radians into degrees.)
• Math.sinh(x), Math.cosh(x), Math.tanh(x), Math.asinh(x), Math.acosh(x) (hyperbolic functions)
• frameCount (counts the number of times the graph has been redrawn. May be useful when allowing motion.
  E.g. 5 * sin(x + frameCount/10). The division by 10 slows the motion down to a more reasonable rate.)

Order of evaluation:

1. Inside () -- first
2. functions
3. **
4. *, / and % (left to right in case of ties)
5. + and - (left to right in case of ties) -- last

Illegal values like sqrt(-2) and 1/0 are ignored.

After you finish typing a function, press "Enter".

Formulas can contain comments using // and /*...*/.

Special options

There 7 options that can enhance a graph - vertical lines, rays through the origin, circles, line segments, quadratics, points, and words (labels or text).

• Vertical lines: Instead of a function, one can type x= as the first characters in a function box. The "x=" is followed by a formula for the x value. In addition, one can optionally specify the end points of that line. Examples:
  x= 3: draw a vertical line at x = 3.
  x= 3; 4: draw a vertical line at x = 3 with the lower endpoint at 4.
  x= 3; 2 ; -3 or x=3; -3; 2: draw a vertical line at 3 between y = -3 and y = 2.
  There cannot be a space between x and =. Spaces are permitted in the rest of the statement. One can use formulas for the x value and line limits. Values are separated by ";".
• Rays through the origin: One specifies the angle and optionally the endpoints of the rays. Examples:
  o= PI/6: a ray at 30^o, r = -10 to +10.
  o=PI/6; 0: a ray starting at the origin of length 10.
  o=PI/6; 1; 4: a ray starting r = 1 and ending at r = 4.
  There cannot be a space between o and =. Spaces are permitted in the rest of the statement. One can use formulas for the angle θ and radius limits. Values are separated by ";".
• Circles: One can specify circle with a given radius by typing r= in a function input box. It is followed by a formula for the radius. The default center is the origin but one can optionally specify a different center. Examples:
  r= 3: a circle with radius 3 centered at the origin.
  r= a; 2; b;: a circle with radius specified by the value a, with center at (2, b) where b is specified by the value b.
  There cannot be a space between r and =. Spaces are permitted in the rest of the statement. In the polar mode, the coordinates of the optional center are interpreted as (r, θ). If the center is specified, both coordinates must be provided otherwise it is ignored. Values are separated by ";"
• Line segments: The first character is "l" or "L" followed by two points each having a x and y value. That is,
  L x₁; y₁; x₂; y₂. One can use multiple sets of points. E.g.
  l 2; 3; 5; 2: Draws a line segment from (2, 3) to (5, 2).
  L 2; 3; 5; 2;   0; 0; 3; 3;   -2; 4; 3; -1: Draws 3 line segments: (2, 3) to (5, 2), (0, 0) to (3, 3), and
  (-2, 4) to (3, -1).
  All 4 coordinates must be given for each line segment. Otherwise the values or ignored. Values are separated by ";" You can use "L" if "l" seems confusing.
• Quadratics: The first character is "q". This option allows graphing pieces of quadratics (parabolas). A quadratic has the form ax² + bx + c. The portion of the curve between x = x1 and x = x2 is shown. The format is
  q a; b; c; x1; x2; ........
  As many pieces of quadratics can be displayed as desired but all 5 values must be given for each quadratic.
• Points: The first character is "p" followed by the x and y values for 1 or more points. Examples:
  p 2; 3: put a point at (2, 3).
  p 2;3; 4;2; 1;5: put points at (2, 3), (4, 2), and (1, 5).
  Note: if the finally y is missing, the x value is ignored. Values are separated by ";".
• Words (or labels) The first character is "w" followed by x, y, and the "word" for 1 or more "words". Examples:
  w 2;3; Sam: Sam will be printed at (2, 3).
  w 2;3; Sam; 4;0; Sally; -2;-3;Jane Jones: Sam will be printed (2, 3), Sally at (4, 0) and Jane Jones at (-2, -3).
  
  Notes:

  Values are separated by ";".

  Words are centered horizontally at the specified point and are located just above the specified point.

  (This option would be better named "label" or "text". But using the first letter of these names would not work because "l" and "t" have other meanings.)

  It is possible to include variable values in words. The variable values are denoted by ^a, ^b, ^c, ^d, and ^e. E.g. if d currently = 3, then the "word" "value=^d stars" results in "value=3 stars".

  When supplying a label for a curve, it may be desirable to have the label's color match the curve's color. This is possible. One needs to follow the last "word" in the input box with ; color; color number;. E.g.
  w 2; 3; aWord; color; 1;
  This says to put "aWord" at (2, 3) with the same coloring as function f1. Notice the ";"s in the statement. The final ";" is absolutely needed. It is possible to use formulas for the curve number.

Common notes:

The "x=", "o=", "r=", "l", "q", "p", and "w" must be the first character(s) in the field. After that spaces are optional. In these special cases, "x", "o", "r', "l", "q", "p" and "w" can be capitalized.

The different elements are separated by ";". Failure to use ";" may cause strange errors or the item may be ignored.

You can use formulas for the numerical values. They are evaluated the same way regular formulas are evaluated - just avoid using "x", "o", or "t" in the formulas (and ";" in words).

These options can be used in any mode. When in the polar mode, coordinates for points and words are assumed to be r and θ values.

Minimums and Maximums

Minimum θ and Maximum θ. Polar coordinates: (only) The minimum and maximum values of θ. If the boxes are left blank, the defaults are 0 and 2 PI.
Minimum t and Maximum t. Parametric mode: (only). If the boxes are left blank, the defaults are 0 and 10.
Minimum x and Maximum x Rectangular mode: (only) are the left and right end points of the x axis. If the input boxes are blank, the default values are -5 and 5.
Polar coordinates and parametric mode: If minimum x and maximum x boxes are left blank they will be calculated automatically based on the x values.
Minimum y and Maximum y, if specified, are the end points of the y axis. If these fields are blank, appropriate values will be calculated automatically based on the y values of the function.

If "Equal spacing" is true (checked) then the mins and maxs for x and y will be adjusted as needed in order to make the equal spacing possible.

Note: After you finish typing a minimum or maximum, press "Enter". The minimum and maximum values can be formulas which are evaluated the same way functions and values are evaluated. Just don't use x, t, or o in the formulas.

Zoom in and Zoom out

Sometimes it is useful to zoom in to see part of the graph more closely. The "Zoom in" button does this. The domain is reduced by one half and the graph is redrawn. If both the y minimum and x maximum are specified the range is reduced in a similar manner. Otherwise the range is determined in the usual manner. Unfortunately, the domain may still not be as desired. In that case, the user can set the center of the graph by double clicking at the desired point.

"Zoom out" increases the domain by a factor of 2.

Equal spacing

When Equal Spacing is checked, the units on the x and y axis are the same so a 45^o line would look like a 45^o line and circles will look like circles.

Allow motion

For the sake of efficiency, Grapher stops redrawing graphs when nothing is changed. Checking Allow motion says to keep drawing. This is useful, for example, if one uses frameCount. E.g. 5 * sin(x + frameCount/10) or if you use the "s" slider.

Show enlarged canvas and enlargement ratio

The standard canvas is medium sized to allow the user see the canvas and many of the controls at the same time without having to scroll. This is convenient while developing a graph. But a larger graph is drawn above the original canvas and controls when the "Show enlarged canvas" item is checked or the "Enlargement ratio" is changed. When using this option, one will normally have to scroll up to see the larger graph and scroll down to see the original canvas and the control items. The enlarged canvas shows a magnified image of the original canvas except text elements are the same size as in the original.

Notes:

• If the "Save as an image file" button is clicked, the enlarged image is saved if the "Show enlarged canvas" item is checked.
• For efficiency, the enlarged canvas is only drawn when the "Show enlarged canvas" item is checked.
• Because monitors vary, the default enlarged image is 1.5 times the size of the original. Use the enlargement ratio slider to set the desired size of the enlarged canvas. You may need to scroll up after setting the enlargement ratio to see the enlarged image.

Angle measurement

The Radians and Degrees radio buttons allow the user to specify if the trig functions and trig inverse functions assume radians or degrees. The default is radians. Rectangular coordinates: In the first example function set, if you change the mode to degrees, you will probably want to change the f1 function to something like 5 * cos(90 * x) and likewise for f2.
Polar coordinates: If you use radians, you might want the minimum and maximum θ values to be 0 and TWO_PI. If you change to degrees, you will probably want the minimum and maximum θ values to be something like 0 and 360.

Values

You can supply values for a, b, c, d, and e which can be used in the functions. The default value of these values is 0 when the input box is blank. They are evaluated the same way functions are evaluated. Just don't use x, t, or o in the formulas. See below for the special s value. You can use the value of one of the variables in another. For example, the expressions for a and b might be s/10 and 2 * d. Because one can use formulas for variables a, ...,e, the numerical values for these variables (rounded to 3 decimal places) is shown below the values.

The s value and its slider

The slider moves from 0 to 100 and is always an integer. If you move the slider, its value is sent to the s value input box. One can type a value from 0 to 100 in the s value input box to adjust the slider to that value. Anything else typed into the s value box is ignored and will be replaced by the value of the slider.

If the value range of the slider is not appropriate you can do something like the following: f1(x) = b * sin(x) where b value is set to s/10.

Important note: When "Allow motion" is false (not checked) the value of s is set when the mouse releases the slider but the value of s does not track the slider while the slider is moving. However, if "Allow motion" is true (checked) (and at least one function has been defined) the value of s tracks the slider.

Number of evaluations

The initial value of 200 is almost always adequate for rectangular coordinates as that means the functions are evaluated at about every other pixel in the x direction. However, in polar coordinates or in the parameter mode, users may have to increase the number of evaluations if the curves turn sharply and they look jagged.

Show graph info

This is useful if you have a copy of grapher on your computer. If you set up a graph that you want to use again in another session, you can click this button and dialog box will show the information needed for the current plot to add it to the setupExamples function in the DiffiEq2.pjs. You can copy the information and paste it into the function. You will have to provide an unique example number and a name for the graph. Formulas are shown in the order of the example numbers.

If a "," is included in a "word" special option w in function boxes, it will be replaced by "^$". The substitution is required because "," are used to separate items in the data. However, this is not a problem because the "^$" is automatically replaced by "," when used in a example.

Save as a Temp Example

If you click this button, the current setup saved as a new example which added to the list of examples. You will be required to supply a name for the new example. The temporary example will only be available for the rest of current session.

Save as an image file button

After finishing a graph, it can be saved as an image file. Click the button. Depending on your browser, you may be asked if you want to save the file. In any case, you will probably find it your normal download folder with name grapher.jpg. If you save more than one time, the multiple copies will normally be numbered. Your browser may have a button to give direct access to this folder. This feature may work if you are using an online copy of grapher.

A sophisticated example

The third example shows a function and draws a tangent to that function. In calculus, one learns how to find a tangent to curve after learning about derivatives. If you haven't taken calculus, you will not be able to set this up for your favorite function but there are some ideas that you could use anyway.

• f0(x) is the function we are working with.
• f1(x) is the straight line with slope b going through the point (d, a). We will discuss how the values of a, b, and d are determined.
• The value of s is set by the slider and is the percent of the distance between the left side of the graph and the right side of the graph.
• Value d is the x value for which the tangent will be drawn. The formula for d is minX + (maxX - minX) * s / 100.
• The value of b is the value of the derivative of f0(x) evaluated at the x value specified by d. The derivative of sin(x) is cos(x) so b is set to cos(d).
• The value of a is just the value of f0(x) at the x value specified by d. In this example a is sin(d)
• The derivative of sin(x) is cos(x) only when we are using radians so "Radians" must be selected.

If you understand calculus, you could replace f0(x) by any other function that you know the derivative of. If not, you may find the formula for the straight line in f1(x) and the setting of an x value in d useful in other situations. Or you could use an interactive on-line tool like https://www.derivative-calculator.net to find the derivative for you. (If you use this tool, make sure you look at "Examples" to see how to write the function.)

Some interesting curves

You will need to change θ to o (or t) if you copy a formula into the grapher.

• Normal distribution probability curve: y = exp(-sq(x)/2)/sqrt(TWO_PI)
• Bifolium: r = a * sin(θ) * sq(cos(θ))
• Circle center at origin and radius a: r = a
• Roses: r = a * sin(b*θ) or r = a * cos(b*θ)
  (Circle if b = 1, b petals if b is odd, 2b petals if b is even.)
• Limacon of Pascal: r = b + a * cos(θ).
  The shape of curve depends on if a < b, a = b; or a > b.
• Spiral of Archimedes: r = a * θ
• Hyperbolic spiral: r = a/θ (Symmetric if θ is negative)
• Logarithmic spiral: r = exp(a*θ) (Best if (-1 < a <1, a ≠ 0)
• Horizontal and vertical straight lines: r = a/sin(θ) and r = a/cos(θ)
• Cycloid: x = a * (t ± sin(t)), y = a * (1 - cos(t)) (Use either a "+" or a "-" instead of ±)
• Prolate cycloid: x = a * t - b * sin(t), y = a - b * cos(t), (a < b but changes to curtate if a > b)
• Nephroid: x = a * (cos(t) - cos(3 * t))/2, y = a * (sin(t) - sin(3 * t))/2

Error messages

When the user types invalid info into one of the input boxes, a message is displayed on the top of the plot area. After fixing error, normally the error message will be hidden. Occasionally it may be necessary to click anywhere in the plot area to hide the message.

James Brink, 4/26/2021