ASCIIsvg.js (ver 1.2): 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 { }).

The online documentation (below) for how to use it is slightly out of date. Briefly, onload="drawPictures()" is no longer needed in the html file and 'initPicture(a,b,c,d)' is replaced by 'xmin=a; xmax=b; ymin=c; ymax=d; axes()' (or 'noaxes()' at the end). The height and width commands can be included in the script='...' attribute, in which case the person viewing the picture can examine and modify the asciisvg commands locally in their browser, so each picture "contains its own asciisvgeditor". There are also two more commands: loop([x,y]) and arc([x,y],[u,v]) that are useful for drawing directed graphs.

A typical example is at http://www1.chapman.edu/~jipsen/svg/asciisvgsample1.html

<embed width="300" height="300" src="d.svg" script='...ASCIIsvg commands...'>	This is the syntax for the tag that inserts the pictures on the webpage. The ASCIIsvg commands described below are put between single quotes in the script attribute. The width and height are measured in pixels.
initPicture(xmin,xmax{,ymin{,ymax}})	This is usually the first command. The arguments set the coordinate system, with the last two arguments being 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).
line([x,y],[u,v])	This command draws a straight line from the coordinate point [x,y] to the coordinate point [u,v].
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".
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])	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.
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.
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.
circle([x,y],r)	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). Use two pieces for arcs larger than a semicircle.
rect([x,y],[u,v])	Draws a rectangle with bottom left corner at [x,y] and top right corner at [u,v].
text([x,y],"label" {,position})	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()	Draws coordinate axes on the picture (visible only if the origin is within the picture frame).
grid()	Draws a grid of hroizontal and vertical lines one unit apart on the picture.

The following commands are used to create animated pictures. A group of drawing commands (as described above) are placed in a separate <script> tag inside their own function, say function update() {...}. Each of these commands is invoked with an additional parameter "id", which is the name of a new identifier attached to the particular graphics element that is created by the command. It ensures that this graphics elements is modified each time the function update() is called. (If "id" is omitted, the command will simply draw an additional copy of the updated graphics element.) Some examples of animated pictures can be found in the ASCIIsvg Gallery.

switchTo("picture1") ... switchTo("picture2") ...	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. Pictures are given the default names picture1, picture2, ... numbered from the top of the page. These names can be overridden by explicit id="name" attributes in the <embed> tag.
getX(), getY()	These commands return the current x and y position of the mouse pointer (within the coordinate system of the picture).
setText("value","ident")	This command sets the text value of an HTML element that has the identifier "ident" attached to it. Usually it is used with <span id="ident">, and after the setText command the string "value" is inserted as the content of the <span> element.

Any valid JavaScript code may be used in the script='...' attribute. For longer programs it is preferable to put them in a separate function inside a standard <script>...</script> tag and include only a function call in the script='...' attribute since syntactically incorrect code otherwise does not produce helpful error messages.