topical media & game development

talk show tell print

sample-js-asciisvg.htm / htm



  <html>
  

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>
  

body / onload = draw


  <body bgcolor="navajowhite" onload="drawPictures()">
  <center>
  | <a href="http://www.chapman.edu/~jipsen/svg/asciisvg.html">
  Home</a> |
  <a href="http://www.chapman.edu/~jipsen/svg/asciisvgcommands.html">
  
  Commands</a> |
  <b>ASCIIsvg Editor 1.0</b> |
  <a href="http://math.chapman.edu/cgi-bin/math.pl?ASCIIsvg_Gallery">
  Gallery</a> |
  <a href="http://www.chapman.edu/~jipsen/svg/asciisvgdownload">
  Download</a> |
  <a href="http://math.chapman.edu/cgi-bin/math.pl?ASCIIsvg_FAQ">
  FAQ</a> |
  
  <!--a href="http://math.chapman.edu/cgi-bin/math.pl?ASCIIsvg_Sandbox">
  Sandbox</a> |-->
  <a href="http://math.chapman.edu/cgi-bin/math.pl?ASCIIsvg_Comments_and_Suggestions">Comments</a> |
  <a href="http://www.chapman.edu/~jipsen/asciimath.html">
  ASCIIMathML</a> |
  </center>
  

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>&#x00A0;
  <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}} ) &nbsp; &nbsp; </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/>
  
  

author info


  
  <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>
  
  </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.