ASCIIsvg: Easy mathematical vector graphics

ASCIIsvg: Easy mathematical vector graphics



http://www1.chapman.edu/~jipsen/svg/asciisvg.html

ASCIIsvg.js (ver 1.2): Simplified Scalable Vector Graphics via JavaScript
(HTML version)

Would you like to easily produce
good-looking diagrams on webpages using simple
commands to describe your picture?


Here is a free solution that works in any browser that has
SVG and JavaScript enabled.

This is the main page (HTML version) for the ASCIIsvg.js script which makes it
easy to describe pictures on webpages using standard mathematical
coordinates.

The JavaScript
code is currently around 800 lines.

This page requires Internet Explorer 6 + Adobe SVGviewer 3.01 or higher or SVG enabled Mozilla/Firefox.

ASCIIsvg.js is freely available under the GNU General Public
License. You can get your own copy from the ASCIIsvg.js
download page.
If you use it on a webpage, please send me an email at jipsen@chapman.edu with the URL
so that I can add a link to it on the users page.
(Also send me an email if you have problems or would like to provide some feedback.)
I'm currently using ASCIIsvg and
ASCIIMathML
on a Wikiserver for interactive lecture notes.

---

Here are some examples of static pictures produced with
ASCIIsvg.js. If you copy the <embed ...> tag on the left into a
HTML page that also loads the ASCIIsvg.js script, then the picture on
the right appears on the page -- it's that simple!
Be sure to
also check out the Demo /
Editor (runs locally in your browser!) and the interactive
pictures in the ASCIIsvg
Gallery

<embed width="117" height="117" src="d.svg" script='border = 0 initPicture(-10,10) axes() stroke = "red" p = [] with (Math) for (t = 0; t < 10.01; t += 0.05) p[p.length] = [t*cos(PI*t), t*sin(PI*t)] path(p)'> Parametric spiral

<embed width="117" height="117" src="d.svg" script='initPicture(-2,2) axes() stroke = "blue" p = [] for (x = -2; x < 2; x += 0.1) p[p.length] = [x, (x+1)*x*(x-1)] path(p) // there is also a plot("...") shorthand'> A graph of x3-x

<embed width="117" height="117" src="d.svg" script='initPicture(-1,1) marker = "dot" a = [] n = 9 with (Math) for (i = 0; i < n; i++) a[i] = [cos(PI/4*(-1)*i+PI/2), sin(PI/4*(-1)*i+PI/2)] path(a) path([a[0],a[3],a[6],a[1],a[4],a[7],a[2],a[5], a[0],a[4],a[5],a[1],a[2],a[6],a[7],a[3]])'> A discrete graph

<embed width="117" height="117" src="d.svg" script='initPicture(-1,1) circle([0,0],1) a = [-.6,-.8] b = [ .6,-.8] stroke = "blue" path([a,[0,0],b]) stroke = "red" path([a,[-1, 0],b,[-.8,.6],a,[0,1],b, [.8,.6],a,[1,0],b])'> A circle theorem blue ang = 2*red ang

If you are familiar with SVG,
you can appreciate that this JavaScript
interface is a bit simpler. The commands and the coordinate system are
closer to standard mathematical usage, and the pictures are easier to
describe and modify (even dynamically) with the use of variables.




Of course most of this can be achieved quite efficiently with pure SVG,
but the overhead for the user is considerable. This makes it difficult to
incorporate SVG into standard math and science classes. ASCIIsvg aims to make
it possible for students to produce their own mathematical diagrams on
webpages.





Here is a description of the ASCIIsvg.js commands.




Acknowledgements: Many thanks to the numerous people who have
contributed to the excellent SVG
standard. Without such a
well designed standard, a project like this would be much more difficult.


Thanks to the volunteers who implemented SVG in Mozilla/Firefox.
Let's hope it will soon be available by default.


Thanks to Adobe for producing the superb
SVG viewer plugin and making it freely available.


Finally, thanks to the designers and implementors of JavaScript. All
these tools work together fairly seemlessly to allow us to generate
nice pictures on webpages in a convenient and inexpensive way.