topical media & game development
sample-js-asciisvg.cfg / cfg
<html>
script(s)
<script>
function page() { drawPictures(); }
</script>
tool part
<slide color=black id=@cfg-sample-js-asciisvg>
<c>
<script type="text/javascript" src="sample-js-asciisvg.js"></script>
<script>
function slide() { drawPictures(); }
</script>
</c>
display(s)
<h6><b>type (asciisvg commands and javascript)</b>:
<input type="button" value="Update" onclick="updatePicture(0)"/>
</h6>
<!--
<br>
(requires IE+<a href="http://www.adobe.com/svg">SVGviewer 3.01</a>
or <a href="svgenabledmozillafirefox.html">Mozilla+SVG</a>)
-->
form(s)
<center>
<table border=1>
<tr><td valign=top>
<form>
<textarea id="picture1input" rows="23" cols="50">
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>
output(s)
</td><td valign="top">
<div id="outputNode">
<embed width="400" height="400" src="d.svg" onmousemove="update()" script=''>
</div>
</td></tr>
</table>
</center>
<s>
<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)"/>
</s>
update(s)
<script>
function update() {
setText(getX().toFixed(2),"getx")
setText(getY().toFixed(2),"gety")
}
</script>
<navigate/>
</slide>
instruction(s)
<slide id=@cfg-sample-js-asciisvg-instructions>
<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>
<navigate/>
</slide>
note(s)
<h6>
<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>
</h6>
command(s)
<slide id=sample-js-asciisvg-commands>
<p>
<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>
</center>
</p>
<navigate/>
</slide>
plotting(s)
<slide id=sample-js-asciisvg-plot>
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:
<p>
+, -, *, /, ^, 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>
<navigate/>
</slide>
learning(s)
<slide id=sample-asciisvg-learning>
<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>
<navigate/>
</slide>
<hr/>
author
<slide id=sample-js-asciisvg-author>
author: http://www1.chapman.edu/~jipsen
>
<div id="author">
<a href="http://www.chapman.edu/~jipsen/">Peter Jipsen</a>,
<a href="http://www.chapman.edu/">Chapman University</a>, Nov 2004
</div>
</center>
<navigate/>
</slide>
</body>
</html>
(C) Æliens
04/09/2009
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.
