
ASCIIsvg.js (ver 1.2): List of commands
ASCIIsvg.js is a layer of JavaScript functions that can be used
in any HTML document to produce inline Scalable Vector Graphics
viewable with both Internet Explorer+[Adobe SVGviewer] and SVG
enabled Mozilla/Firefox.
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 xyplane (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 xaxis is placed in the middle of the picture. If
ymax is omitted, the scale along the xaxis and yaxis 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.
