Brief descriptions of the ASCIIsvg commands and some examples follow below.   Optional arguments are enclosed in braces, { }.

 

ShowMe

Start here -  This example demonstrates and explains the very basic, default graph and its coding.

Graph Example Code Example

{gg width=300; height=300; xmin=-5; xmax=5; xscl=1; axes(); nobutton(); plot("(1/2)x+1"); gg}

 


In edit mode, clicking on the ASCIIsvg-graph button Attach:KSMath/ASCIIsvg.gif Δ, will produce this default code, all of which can be modified to fit your particular needs.

 

  • width and height
    Define the dimensions of the whole graph itself.

 

  • xmin and xmax
    (Immediately following width and height) define the working area of the graph. This is not to be confused with the domain of a particular function, that will be explained later.

 

  • xscl  
    Defines the scale of the x-axis.  In this example, each tick mark represents 1 unit, thus a scale of 1 to 1.  If you want each tick mark to represent 5 units of measure, change it to read xscl=5.

 

  • axes()  
    This must remain unchanged!  If deleted, nothing will be drawn onscreen and the user will get an error message.

 

  • nobutton()  
    This probably needs to remain as is.  This command prevents an "editing" window to be included.  This editing window has its purpose (I'll demonstrate later), but you generally will not want it to show in your pages.
    In later examples, the nobutton() command will not be used and you'll be given the opportunity to edit parameters and see the effect of each change.

 

  • plot( )  
    This is where functions are defined.  Change the function definition to fit your needs.  Functions can be polynomial, trigonometric, or polar.  As in this example, functions must be contained within quotations and x must be used as the variable.

 

ShowMe

Plotting Points -  This example demonstrates plotting points, using color, open or closed dots.

Graph Example Code Example

{gg width=300; height=300; xmin=-6; xmax=6; xscl=1; axes(); stroke="red"; dot([-3,-3],"open"); dot([-2,-2],"closed"); stroke="green"; dot([0,0],"closed"); stroke="blue"; dot([2,2],"closed"); dot([3,3],"open"); gg}


dot([x-coor, y-coor], "open or closed")
Notice, to change the color of a point, you must issue the stroke = command before you draw the point.

 

Click on the "Show / Hide" button, to try it your self.

 

ShowMe

A Number Line -  This example demonstrates the creation of a number line.

Graph Example Code Example

{gg width=300; height=50; gridstroke="white"; xmin=-1.5; xmax=10.5; xscl=1; yscl=4; showbutton(); axes(); strokewidth="2"; endpoints="<-o"; a=[-1,0]; b=[7,0]; line(a,b); gg}


dot([x-coor, y-coor], "open or closed")
Notice, to change the color of a point, you must issue the stroke = command before you draw the point.

 

Click on the "Show / Hide" button, to try it your self.

 

 

 

ShowMe

Draw a Ray or a Line -  This example demonstrates drawing a ray or a line (with arrows on the end points).

Graph Example Code Example

{gg width=300; height=300; xmin=-6; xmax=6; xscl=1; axes(); stroke="green"; endpoints="<->"; line([-4,-3],[3,4]); stroke="blue"; endpoints="*->"; line([4,-2],[-5,4]); gg}


 

line([ x_1 , y_1 ], [ x_2 , y_2 ])

 

 

Click on the "Show / Hide" button, to try it your self.

 

ShowMe

Draw a Circle -  This example demonstrates drawing a circle.

Graph Example Code Example

{gg width=300; height=300; xmin=-6; xmax=6; xscl=1; axes(); stroke="green"; circle([-2,0],2); stroke="blue"; strokewidth=5; circle([-2,0],3); stroke="red"; strokewidth=3; fill="yellow"; circle([2,2],2); gg}


 

circle([x-coor, y-coor], radius)

 

The circle command requires the coordinate of the center point and a radius length.  

 

Notice, if the circles overlap, the last one drawn is the one that gets placed on top.

 

Click on the "Show / Hide" button, to try it your self.

 

 

ShowMe

Draw an Ellipse -  This example demonstrates drawing an ellipse.

Graph Example Code Example

{gg width=300; height=300; xmin=-6; xmax=6; xscl=1; axes(); stroke="blue"; strokewidth=5; ellipse([-3.5,0],2,4); stroke="red"; strokewidth=3; fill="green"; ellipse([1,4],4,0.5); gg}


 

ellipse([x-coor, y-coor], r_x , r_y )

 

The ellipse command requires the coordinate of the center point, a horizontal radius ( r_x ), and a vertical radius ( r_y ).  

 

Click on the "Show / Hide" button, to try it your self.

 

ShowMe

Draw a Rectangle -  This example demonstrates drawing a rectangle with the rect() command.

Graph Example Code Example

{gg width=300; height=300; xmin=-6; xmax=6; xscl=1; axes(); stroke="blue"; strokewidth=3; fill="red"; rect([-4,-4],[-2,4]); stroke="red"; strokewidth=1; fill="green"; rect([-5,-1],[5,1]); gg}


 

rect([ x_1 , y_1 ], [ x_2 , y_2 ])

 

The rect (rectangle) command requires the coordinates of the bottom left corner and then the top right corner.  

 

If a rotated rectangle is needed, it must be drawn with the path command.  This will be shown next.

 

Click on the "Show / Hide" button, to try it your self.

 

ShowMe

Draw a Polygon -  This example demonstrates drawing a rectangle (any polygon), using the path() command.

Graph Example Code Example

{gg width=300; height=300; xmin=-6; xmax=6; xscl=1; axes(); a=[-2,-4]; b=[-4,-2]; c=[0,0]; d=[2,-2]; e=[-4,2]; f=[0,4]; g=[3,3]; stroke="blue"; strokewidth=3; fill="red"; path([a,b,c,d,a]); gg}


 

path([ P_1 , P_2 , P_3 . . . P_n ])

 

The path command requires points to draw between.

 

If the figure is to be a closed figure, then the starting point and ending point must be the same.  

 

Note 1:  Points may be declared (created), before they are used in the path command or the coordinates may be entered directly in the command itself.

 

Note 2:  If a point is to be used in more than one figure, it is more efficient to declare them independently as shown here.

 

Click on the "Show / Hide" button, to try it your self.

 

ShowMe

Axis, Grids & Labels -  This example demonstrates working with the axes() command to change the grid lines and labels.

Graph Example Code Example

{gg width=300; height=300; xmin=-6; xmax=6; axes(2, 3, "labels", 2, 3); stroke="red"; strokewidth=2; plot("0.2x^4-x^3+3x-3",-2.2,4.7,null,null,"<->"); gg}


 

axes( n_1 , n_2 , "labels", n_3 , n_4 )

 

The axes command can be used to adjust the label spacing and the gridlines.

 

n_1 - adjusts the labels of the x-axis.

 

n_2 - adjusts the labels of the y-axis.

 

n_3 - adjusts gridlines perpendicular to the x-axis.

 

n_4 - adjusts gridlines perpendicular to the y-axis.

 

Click on the "Show / Hide" button, changing these values to see how they work.

 

ShowMe

Arcs & Sectors -  This example demonstrates drawing arcs and circle sectors.

Graph Example Code Example

{gg width=300; height=300; xmin=-6; xmax=6; xscl=1; axes(); stroke="green"; strokewidth=2; arc([0,3],[-3,0],3); stroke="blue"; strokewidth=3; arc([-4,0],[4,0],4); stroke="red"; strokewidth=0; fill="yellow"; a=[0,0]; b=[5,0]; c=[0,5]; path([a,b,c,a]); strokewidth=3; arc([5,0],[0,5],5); gg}


 

arc([ x_1 , y_1 ], [ x_2 , y_2 ], radius)

 

The arc command draws counter-clockwise from the two points, ( x_1, y_1 ) and ( x_2, y_2 ) , along the circle of the given radius.

 

As of this writing, there is no sector command.  A filled sector must be built with a triangle (path command), and an arc.

 

 

Click on the "Show / Hide" button, to try it your self.

 

 

 

 

 

 

 

 

 

 

ShowMe

Text -  This example demonstrates the placement of text throughout the graph area.

Graph Example Code Example

{gg width=300; height=300; xmin=-6; xmax=6; axes(7, 7, "labels", 6, 6); stroke="red"; strokewidth=2; fill="lightgreen"; ellipse([0,0],5,3); text([0,1], "ASCIIsvg is the coolest thing"); text([0,-1], "since peanut butter!"); text([4,5], "Quadrant I"); text([-4,5], "Quadrant II"); text([-4,-5], "Quadrant III"); text([4,-5], "Quadrant V"); gg}


 

text([ x , y ], "Your text")

 

The text command only requires a coordinate (of the center), and the text (label).

 

 

Click on the "Show / Hide" button, to see how they work.

 

 

ShowMe

3D Rectangular Prism -  This example demonstrates the creation of a (psuedo) 3D rectangular prism.

Graph Example Code Example

(:graph width=300; height=300; xmin=0; xmax=10; xscl=1; ymin=-1; ymax=10; noaxes(); stroke="blue"; strokewidth=2; a=[2,1]; b=[5,0]; c=[5,4]; d=[2,5]; e=[9,3]; f=[9,7]; g=[6,8]; h=[6,4]; fillopacity=0.5; fill="yellow"; path([a,d,g,h,a]); path([h,e,f,g,h]); path([a,b,c,d,a]); fill="orange"; path([b,c,f,e,b]); text([8,8],"w"); text([9.5,4.5], "h"); text([4,7.5],"l") :)


 

I actually drew this out on paper first, labeling and naming my points there.  It is important to be very organized when doing something like this.

 

In the script, notice I created my points first, then used them in the path command.  One path command per each side of the prism.  The side that appears to be closest to you is created last so that it gets drawn on the top layer.

 

 

+++++++++++++++++++++

 

ShowMe

All Commands -  See all available commands (not examples), though presented in a slightly more technical fashion.

List of ASCIIsvg commands

 

Optional arguments are enclosed in braces {...}. Points are specified by coordinates, e.g. p=(1,2) (or p=[1,2] if JavaScript syntax is preferred). Commands on the same line MUST be separated by semicolons (none are needed at end of line).

 

Basic commands

 

width=300; height=200 gives the dimensions of the graph in pixels

 

xmin=-5.5; xmax=5.5; xscl=dx gives range of x-axis and distance between ticks. If xscl is given, a grid is also drawn.

 

ymin=c; ymax=d; yscl=dy gives range of y-axis. If ymin is omitted, x-axis is centered vertically. If ymax is omitted, the scale on both axes is chosen the same.

 

axes({dx,dy,labels,gdx,gdy}) this command is required, usually in the form axes()

 

line(p,q {,id,endpts}) line segment connecting points p,q (coordinates in units). The id value can be any string that is added as identifier to this svg element. If the command is repeated with the same id, the element is updated (instead of creating a new element). This is only useful for interactive graphs. For the endpts parameter see the endpoints variable below.

 

path([p1,p2,...,pn] {,id,c,endpts}) connect points p1,p2,... by straight lines

 

plot(f(x) {,x_min,x_max,points,id,endpts}) plot a function of "x" as "x" ranges from x_min to x_max, using the given number of points (default points = 200)

 

plot([f(t),g(t)],t_min,t_max {,points,id,endpts}) parametric plot of pair of functions. Must use parameter "t".

 

rect(p,q {,id,rx,ry}) draw a rectangle with opposite corners at p,q and rounded by radii rx,ry

 

circle(center,radius {,id}) draw a circle

 

point(center {, typ, label, pos, id})

 

dot(center {, typ, label, pos, id}) alternative name for the point command

 

text(p,st {,pos,id,fontsty}) write string st at point p

 

Further commands

 

curve(plist,id,endpts) is equivalent to path(plist,id,"T",endpts)

 

loop(p,d {,id}) draw a small loop a point p in direction d (for directed graphs, i.e. networks)

 

vector(p,q {,id}) is equivalent to line(p,q,id,"","->")

 

arc(start,end,radius,id) draw a circular arc from start point to end point, with given radius

 

sector(center,start,end {,id}) draw a sector with the given three points

 

ellipse(center,rx,ry {,id}) draw an ellipse with x-radius rx and y-radius ry

 

triangle(p,q,r {,id}) is equivalent to path([p,q,r,p],id)

 

Additional settings and commands

 

showcode() show the ASCIIsvg code in a textarea above the graph

 

showbutton() put a show/hide button above the graph that can be used to locally edit the ASCIIsvg code and update the graph

 

nobutton() current default. This deprecated command remains for backward compatibility.

 

Variables that can be changed before individual commands, together with their default values

 

border = 0 in pixel, reduces the graph so that an area of this width is visible around the graph. This setting must appear before the axes() command.

 

strokewidth = "1" line width in pixel

 

stroke = "blue" line color

 

strokeopacity = 1 transparent = 0, solid =1

 

strokedasharray = null e.g. "10 10" gives 10px long dashes

 

fill = "none" fill color

 

fillopacity = 1 transparent = 0, solid =1

 

fontstyle = "normal" text shape normal|italic|inherit

 

fontfamily = "times" font times|ariel|helvetica|...

 

fontsize = "16" size (scaled automatically)

 

fontweight = "normal" normal|bold|bolder|lighter|100|...|900

 

fontstroke = "none" font outline color

 

fontfill = "none" font color

 

marker = "none" place a mark at each point of a line, path or curve. Possible values "none" | "dot" | "arrow" | "+" | "-" | "|".

 

endpoints = "" 3-character string determines the endpoints of a line, path or curve. The form is "c-d" where c is <|o|* and d is >|o|*  e.g. "<->" means arrow at both ends, *-o means closed dot on start point, open circle on end point.

 

Global variables used for all pictures, and their default values

 

showcoordinates = true  decide if mouse coordinates should show in bottom right corner

 

markerstrokewidth = "1"  line width for markers

 

markerstroke = "black"  line color for markers

 

markerfill = "yellow"  fill color for markers

 

markersize = 4  radius in pixels for marker dots

 

arrowfill = stroke  arrows are filled with the same color as lines  

 

dotradius = 4  radius in pixels for dots and points

 

ticklength = 4  length of the ticks marked on the axes

 

axesstroke = "black"  color of the axes

 

gridstroke = "grey"  color of the grid lines

 

backgroundstyle = "fill-opacity:0; fill:white"  style of the background rectangle

 

singlelettersitalic = true  decides if single letter labels should show in italics (usually true for math variables)

 

Less often used commands and to do list

 

switchTo(id) select the nth picture that should be the target of subsequent commands, e.g. switchTo(3) or switchTo("picture3")

 

arrowhead(p,q) draw arrowhead pointing from p ending at q (need to add a size param)

 

ASdot(center,radius,stroke,fill) draw a circle with radius in pixel (used for markers)

 

grid(dx,dy) for backward compatibility, equivalent to axes(dx,dy,null,dx,dy)

 

noaxes() to remove the axes

 

polarplot(...) not yet implemented

 

approximateintegral(...) not yet implemented

 

slopefield(fun,dx,dy) draw a slopefield

 

image(imgurl,p,w,h,id) not working yet, perhaps some problem with attribute namespaces; try layers instead

 

 


Page last modified on September 22, 2007, at 01:19 PM