# JSXGraph Commands

JSXGraph fills all my dynamic graphing needs.
This document is my attempt to thoroughly understand all its capabilities;
it is similar to my TeX Commands Available in MathJax document (JSXGraph and MathJax co-exist beautifully).

These web pages document version 0.83.
There may be differences with newer versions.

JSXGraph commands are listed alphabetically on these pages, each with a brief description and example.
The examples are typically high-school level mathematics;
some are contrived to illustrate particular features, and may not represent typical usage.
I have had to split this document into several pages; I obtained errors when there were too many boards on the same page.

GETTING STARTED:

• This ‘Getting Started’ information is summarized from How to Include JSXGraph into Web Pages.
• You need two files, which are available from the JSXGraph web site (top of the page).
Click on each link; select and copy the entire file; paste into a text document; save with the same name.
• To load these two files, insert the following code into the head of your HTML document, changing the file path as needed:
<script type="text/javascript" src="jsxgraphcore.js"></script>

• Making a JSXGraph construction appear in a web page typically has three parts.
The coloring should help to show related parts of the code:
1. Create a   div   element with an identifying   id   at the desired location in the HTML document;
this will hold the JSXGraph construction.
For example:
<div id="box" class="jxgbox" style="width:600px; height:300px;"></div>

Different   div   elements will have different IDs; you can have as many as needed (e.g., box1, box2, box3)
Set the height and width of the bounding box; add additional style information, as desired.
2. Create a JavaScript variable that initializes the construction with the desired axes, and tells where to put it:
<script type="text/javascript">
var board = JXG.JSXGraph.initBoard('box',{originX:50, originY:250, unitX:50, unitY:10, axis:true});
</script>

This JavaScript code is placed in the HTML body, anywhere after the   div   that it loads into.
originX’ is measured in pixels from the left edge of bounding box;
originY’ is measured in pixels from the top edge of bounding box.
unitX’ determines the number of pixels for one unit on the $x$-axis;
unitY’ determines the number of pixels for one unit on the $y$-axis.
axis:true’ causes the axes to be visible; the default value is:   axis:false
Regardless of axis visibility, placement of objects (e.g., plotting points) is done according to the axes set-up.
Board attributes are more fully discussed here.
3. Add different elements to the board, as desired.
For example, a point can be added with this JavaScript:
board.create('point',[1,5]);

NOTE: You should ‘free’ a board before re-initializing it (i.e., before using the   initBoard   command again).
This is like ‘erasing’ a board.
For example:   JXG.JSXGraph.freeBoard(board);

See the results of this sample code (and variations) by clicking the buttons below.
Be sure to ‘erase’ the board each time!
Additionally, you are encouraged to view the source code of this web page to see how things work.

 board = JXG.JSXGraph.freeBoard(board); board = JXG.JSXGraph.initBoard('box',{originX:50, originY:250, unitX:50, unitY:10, axis:true}); board.create('point',[1,5]); board = JXG.JSXGraph.initBoard('box',{originX:50, originY:250, unitX:50, unitY:10}); board.create('point',[1,5]); board = JXG.JSXGraph.initBoard('box',{originX:300, originY:150, unitX:100, unitY:1, axis:true}); board.create('point',[1,5]);

Click the buttons above to try out different sample codes.
Or, type in your own sample code below.
Each time, be sure to erase the board first.

 JXG.JSXGraph.freeBoard(board); board = JXG.JSXGraph.initBoard('box',{originX:100, originY:100, unitX:1, unitY:1, axis:true}); board.create('point',[50,50]); board.create('point',[100,50]);

# Alphabetical List of JSXGraph Commands

 A | B | C | D | E | F | G | H | I | J | K | L | M | N | O | P | Q | R | S | T | U | V | W | X | Y | Z
Also see:
Board Attributes
General JSXGraph Attributes

Unless otherwise indicated, all JSXGraph examples below use the following box and board:

<div id="box" style="width:200px; height:200px;"></div>

S
sector creates a sector of a circle
where:
• the first argument,  ptCenter , is the center of the circle
• the second argument,  ptRadius , is a point on the circle where the sector begins;
this defines the radius of the circle
• the third argument,  ptArc , is a point that defines where the sector ends;
the arc is drawn counterclockwise;
the arc ends at the intersection of the circle with the ray from  ptCenter  through  ptArc

Example:
 ptCen = board.create('point',[3,3],{name:'ptCenter'}); ptRad = board.create('point',[5,3],{name:'ptRadius'}); ptArc = board.create('point',[2,2],{name:'ptArc'}); board.create('sector',[ptCenter,ptRadius,ptArc]); Move any of the three points, and watch the sector change accordingly. yields
The JSXGraph Reference lists all possible attributes and methods for this element.
segment creates a line segment
board.create('segment',[ptStart,ptEnd]);
Example:
 ptStart = board.create('point',[0,0],{name:'ptStart'}); ptEnd = board.create('point',[5,5],{name:'ptEnd'}); board.create('segment',[ptStart,ptEnd]); board.create('segment',[ptStart,[2,4], {strokeColor:'green',strokeWidth:5,dash:1}); Move either point, and watch the segments change accordingly. When a point's coordinates are given explicitly, then the point is not shown. yields
The JSXGraph Reference lists all possible attributes and methods for this element.
semicircle creates a semicircle
board.create('semicircle',[ptStart,ptEnd]);
The midpoint of the segment from  ptStart  to  ptEnd  becomes the center of the circle;
the semicircle is then drawn clockwise from  ptStart  to  ptEnd .

Example:
 ptStart = board.create('point',[1,1],{name:'ptStart'}); ptEnd = board.create('point',[4,4],{name:'ptEnd'}); board.create('semicircle',[ptStart,ptEnd]); Move either point, and watch the semicircle change accordingly. yields
The JSXGraph Reference lists all possible attributes and methods for this element.
slider creates a slider, which allows a user to easily change numeric values
board.create('slider',[arrayPtStart,arrayPtEnd,[minValue,startValue,maxValue]);
The slider is positioned on the board from  arrayPtStart  (which corresponds to the minimum slider value,  minValue )
to  arrayPtEnd  (which corresponds to the maximum slider value,  maxValue ).
These first two arguments must be explicit arrays,
indicating the coordinates of the desired start point and end point for the slider position.
The slider's starting value is given by  startValue ,
which must be a value in the closed interval from  minValue  to  maxValue .

Examples:
 board.create('slider',[[1,3],[4,3],[0,4,10]],{snapWidth:1}); botSlider = board.create('slider',[[1,1],[4,1],[0,4,10]]); board.create('text',[1,5, function(){ num = botSlider.Value(); return '
the bottom slider value
is '+num.toFixed(3)+'
'}]); The snapWidth attribute can be used to control the increments between slider values; the default is to break the total range into 75 equal pieces. Compare the top slider behavior (with increment $\,1\,$ between slider values) with the bottom slider behavior (with the default increments of $\,\frac{10-0}{75} \approx 0.13\,$). yields
The JSXGraph Reference lists all possible attributes and methods for this element.
spline creates a cubic spline through a set of points;
this is a piecewise-cubic function, where the function values, first and second derivatives agree at the connecting points;
it provides a ‘least curvy’ way to smoothly connect points;
I believe the second derivative is zero at the endpoints, giving the so-called ‘natural’ cubic spline;
splines only exist ‘within’ their defining points
board.create('spline',[pt1,pt2,pt3,...]);
Example:
 pt1 = board.create('point',[1,1]); pt2 = board.create('point',[2,3]); pt3 = board.create('point',[3,2]); pt4 = board.create('point',[4,5]); board.create('spline',[pt1,pt2,pt3,pt4], {strokeColor:'green',strokeWidth:2}); board.create('spline',[[0,0],[1,0],[2,-0.8],[3,0],[4,1]],{dash:2}); polyInt = board.lagrangePolynomial([pt1,pt2,pt3,pt4]); board.create('functiongraph',polyInt,{dash:1,strokeColor:'red'}); Drag any of the points, and observe the smooth curve that results. When point coordinate(s) are given explicitly (as in the blue curve), then the points are not shown. The dashed red curve is a polynomial interpolate; it is the unique cubic polynomial that passes through the four points. Note how it ‘curves’ more than the cubic spline. yields
T
tangent creates the tangent line to a curve on a glider element;
first create the curve (using, say, functiongraph);
then create a glider point on the curve;
then create the tangent at the glider point
board.create('tangent',[theGlider]);
Examples:
 theFct = board.create('functiongraph', [function(t){return 2*Math.sin(t) + 3;}]); theGlider = board.create('glider',[theFct],{name:''}); board.create('tangent', [theGlider]); Drag the glider point and watch the tangent change accordingly. yields theCircle = board.create('circle',[[3,3],2]); theGlider = board.create('glider',[theCircle],{name:''}); boardtangent2.create('tangent',[theGlider]); Drag the glider point and watch the tangent change accordingly. yields
The JSXGraph Reference lists all possible attributes and methods for this element.
text creates text that can move (change position) or not move;
the text itself can be static (non-changing) or dynamic (changing);
you can use HTML/CSS styles on the text;
you can get proper mathematical notation using MathJax
board.create('text',[numxLeft,numyLower,stringText]);
where:
• the first two arguments give the $x$ and $y$ coordinates of the lower left corner of the text box;
the position of the text will not change if the coordinate(s) are numbers;
the position of the text can change if the coordinate(s) are functions
• the text to display is either a string, or a function that returns a string
• to use MathJax for proper mathematical notation, you must first include this line:
JXG.Options.text.useMathJax = true;
Then, the third argument must be a function that returns a valid MathJax string
Examples:

## Non-Moving Non-Changing Styled Text

board.create('text',[0,0,"Hello World!"]);
board.create('text',[1,1,"<em>Hello World</em>!"]);
board.create('text',[2,2,
"<span style='color:red;background-color:green;
yields

## Moving Non-Changing Text

theFct = board.create('functiongraph',
[function(t){return 0.5*t*t;}]);
theGlider = board.create('glider',[theFct],{name:''});
board.create('text',
[function(){return 0.5+theGlider.X()},
function(){return theGlider.Y()},
'moving text');
Move the glider to see the text move accordingly.
yields

## Non-Moving Changing Text

theSlider = board.create('slider',[[1,5],[4,5],[0,5,10]]);
board.create('text',[1,3,function(){
sqval = theSlider.Value()*theSlider.Value();
return 'slider value, squared,<br />
Change the slider and watch the text change accordingly.
yields

## Moving Changing Text

theFct = board.create('functiongraph',
[function(t){return 0.5*t*t;}]);
theGlider = board.create('glider',[theFct],{name:''});
board.create('text',
[function(){return 0.5+theGlider.X()},
function(){return theGlider.Y()},
function(){return 'function value
is '+theGlider.Y().toFixed(2);}]);
Drag the glider; watch the text move and change accordingly.
As a general rule, whenever you want something to update automatically while interacting with it on a JSXGraph board, then it must be coded as a function.
yields

## Using MathJax for Proper Mathematical Notation

JXG.Options.text.useMathJax = true;
theSlider = board.create('slider',[[1,5],[4,5],[0,2,5]],
{snapWidth:0.5});
board.create('functiongraph',
[function(t){return Math.pow(Math.E,t-k.Value());}]);
board.create('text',[1,6,
function(){
return '$f(x) = e^{x-'+theSlider.Value()+'}$';
}]);
Follow the instructions at MathJax to include the MathJax library in your document.
The first line above is required to enable the use of MathJax in JSXGraph.
Be sure that your code returns valid MathJax syntax (in this example, dollar signs are used to delineate MathJax code).
yields
The JSXGraph Reference lists all possible attributes and methods for this element.
transform creates transformations (translate, scale, reflect, rotate, shear, matrix transform) which can be applied to objects

## Basic Example

 thePt = board.create('point',[0,0],{name:''}); transform = board.create('transform',[2,1],{type:'translate'}); board.create('text',[.5,6, 'x-value is '+thePt.X()+' and y-value is '+thePt.Y()]); transform.applyOnce(thePt); board.create('text',[.5,5, 'x-value is '+thePt.X()+' and y-value is '+thePt.Y()]); transform.applyOnce(thePt); board.create('text',[.5,4, 'x-value is '+thePt.X()+' and y-value is '+thePt.Y()]); The initial position of the point is $\,(0,0)\,$ (top coordinates). After one application of the translation (right $2$, up $1$), the new coordinates are $\,(2,1)\,$. After a second application of the translation, the new coordinates are $\,(4,2)\,$. Note that applying a transformation to a point changes the coordinates of the point, and hence successive transformations are cumulative. yields

## Translate

Translating a point $\,(x,y)\,$ by $\,(a,b)\,$ yields the new point $\,(x+a,y+b)\,$.
For example, translating by $\,(1,2)\,$ moves an object to the right $\,1\,$ and up $\,2\,$.
For the horizontal direction: positive is to the right, negative is to the left.
For the vertical direction: positive is up, negative is down.
board.create('transform',[numLeftRight,numUpDown],{type:'translate'});
 Example: board.create('text',[1,6,'translate by:']); sliderx = board.create('slider',[[1,5],[4,5],[-2,1,2]], {snapWidth:1,name:'x'}); slidery = board.create('slider',[[1,4],[4,4],[-2,-1,2]], {snapWidth:1,name:'y'}); initialPt = board.create('point',[3,1],{name:'initial pt'}); transform = board.create('transform',[ function(){return sliderx.Value()}, function(){return slidery.Value()}], {type:'translate'}); board.create('point',[initialPt,transform],{name:'translated'}); Change the slider values to change the translation. Drag the initial point; watch the translated point follow. yields

## Scale

Scaling a point $\,(x,y)\,$ by $\,(a,b)\,$ yields the new point $\,(ax,by)\,$.
For example, scaling by $\,(2,3)\,$ doubles the $x$-value, and triples the $y$-value.
board.create('transform',[numHorFactor,numVerFactor],{type:'scale'});
 board.create('text',[1,6,'scale by:']); sliderx = board.create('slider',[[1,5],[4,5],[0,1.5,2]], {snapWidth:0.5,name:'  x'}); slidery = board.create('slider',[[1,4],[4,4],[-1,2.5,3]], {snapWidth:0.5,name:'  y'}); initialPt = board.create('point',[3,1],{name:'initial pt'}); transform = board.create('transform',[ function(){return sliderx.Value()}, function(){return slidery.Value()}], {type:'scale'}); board.create('point',[initialPt,transform],{name:'scaled'}); Change the slider values to change the scaling factors. Drag the initial point; watch the scaled point follow. yields

## Reflect

Reflection about a line treats the line as a mirror;
the reflection is the same (perpendicular) distance to the line, but on the opposite side.
board.create('transform',[line],{type:'reflect'});
or
board.create('transform',[x1,y1,x2,y2],{type:'reflect'});
 linePt1 = board.create('point',[0,0],{name:''}); linePt2 = board.create('point',[2,2],{name:''}); theLine = board.create('line',[linePt1,linePt2],{dash:1}); initialPt = board.create('point',[3,1],{name:'initial pt'}); transform = board.create('transform',[theLine],{type:'reflect'}); board.create('point',[initialPt,transform],{name:'reflection'}); Change the line and/or the initial point, and watch the reflection follow. yields

## Rotate

angles are in radian measure ($\pi$ radians is $180^{\circ}$);
positive angles are in a counter-clockwise direction
or
board.create('transform',[angle,x,y],{type:'rotate'});
 rotPt = board.create('point',[3,2],{name:'',face:'x'}); initPt = board.create('point',[4,2],{name:'initial pt'}); board.create('line',[rotPt,initPt], {dash:1,straightFirst:false}); slider = board.create('slider',[[1,5],[4,5],[-360,60,360]], {snapWidth:1,name:'  degrees
'}); transform = board.create('transform', [function(){return slider.Value()*Math.PI/180},rotPt], {type:'rotate'}); newPt = board.create('point',[initPt,transform],{name:'rotated'}); board.create('line',[rotPt,newPt], {dash:1,straightFirst:false,straightLast:false,strokeOpacity:0.3}); Note that the slider values (given in degrees) are converted to radian measure in the ‘transform’ command. Change the angle of rotation and/or the initial point, and watch the rotated point change. yields

## Shear

Shear changes only the $x$-value of a point; the $y$-value is unchanged.
A shear by angle $\,\theta\,$ of a point $\,(x,y)\,$ returns the new point $\,(x\tan\theta\,,\,y)\,$.
The angle in the ‘shear’ transform command must be given in radian measure.
Since $\,\tan45^{\circ} = 1\,$, a shear by $\,\pi/4 = 45^{\circ}\,$ preserves the original point.
board.create('transform',[angle],{type:'shear'});
 The box used for this example is $\,800\,$ pixels wide and $\,200\,$ pixels tall. JXG.Options.text.useMathJax = true; board = JXG.JSXGraph.initBoard('box', {originX:400, originY:175, unitX:2, unitY:2, axis:true,showNavigation:false,showCopyright:false}); slider = board.create('slider',[[10,70],[150,70],[-90,60,90]], {snapWidth:5,name:'  degrees
'}); P = board.create('point',[40,10],{name:'P'}); // the top vertex of the triangles aux = board.create('point',[0,function(){return P.X()+P.Y()}],{name:'',visible:false}); // the vertex at the right angle of the triangles aux2 = board.create('point',[0,function(){return P.Y()}],{visible:false}); // observe the double backslash needed for proper MathJax interpretation board.create('text',[-180,70,function(){ return 'shear $= P_x\\tan\\theta =$ ' +(Math.tan(slider.Value()*Math.PI/180)*P.X()).toFixed(2)}]); transform = board.create('transform',[function(){return slider.Value()*Math.PI/180}],{type:'shear'}); S = board.create('point',[P,transform],{name:'S'}); tri = board.create('polygon',[P,aux,aux2],{fillColor:'yellow'}); tri2 = board.create('polygon',[S,aux,aux2]); // the remaining code is for the small black triangle illustrating the shear angle new1 = board.create('point',[0,function(){return aux.Y()-20}],{visible:false}); new2 = board.create('point',[ function(){return 20*Math.sin(slider.Value()*Math.PI/180)}, function(){return aux.Y()-20*Math.cos(slider.Value()*Math.PI/180)}],{visible:false}); angle = board.create('polygon',[new2,aux,new1], {name:'',strokeColor:'black',fillColor:'black',fillOpacity:1}); Note that the slider values (given in degrees) are converted to radian measure in the ‘transform’ command. The black triangle illustrates the shear angle (i.e., the slider value). Change the shear angle (the slider), or move the initial point $\,P\,$ (keeping the $x$-value positive and sufficiently large), and watch the shear point $\,S\,$ change accordingly.

## Matrix Representations of Transformations

Rotation, Scaling, Shearing, and Reflection can be represented as $2\times 2$ matrices.
For example, the scaling $\,(x,y)\mapsto(ax,by)\,$ is represented by $$\begin{bmatrix} a & 0\cr 0 & b \end{bmatrix} \begin{bmatrix} x\cr y\end{bmatrix} = \begin{bmatrix} ax\cr by\end{bmatrix}$$ However, translation cannot be represented by a $\,2\times 2\,$ matrix, and instead requires the use of homogeneous coordinates
and a $\,3\times 3\,$ matrix.
Recall that in JSXGraph, the scaling factor is listed first, so the coordinate pair $\,(x,y)\,$ has homogeneous coordinates $\,(1,x,y)\,$. $$\begin{bmatrix} 1 & 0 & 0\cr a & 1 & 0\cr b & 0 & 1 \end{bmatrix} \begin{bmatrix} 1\cr x\cr y\end{bmatrix} = \begin{bmatrix} 1\cr x+a\cr y+b\end{bmatrix}$$ All the $\,2\times2\,$ transformation matrices can be used with homogeneous coordinates.
For example, scaling takes on the appearance shown below;
the original $\,2\times 2\,$ matrix is inserted in the lower-right corner of the $\,3\times 3\,$ identity matrix: $$\begin{bmatrix} 1 & 0 & 0\cr 0 & a & 0\cr 0 & 0 & b \end{bmatrix} \begin{bmatrix} 1\cr x\cr y\end{bmatrix} = \begin{bmatrix} 1\cr ax\cr by\end{bmatrix}$$ Thus, $\,3\times 3\,$ matrices $\begin{bmatrix} v_{11} & v_{12} & v_{13}\cr v_{21} & v_{22} & v_{23}\cr v_{31} & v_{32} & v_{33} \end{bmatrix} \,$, together with the use of homogeneous coordinates,
allow representations of all the standard transformations.
board.create('transform',[$v_{11},v_{12},v_{13},v_{21},\ldots,v_{33}$],{type:'generic'});
 The box used for this example is $\,800\,$ pixels wide and $\,200\,$ pixels tall. board = JXG.JSXGraph.initBoard('box',{originX:400, originY:175, unitX:20, unitY:20, axis:true,showNavigation:false,showCopyright:false}); initialPt = board.create('point',[4,3],{name:'initial pt'}); translate = board.create('transform',[1,0,0,2,1,0,3,0,1],{type:'generic'}); board.create('point',[initialPt,translate],{name:'translate
by (2,3)'}); reflectY = board.create('transform',[1,0,0,0,-1,0,0,0,1],{type:'generic'}); board.create('point',[initialPt,reflectY],{name:'reflect
about $y$-axis'}); scale = board.create('transform',[1,0,0,0,3,0,0,0,2],{type:'generic'}); board.create('point',[initialPt,scale],{name:'triple $x$,
double $y$'}); Move the initial point, and watch all the transformations change accordingly.

## Combining Transformations; Binding a Transformation to a Point

firstTransf.melt(secondTransf)
This creates a two-step transformation:
• firstTransf   acts first
• secondTransf   acts second
• the resulting two-step transformation is stored back in   firstTransf
(and hence  firstTransf  is changed)
transf.bindTo(point)
• transf   is applied to   point
• the resulting coordinates are stored back in   point
(and hence  point  is changed)
 The box used for this example is $\,800\,$ pixels wide and $\,200\,$ pixels tall. board = JXG.JSXGraph.initBoard('box',{originX:400, originY:175, unitX:20, unitY:20, axis:true,showNavigation:false,showCopyright:false}); initialPt = board.create('point',[4,3],{name:'initial pt'}); translate = board.create('transform',[2,3],{type:'translate'}); reflectY = board.create('transform',[1,0,0,0,-1,0,0,0,1],{type:'generic'}); translate.melt(reflectY); // this changes the 'translate' transformation board.create('point',[initialPt,translate],{name:'translate,
then reflect'}); translate2 = board.create('transform',[2,3],{type:'translate'}); reflectY2 = board.create('transform',[1,0,0,0,-1,0,0,0,1],{type:'generic'}); reflectY2.melt(translate2); // this changes the 'reflectY2' transformation board.create('point',[initialPt,reflectY2],{name:'reflect,
then translate'}); startPt = board.create('point',[10,2], {strokeColor:'purple',fillColor:'purple',name:'show bindTo operation'}); translate3 = board.create('transform',[5,1],{type:'translate'}); reflectY3 = board.create('transform',[1,0,0,0,-1,0,0,0,1],{type:'generic'}); translate3.bindTo(startPt); // (10,2) --> (10+5,2+1) = (15,3); startPt has changed reflectY3.bindTo(startPt); // (15,3) --> (-15,3); startPt has changed again board.update(); // must update board to see changes Move the initial point, and watch the transformations change accordingly.
The JSXGraph Reference Card lists all possible attributes and methods for this element.
turtle A ‘turtle’ is a triangle with moves that can be specified in the $xy$-plane;
it can leave a trail of its path
board.create('turtle',[xStart,yStart,startDirection]);
The first two arguments give the starting position of the turtle;
the optional third coordinate gives the direction, in degrees, counterclockwise, from the positive $x$-axis.

Examples:
turtle1 = board.create('turtle');
turtle2 = board.create('turtle',[2,2,135]);
The default values are position $(0,0)$ and angle $90^{\circ}$
(i.e., pointing in the positive $y$-direction).
Notice that a turtle is fixed; it cannot be dragged.
yields

## Basic Turtle Movements

turtle = board.create('turtle',[1,1]);
turtle.forward(2);
turtle.right(90);
turtle.fd(2);
turtle.setPenColor('green');
turtle.left(90);
turtle.back(2);
turtle.rt(90);
turtle.setPenSize(3);
turtle.bk(1);
turtle3.lt(90);
turtle3.penUp(); turtle3.fd(1); turtle3.penDown();
turtle3.setPenColor('#FF0000');
turtle3.moveTo([5,5]);
Make sure you can follow these movements;
note that ‘forward’ can be abbreviated as ‘fd’,
‘back’ as ‘bk’, ‘right’ as ‘rt’, and ‘left’ as ‘lt’.
Picking the pen up stops path-tracing;
putting the pen down starts path-tracing.
yields

t = board.create('turtle');
t.hideTurtle();
t.lookTo([2,5]); // point in a specified direction
t.forward(3);
t.lookTo([5,0]);
t.forward(3);
t.setPos(2,5);
t.forward(3);
Point in a certain direction using the  lookTo(pt)  method.
Jump to a specified position (without tracing the path) with the  setPos(x,y)  method.