View source for Turtle Graphics

This is a very basic implementation of turtle graphics in JavaScript with [http://jsxgraph.org JSXGraph]. 
[http://u2d.com/turtle_js/index.html CanvasTurtle] does the same on browsers which support the ''canvas'' element.

* [[List of available commands]]

===Snowflake and Branches Example===
<html>
<form><textarea id="input1" rows=7 cols=35 wrap="off" style="width:300px; float:left;">
function side(size, level) {
    if (level==0) {
        t.fd(size);
        return;
    }
    side(size/3, level-1);
    t.lt(60);
    side(size/3, level-1);
    t.rt(120);
    side(size/3, level-1);
    t.lt(60);
    side(size/3, level-1);
}

function snowflake(size, level) {
    for (var i=0;i<3;i++) {
        side(size, level);
        t.rt(120);
    };
}

t.clearScreen();
t.hideTurtle();
t.setPenSize(1)
t.setPenColor("#000000")
t.lt(30);
t.setPos(0,-100);
snowflake(250, 4);
</textarea>
<textarea id="input2" rows=7 cols=35 wrap="off" style="width:300px">
function branch(length, level)
{
    if(level == 0) return
    t.fd(length)
    t.lt(45)
    branch(length/2, level-1)
    t.rt(90)
    branch(length/2, level-1)
    t.lt(45)
    t.bk(length)
}

function lbranch(length, angle, level)
{
    t.fd(2*length)
    node(length, angle, level)
    t.bk(2*length)
}
function rbranch(length, angle, level)
{
    t.fd(length)
    node(length, angle, level)
    t.bk(length)
}

function node(length, angle, level)
{
    if (level == 0) return;
    t.lt(angle)
    lbranch(length, angle, level -1)
    t.rt(2*angle)
    rbranch(length, angle, level-1)
    t.lt(angle)
}

t.clearScreen()
t.hideTurtle();
//branch(100,6)

t.setPenSize(5)
t.setPenColor("#008800")
t.setPos(30, -150)
lbranch(25, 20, 7)
</textarea><br />
<input type="button" value="run example 1" onClick="run(1)"> 
<input type="button" value="run example 2" onClick="run(2)"> 
</form>
</html>
<jsxgraph width="600" height="600" box="box">
var brd = JXG.JSXGraph.initBoard('box', {boundingbox: [-300, 300, 300, -300]});
var t = brd.create('turtle');
function run(nr) {
  brd.suspendUpdate();
  eval(document.getElementById('input'+nr).value);
  brd.unsuspendUpdate();
}
</jsxgraph>

===References===
* The snowflake and branches example have been adapted from the excellent [http://u2d.com/turtle_js/index.html CanvasTurtle]

===The turtle graphics code===
<source lang="html4strict">
<form><textarea id="input1" rows=7 cols=35 wrap="off" style="width:300px; float:left;">
turtle code...
</textarea>
<input type="button" value="run example 1" onClick="run(1)"> 
</source>

<source lang="javascript">
var brd = JXG.JSXGraph.initBoard('box', {boundingbox: [-300, 300, 300, -300]});
var t = brd.create('turtle');

function run(nr) {
  brd.suspendUpdate();
  eval($('input'+nr).value);
  brd.unsuspendUpdate();
}
</source>

[[Category:Examples]]
[[Category:Turtle Graphics]]
[[Category:Fractals]]