Turtle Graphics

This is a very basic implementation of turtle graphics in JavaScript with JSXGraph. CanvasTurtle does the same on browsers which support the canvas element.

• List of available commands

Snowflake and Branches Example

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); 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)

References

• The snowflake and branches example have been adapted from the excellent CanvasTurtle

The turtle graphics code

<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)"> 
<jsxgraph width="600" height="600" box="box0">

var brd = JXG.JSXGraph.initBoard('box', {originX: 300, originY: 300, unitX: 1, unitY: 1});
var t = brd.create('turtle');

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