Code your math picture - Commands

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

See also the Examples.

General

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) = log2(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 nth positive integer less than a. Example: facl(7,2) = 7*5*3*1 = 105.

Default (n=1) is the factorial function. Example: facl(5) = 5*4*3*2*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.