head
<head>
<title>ASCIIsvg Editor</title>
<script type="text/javascript" src="sample-js-asciisvg.js"></script>
<style type="text/css">
#menu, #title, #subtitle, #author {text-align: center}
/* body {font-family: Arial} */
</style>
</head>
instruction(s)
<p>
Type (or paste) your ASCIIsvg commands into the textarea. Then
click the update button to see the picture.
To <b>save your work</b>, select the text (Ctrl-A) and
copy it to a text editor (e.g. Notepad).
Choose the layout that best fits your screensize:
<input type="button" value="800x600" onclick="document.getElementById('picture1input').setAttribute('cols',45)"/>
<input type="button" value="1024x768" onclick="document.getElementById('picture1input').setAttribute('cols',58)"/>
<input type="button" value="1400x1050" onclick="document.getElementById('picture1input').setAttribute('cols',81)"/>
</p>
tool part
<table>
<tr><td><b>Type (ASCIIsvg commands and JavaScript)</b></td><td><b>Display</b> 
<input type="button" value="Update" onclick="updatePicture(0)"/>
(Requires IE+<a href="http://www.adobe.com/svg">SVGviewer 3.01</a>
or <a href="svgenabledmozillafirefox.html">Mozilla+SVG</a>)
</td></tr>
<tr><td>
<!-- form(s) -->
<form>
<textarea id="picture1input" rows="30" cols="58">
setBorder(0)
initPicture(-5,5)
axes(2, 1, "labels", 1)
stroke = "blue"
plot("sin(x)")
stroke = "red"
plot(["5*t*cos(pi*t)", "5*t*sin(pi*t)"],0,1)
stroke = "green"
strokewidth = "2"
marker = "arrowdot"
line([0,1], [pi/2,1])
dot([pi,0], "open", cpi)
text([-2.5,-2.5], "ASCIIsvg Example")
</textarea>
</form>
</td><td valign="top">
output
<div id="outputNode">
<embed width="500" height="500" src="d.svg" onmousemove="update()" script=''>
</div>
Pointer coordinates: (<span id="getx">x</span>,<span id="gety">y</span>)
</td></tr>
</table>
script / update(s)
<script>
function update() {
setText(getX().toFixed(2),"getx")
setText(getY().toFixed(2),"gety")
}
</script>
note(s)
<b>Note that this is dynamic HTML running locally on your machine!
If you leave this page before copying and saving
your work, it may disappear.</b>
<p>
list of command(s)
<center>
<b><a href="http://www.chapman.edu/~jipsen/svg/asciisvgcommands.html">
ASCIIsvg commands</a></b> (click link for details; arguments in {} are optional)
<table>
<tr>
<td><b>setBorder(pixelvalue) (default 25)</b></td>
<td><b></b></td>
</tr><tr>
<td><b>initPicture( xmin, xmax {, ymin {, ymax}} ) </b></td>
<td><b>axes( {dx, dy,} {"labels" {, "grid"| gdx {, gdy}}} )</b></td>
</tr><tr>
<td><b>line( [x,y], [u,v] )</b></td>
<td><b>marker = "dot" | "arrow" | "arrowdot" | "none"</b></td>
</tr><tr>
<td><b>path( [ [x1,y1], [x2,y2], ..., [xn,yn] ] )</b></td>
<td><b>curve( [ [x1,y1], [x2,y2], ..., [xn,yn] ] )</b></td>
</tr><tr>
<td><b>plot( "f(x)" {, xmin, xmax, npoints} )</b></td>
<td><b>plot( [ "f(t)", "g(t)" ] {, tmin, tmax, npoints} )</b></td>
</tr><tr>
<td><b>stroke = "<a href="http://www.spacetoday.org/BoilerRoom/Colors.html">color</a>"</b></td>
<td><b>strokewidth = "pixelvalue" (default 1)</b></td>
</tr><tr>
<td><b>fill = "<a href="http://www.spacetoday.org/BoilerRoom/Colors.html">color</a>"</b></td>
<td><b>strokedasharray = "dashpixel spacepixel"</b></td>
</tr><tr>
<td><b>fontsize = "pixel" (default 20)</b></td>
<td><b>fontweight = "bold" | "normal"</b></td>
</tr><tr>
<td><b>fontstyle = "italic" | "normal"</b></td>
<td><b>fontfamily = "serif"|"sansserif"|"fixed"|"monotype"</b></td>
</tr><tr>
<td><b>circle( [x,y], r )</b></td>
<td><b>ellipse( [x,y], rx, ry )</b></td>
</tr><tr>
<td><b>arc( [x,y], [u,v], r )</b></td>
<td><b>rect( [x,y], [u,v] )</b></td>
</tr><tr>
<td><b>text( [x,y], "label" {, position} )</b></td>
<td><b>dot( [x,y] {, open | closed {, "label", position} )</b></td>
</tr><tr>
<td><b>position</b> can be: <b>above, below, left, right,</b></td>
<td><b>aboveleft, aboveright, belowleft, belowright, null</b></td>
</tr>
</table>
</p>
<p>
For the <b>plot</b> commmand, the functions f(x), f(t), g(t) can use any
valid JavaScript function or constant (without the "Math." prefix) and any
of the following:
+, -, *, /, ^, pi, e, sqrt(), ln(), abs(), sign(), floor(), ceil(),
n!, C(n,k), ran(a,b,n),
sin(), cos(), tan(), sin^-1(), cos^-1(), tan^-1(),
sinh(), cosh(), tanh(), sinh^-1(), cosh^-1(), tanh^-1(),
sech(), csch(), coth(), sech^-1(), csch^-1(), coth^-1().
<br/>
cpi and ctheta denote the corresponding greek letters.
The multiplication symbol * can be omitted after a digit (0-9)
or a closing parenthesis.
</p>
<p>
This Editor is useful for learning about coordinate geometry, graphs of
functions, parametric curves, JavaScript, SVG, ... Have fun.
</p>
<p> You can save your own local copy of this page (using <b>Save As...</b>),
and use this SVG editor even when you are not connected to the internet.
You can also right-click on the SVG picture to copy it and paste it
into a wordprocessor that can handle SVG (e.g. in MSWord 2003 use
<b>Edit->Paste Special...</b>
and select the bitmap format; your picture will be inserted as SVG).
</p>
<hr/>