ASCIIsvg.js (ver 1.0): List of commands

In addition the functions have a syntax that is closer to traditional mathematical notation and allows for simple algorithmic description of mathematical diagrams and graphs. Animation and interactivity with standard dynamic HTML are also very straight forward.

With this simplified approach to SVG, it is easy for university and highschool students to create mathematical diagrams on webpages using the standard xy-plane (rather than the "upsidedown" coordiante system of SVG). Along the way they learn many practical geometric, algorithmic and analytic techniques that go well beyond what is learned when graphing calculators or computer algebra systems are used to produce similar diagrams.

Thus SVG puts computer users back in the "driver seat" and allows them to easily produce graphical output from JavaScript programs. The ASCIIsvg layer makes this even more accessible and browser independent. (Of course SVG is also a browser independent standard, but currently Mozilla/Firefox and Internet Explorer take quite different approaches to integrating SVG.)

Brief descriptions of the ASCIIsvg commands and some examples follow below (optional arguments are enclosed in [ ]).

function drawPicture() {...} <script>function drawPicture() { drawPicture1() drawPicture2() drawPicture3() drawPicture4() drawPicture5() drawAxes() }</script>	This is the main function which describes the pictures on the webpage. It is called by the < body onload="drawPicture()"> command to initiate the drawing of these pictures. If the webpage contains several pictures (as e.g. this page), then this function may contain commands like drawPicture1(); drawPicture2();... (or alternatively one can put the commands for all pictures in a single drawPicture() function).
initPicture("name",xmin,xmax[,ymin[,ymax]])	This is usually the first command. name is the identifier of an earlier < embed id="name" width="" height="" src="dynamic.svg"/> command where the picture will appear. The remaining arguments set the coordinate system. The last two arguments 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 (this is the recommended setting).
stroke = "color"	Sets the default color for lines, paths, curves and outlines of solid figures. The available color names (and corresponding RGB values) are listed e.g. at http://www.spacetoday.org/BoilerRoom/Colors.html.
strokewidth = "value"	Sets the default width (in pixels) for lines, paths, curves and outlines of solid figures.
fill = "color"	Sets the default color for filling in the inside of solid figures.
marker = "markersymbol"	Sets the default marker symbol that is drawn at the endpoints of lines and along the intermediate points along paths and curves. Currently possible values are: "dot", "arrow", "arrowdot", "none".
border = "25"	Sets the default width (in pixels) of a (blank) border that is added around the outside of the picture area. Initially the value is 25, which allows labels to be positioned above or below any picture element without being clipped. If changed, this command must precede the initPicture command.
line([x,y],[u,v]) <script>function drawPicture1() { initPicture("ex1",-2,2,-2) line([-2,-2],[2,2]) marker = "arrowdot" line([-2,2],[2,-2]) }</script>	This command draws a straight line from the coordinate point [x,y] to the coordinate point [u,v].
path([p1,p2,p3,...,pn])	This command draws straight lines connecting the points p1=[x1,y1], p2=[x2,y2],..., pn=[xn,yn] in order. If p1 = pn, then this is a closed path representing a solid figure.
curve([p1,p2,p3,...,pn]) <script>function drawPicture2() { initPicture("ex2",0,1,0) a=[0,0]; b=[0,1]; c=[1,1]; d=[1,0] path([a,c,b,d,a]) stroke="red" curve([[-.5,.5],b,c,d]) }</script>	This command draws a curve through the specified points. It uses quadratic bezier curves between pairs of points, with the slope of the curve determined by the first two points and propagated through the curve by symmetry.
circle([x,y],r) <script>function drawPicture3() { border=5 initPicture("ex3",-1,1,-1) strokewidth=5 a=[0,0]; stroke="red" circle(a,.9); stroke="orange" circle(a,.8); stroke="yellow" circle(a,.7) }</script>	Draws a circle with center at [x,y] and radius r.
ellipse([x,y],rx,ry)	Draws an ellipse centered at [x,y], with horizontal radius rx and vertical radius ry.
arc([x,y],[u,v],r)	Draws a circular arc in anticlockwise direction from [x,y] to [u,v] with radius r (should be bigger than half the distance between the points).
rect([x,y],[u,v]) <script>function drawPicture4() { initPicture("ex4",0,1,0) a=[0,0]; b=[1,1] rect(a,b) stroke="red" ellipse([.5,.5],.5,.25) stroke="blue" ellipse([.5,.5],.25,.5) }</script>	Draws a rectangle with bottom left corner at [x,y] and top right corner at [u,v].
text([x,y],"label" [,position]) <script>function drawPicture5() { initPicture("ex5",0,1,0) marker = "dot" a=text([0,1],"a",aboveleft) b=text([1,1],"b",aboveright) c=text([1,0],"c",right) d=text([0,0],"d",left) path([a,b,c,d,a,c,d,b]) text([.5,0],"K4",below) }</script>	Prints the string "label" at [x,y]. Optionally, the string can be positioned above, below, left, right, aboveleft, aboveright, belowleft, belowright of the point [x,y]. This command returns the coordinates of the point [x,y], so it can be captured in a variable (if convenient).
axes() <script>function drawAxes() { initPicture("axes",-2,2,-2) axes() }</script>	Draws coordinate axes on the picture (visible only if the origin is within the picture frame).

The following commands are used to create animated drawings. A group of drawing commands (as described above) are placed inside their own function, say function update() {...}. Each of these commands gets an additional optional argument "name". This ensures that the particular command is modified each time the function update() is called, otherwise the command will simply draw another copy of the new diagram.

switchTo("name")	This command is required if there are more than one picture on the webpage. It selects which picture is the target of the subsequent drawing commands.
getX(), getY()	These commands return the current x and y position of the mouse pointer (within the coordinate system of the picture).
setText("value","id")	This command sets the value of an HTML element that has the identifier "id" attached to it.