Code your math picture - Commands

This page describes the input commands for the Code your math picture web application.

General

Any valid JavaScript code may be used.
Commands on the same line MUST be separated by semicolons (none are needed at end of line).
Points on the canvas are specified by coordinates [x,y] in square brackets.
Operators "+", "-", "*", "/" can be used and the multiplication symbol "*" MUST be used at places where normally in expressions it would be omitted, like 2(x+3) must be 2*(x+3) and 2x must be 2*x.
The symbol "^" can be used for raising to a power. For this also the function pow() is available.
3^x = pow(3,x)
3^2*x = x*3^2 = 9*x
2^-2 = 1/(2^2) = 1/4.
Mind the necessity to use brackets "("")" in expressions.
The symbol "!" cannot be used for factorial. 5! can be written as facl(5).

Global variables

	Colors must be specified 'CSS style', that means by RGB values, by hexadecimal values or by specific names. Example RGB values: `rgb(255,0,0)` being red. Example hexadecimal values: `#FF0000` being red. There are also 140 specific color names that can be used, like `red`, `green`, `blue`, `yellow`, `black`, `white`, `grey`, `purple`, `orange`, `brown`, `chocolate`, `cyan`, `magenta`, `pink`, `lime`, `tomato`, `turquoise`, `teal`, `tan` etc.
`gridstroke`	Line color of the next drawn grid. Default: `gridstroke = "grey"`.
`dotmarkerfill`	Fill color of all marker dots. This variable needs to be defined before any dot marker is defined. Default: `dotmarkerfill = "yellow"`.
`dotmarkersize`	Size of all marker dots in pixels. This variable needs to be defined before any dot marker is defined. Default: `dotmarkersize = "4"`.
`strokewidth`	Line thickness in pixels of the next drawn figure. Default: `strokewidth = "1"`.
`stroke`	Line color of the next drawn figure. Default: `stroke = "black"`.
`strokeopacity`	Line color opacity of the next drawn figure (transparent = "0", solid = "1"). Default: `strokeopacity = "1"`.
`strokedasharray`	Dash array of the lines of the next drawn figure. Default: `strokedasharray = "none"`. Example: `strokedasharray = "5,10"` yields a line of alternating 5 pixels long dashes and 10 pixels long gaps.
`fill`	Fill color of the next drawn figure. Default: `fill = "none";`.
`fillopacity`	Fill color opacity of the next drawn figure (transparent = "0", solid = "1"). Default: `fillopacity = "1"`.
`fontfamily`	Font family of the next text, like `"Arial, sans-serif"` or `"Courier, monospace"`. Default: `fontfamily = "Times, serif"`.
`fontsize`	Font size in pixels of the next text. Default: `fontsize = "16"`.
`fontstyle`	Font style of the next text. Possible values: `"normal"`, `"italic"` and `"oblique"`. Default: `fontstyle = "normal"`.
`fontweight`	Font weight of the next text. Some possible values: `"normal"` and `"bold"`. Default: `fontweight = "normal"`.
`fontstroke`	Font stroke color of the next text. Default: `fontstroke = "none"`.
`fontstrokewidth`	Font stroke thickness of the next text in pixels. Default: `fontstrokewidth = "1"`.
`fontfill`	Font fill color of the next text. Default: `fontfill = "black"`.
`textanchor`	Font text anchor of the next text, to align text relative to a given point. Possible values: `"start"`, `"middle"` and `"end"`. Default: `textanchor = "start"`.
`pointsize`	Size of the next drawn point, in pixels. Default: `pointsize = "4"`.
`pointfill`	Fill color of the next drawn point. Default: `pointfill = "yellow"`.
`perpendsize`	Size of the next perpendicular sign, in pixels. Default: `perpendsize = "10"`.

Drawing commands

`initPicture(xmin,xmax,ymin,ymax)`	This is usually the first command. The arguments set the coordinate system, but axes or a grid are not drawn. If `initPicture()` is omitted or no arguments are set, `xmin` = `ymin` = -5 and `xmax` = `ymax` = 5 and the origin is in the center. If `initPicture()` is set, `ymin` and `ymax` are optional. If `ymin` is omitted, the x-axis is placed in the middle of the picture. If `ymax` is omitted, the scale along the x-axis and y-axis is the same.
`axes(dx,dy,labels)`	If axes need to be drawn, this is usually the second command. If no arguments are set, just an x-axis and a y-axis with a tick at every unit multiple are drawn. If `dx` is set and not `dy`, ticks are drawn separated at this distance on both x-axis and a y-axis (taking the x-axis and y-axis scale into account). If `dy` is also set, ticks are drawn separated at this distance on the y-axis and separated at `dx` distance on the x-axis. `labels` is a boolean type argument. If set, it can be the first and only, the second and last or the third and last argument. If it is set as `true`, x and y values are drawn at the ticks, if it is set `false` or not set, no text is drawn.
`grid(gdx,gdy)`	If a grid is needed, this is usually the second or the third command. If no arguments are set, horizontal and vertical lines at every unit multiple are drawn. If `gdx` is set and not `gdy`, both vertical and horizontal lines are drawn separated at this distance measured on x and y-axis. If `gdy` is also set, horizontal lines are drawn separated at this distance and vertical lines separated at `gdx` distance.
`line(p,q,marker)`	Draws a straight line from `p` to `q`. `marker` defines begin and end markers if given one of the following values: `"dot"` A circle at point `p`. `"arrow"` An arrowhead at point `q`. `"dotdot"` A circle at point `p` and point `q`. `"dotarrow"` A circle at point `p`, and an arrowhead at point `q`.
`path(plist,marker)`	Draws a path of straight lines from point to point to point... `plist` defines the points: `[[x1,y1],[x2,y2],...,[xn,yn]]`. `marker` defines begin, mid and end markers if given one of the following values: `"dot"` A circle at the start of the path. `"arrow"` An arrowhead at the end of the path. `"dotdot"` A circle at the start, and at the end of the path. `"dotarrow"` A circle at the start, and an arrowhead at the end of the path. `"dotdotarrow"` A circle at the start and one at every following point of the path, except the end, given an arrowhead. `"dotdotdot"` A circle at every point, including the start and end of the path. `"arrowarrow"` An arrowhead at every point, except the start, and including the end of the path.
`curve(plist,marker)`	The same as `path()`, with the same arguments, only now smooth quadratic Bézier curves are drawn between the points, instead of straight lines.
`loop(p,d,marker)`	Draws a loop from point `p` to point `p`. `d` is a direction vector, e.g. `[1,0]` means loop starts in that direction If set, only markers `"dot"`, `"arrow"` and `"dotarrow"` are allowed.
`arc(start,end,radius,marker)`	Draws an arc, a segment of a circle. If set, only markers `"dot"`, `"arrow"`, `"dotdot"` and `"dotarrow"` are allowed.
`circle(center,radius)`	Draws a circle.
`ellipse(center,rx,ry)`	Draws an ellipse.
`rect(p,q,marker)`	Draws a rectangle with opposite corners at points `p` and `q`. If set, only marker `"dotdotdot"` is allowed.
`triangle(p,q,r,marker)`	Draws a triangle with vertices in points `p`, `q` and `r`. If set, only marker `"dotdotdot"` is allowed.
`sector(center, r, startangle, angle, marker)`	Draws a circle sector with its center in point `center`, a radius `r`, a `startangle` and a central `angle`. Angles in degrees. If set, only marker `"dotdotdot"` is allowed.
`rectround(p,q,rx,ry)`	Draws a rectangle with lower left corner at point `p` and upper right corner at point `q`. If set, all corners are rounded by radius `rx` or, if both set, by radii `rx`,`ry`.
`point(p, type, label, pos)`	Draws a mark indicating the position of a point at `p`. `type` defines the kind of mark if given one of the following values: `"+"` A plus sign. `"-"` A minus sign. `"\|"` A small vertical stroke. `"open"` A circle filled white. `"closed"` A color filled circle. `label` can be set if `type` is set, and represents text written at a position `pos`, relative to point `p`. Look at the description of the `text()` command for possible values for `pos`.
`perpend(p,rot)`	Draws a perpendicular sign at point `p`. `rot` defines the rotation in degrees around point `p`.
`text(p,st,pos)`	Draws a text given by `st` with a default start position at point `p`. `pos` defines the position of the text relative to point `p` if given one of the following values: `"above"` Centered above `p`. `"below"` Centered below `p`. `"left"` Left from `p`. `"right"` Right from `p`. `"aboveleft"` Above left from `p`. `"belowleft"` Below left from `p`. `"aboveright"` Above right from `p`. `"belowright"` Below right from `p`. A number Text rotates around `p` by the given amount of degrees.
`plot(fun,x_min,x_max,points)`	Plots a single variable function `f`(`x`). Functions need to be defined as JavaScript functions, e.g. `var f = function(x) { return sin(x) }` for `f`(`x`)=sin(`x`). `fun` can be a single function or an array of two functions `[f,g]`, in which case it returns a parametric plot. `x_min` and `x_max` define for what part of the domain the function is drawn. Default are the edges of the picture. `points` defines the number of points used (default = 200). Increase the value if the curve becomes jagged.
`polarplot(fun,t_min,t_max,points)`	Plots a polar function `r`(`t`), with `r` being the radius from the origin and `t` the angle in radians. This function works quit similar as `plot()`
`animate(mspf,step,fun,max)`	Animation. `mspf` sets the time (in ms) that one frame takes. `step` sets the 'change' every one frame. `fun` is the function to be animated. `max` sets the maximum value of the variable of the function to be animated.

Math commands

`e`, `pi`	The variables `e` and `pi` represent the irrational numbers `e` (Euler's number) and `π`.
`pow(a,b)`	Returns the value of `a` to the power of `b`.
`sqrt(a)`	Returns the square root of `a`.
`exp(a)`	Returns the value of `e`^`a`. Example: `exp(-1)` = 1/e ≈ 0.368.
`abs(a)`	Returns the absolute value of `a`. Example: `abs(-2)` = `abs(2)` = 2.
`ln(a)`	Returns the natural logarithm (base `e`) of `a`. Example: `ln(e)` = 1.
`lg(a)`	Returns the common logarithm (base 10) of `a`. Example: `lg(100)` = 2.
`log(b,a)`	Returns the logarithm of `a` to base `b`. Example: `log(2,8)` = log₂(8) = 3.
`sin(a)`, `cos(a)`, `tan(a)`	Return the sine, cosine and tangent of `a` (angel `a` in radians).
`arcsin(a)`, `arccos(a)`, `arctan(a)`	Return the arcsine, arccosine and arctangent (in radians) of `a`.
`sec(a)`, `csc(a)`, `cot(a)`	Return the secant, cosecant and cotangent of `a` (angel `a` in radians).
`arcsec(a)`, `arccsc(a)`, `arccot(a)`	Return the arcsecant, arccosecant and arccotangent (in radians) of `a`.
`sinh(a)`, `cosh(a)`, `tanh(a)`	Return the hyperbolic sine, hyperbolic cosine and hyperbolic tangent of `a`.
`arsinh(a)`, `arcosh(a)`, `artanh(a)`	Return the area hyperbolic sine, area hyperbolic cosine and area hyperbolic tangent of `a`.
`sech(a)`, `csch(a)`, `coth(a)`	Return the hyperbolic secant, hyperbolic cosecant and hyperbolic cotangent of `a`.
`arsech(a)`, `arcsch(a)`, `arcoth(a)`	Return the area hyperbolic secant, area hyperbolic cosecant and area hyperbolic cotangent of `a`.
`radtodeg(r)`	Converts `r` in radians to degrees. Example: `radtodeg(pi/4)` = 45.
`degtorad(d)`	Converts `d` in degrees to radians. Example: `degtorad(180)` = 3.141592653589793.
`mod(a,b)`	Returns `a` modulo `b`, the remainder after `a` dividing by `b`. Example: `mod(7,2)` = 1.
`facl(a,n)`	Returns the product of `a` and every `n`th positive integer less than `a`. Example: `facl(7,2)` = 7531 = 105. Default (`n`=1) is the factorial function. Example: `facl(5)` = 5432*1 = 120.
`C(n,k)`	Returns the binomial coefficient `n` choose `k`. Example: `C(5,3)` = 5!/(3!2!) = (4*5)/2 = 10.
`min(a,b,c,...,n)`	Returns the number with the lowest value. Example: `min(-10,0,1,6)` = -10.
`max(a,b,c,...,n)`	Returns the number with the highest value. Example: `min(-10,0,1,6)` = 6.
`ceil(a)`	Ceiling function. Returns the value of `a` rounded up to its nearest integer. Example: `ceil(2.1)` = 3.
`floor(a)`	Floor function. Returns the value of `a` rounded down to its nearest integer. Example: `floor(2.51)` = 2.
`round(a,n)`	Returns the value of `a` rounded to `n` places after the decimal point. Example: `round(e,4)` = 2.7183. Default (n=0) returns the value of `a` rounded to its nearest integer. Examples: `round(2.49)` = 2, `round(2.5)` = 3.
`chop(a,n)`	Returns the value of `a`, truncated to `n` places after the decimal point. Example: `chop(2.59,1)` = 2.5.
`ran(a,b,n)`	Returns a random number in [`a`,`b`] with `n` digits after the decimal point. Example: `ran(0,3,0)` = 0, 1, 2 or 3.