Difference between revisions of "Turtle Graphics"

From JSXGraph Wiki
Jump to navigationJump to search
Line 24: Line 24:
 
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script>
 
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script>
 
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
 
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
 +
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/~alfred/jsxgraph/branches/0.70/src/jsxturtle.js"></script>
 
<form><textarea id="input1" rows=7 cols=35 wrap="off" style="width:300px; float:left;">
 
<form><textarea id="input1" rows=7 cols=35 wrap="off" style="width:300px; float:left;">
 
function side(size, level) {
 
function side(size, level) {
Line 104: Line 105:
 
<div id="box" class="jxgbox" style="width:600px; height:600px;"></div>
 
<div id="box" class="jxgbox" style="width:600px; height:600px;"></div>
 
<script language="JavaScript">
 
<script language="JavaScript">
            var turtleObj = function(board,attributes) {
+
var brd = JXG.JSXGraph.initBoard('box', {originX: 300, originY: 300, unitX: 1, unitY: 1});
                this.turtleIsHidden = false;
+
var t = new JSXTurtleObj(brd);
                this.board = board;
 
                if (attributes==null) {
 
                    this.attributes = {
 
                        strokeColor:'#000000'
 
                    };
 
                } else {
 
                    this.attributes = attributes;
 
                }
 
                this.attributes.straightFirst = false;
 
                this.attributes.straightLast = false;
 
                this.init();
 
            };
 
 
 
            turtleObj.prototype.init = function() {
 
                this.pos = [0,0];
 
                this.isPenDown = true;
 
                this.dir = 90;
 
                this.attributes.curveType = 'plot';
 
                this.curve = this.board.createElement('curve',
 
                      [[this.pos[0]],[this.pos[1]]],this.attributes);
 
 
 
                this.turtle = this.board.createElement('point',this.pos,{fixed:true,name:' ',visible:false});
 
                this.turtle2 = this.board.createElement('point',[this.pos[0],this.pos[1]+20],{fixed:true,name:' ',visible:false});
 
                this.arrow = this.board.createElement('line',[this.turtle,this.turtle2],
 
                        {lastArrow:true,strokeColor:'#ff0000',straightFirst:false,straightLast:false});
 
            }
 
 
 
            turtleObj.prototype.forward = function(len) {
 
                if (len==0) { return; }
 
                var dx = -len*Math.cos(this.dir*Math.PI/180.0);
 
                var dy = len*Math.sin(this.dir*Math.PI/180.0);
 
                if (!this.turtleIsHidden) {
 
                    var t = this.board.createElement('transform', [dx,dy], {type:'translate'});
 
                    t.applyOnce(this.turtle);
 
                    t.applyOnce(this.turtle2);
 
                }
 
                if (this.isPenDown) if (this.curve.dataX.length>=8192) {
 
                    // IE workaround
 
                    this.curve = this.board.createElement('curve',
 
                          [[this.pos[0]],[this.pos[1]]],this.attributes);
 
                }
 
                this.pos[0] += dx;
 
                this.pos[1] += dy;
 
                if (this.isPenDown) {
 
                    this.curve.dataX.push(this.pos[0]);
 
                    this.curve.dataY.push(this.pos[1]);
 
                }
 
            };
 
           
 
            turtleObj.prototype.back = function(len) {
 
                this.forward(-len);
 
            }
 
           
 
            turtleObj.prototype.right = function(angle) {
 
                this.dir += angle;
 
                if (!this.turtleIsHidden) {
 
                    var t = this.board.createElement('transform', [-angle*Math.PI/180.0,this.turtle], {type:'rotate'});
 
                    t.applyOnce(this.turtle2);
 
                }
 
            }
 
           
 
            turtleObj.prototype.left = function(angle) {
 
                this.right(-angle);
 
            }
 
           
 
            turtleObj.prototype.penUp = function() {
 
                this.isPenDown = false;
 
            }
 
           
 
            turtleObj.prototype.penDown = function() {
 
                this.isPenDown = true;
 
                this.curve = this.board.createElement('curve',
 
                              [[this.pos[0]],[this.pos[1]]],this.attributes);
 
            }
 
 
 
            turtleObj.prototype.clean = function() {
 
                for(var el in this.board.objects) {
 
                    if (this.board.objects[el].type==JXG.OBJECT_TYPE_CURVE) {
 
                        this.board.removeObject(el);
 
                    }
 
                }
 
            }
 
 
 
            turtleObj.prototype.clearScreen = function() {
 
                for(var el in this.board.objects) {
 
                    this.board.removeObject(el);
 
                }
 
                this.init();
 
            }
 
 
 
            turtleObj.prototype.setPos = function(x,y) {
 
                this.pos = [x,y];
 
                if (!this.turtleIsHidden) {
 
                    this.turtle.setPositionDirectly(JXG.COORDS_BY_USER,x,y);
 
                    this.turtle2.setPositionDirectly(JXG.COORDS_BY_USER,x,y+20);
 
                    var t = this.board.createElement('transform',
 
                          [-(this.dir-90)*Math.PI/180.0,this.turtle], {type:'rotate'});
 
                    t.applyOnce(this.turtle2);
 
                }
 
                this.curve = this.board.createElement('curve',
 
                              [[this.pos[0]],[this.pos[1]]],this.attributes);
 
            }
 
 
 
            turtleObj.prototype.setPenSize = function(size) {
 
                this.attributes.strokeWidth = size;
 
                this.curve = this.board.createElement('curve',
 
                              [[this.pos[0]],[this.pos[1]]],this.attributes);
 
            };
 
 
 
            turtleObj.prototype.setPenColor = function(colStr) {
 
                this.attributes.strokeColor = colStr;
 
                this.curve = this.board.createElement('curve',
 
                              [[this.pos[0]],[this.pos[1]]],this.attributes);
 
            };
 
 
 
            turtleObj.prototype.showTurtle = function() {
 
                this.turtleIsHidden = false;
 
                this.arrow.setProperty('visible:true');
 
                this.setPos(this.pos[0],this.pos[1]);
 
            };
 
 
 
            turtleObj.prototype.hideTurtle = function() {
 
                this.turtleIsHidden = true;
 
                this.arrow.setProperty('visible:false');
 
                this.setPos(this.pos[0],this.pos[1]);
 
            };
 
 
 
            turtleObj.prototype.home= function() {
 
                this.pos = [0,0];
 
                this.setPos(this.pos[0],this.pos[1]);
 
            };
 
 
 
            turtleObj.prototype.fd = function(len) { this.forward(len); };
 
            turtleObj.prototype.bk = function(len) { this.back(len); };
 
            turtleObj.prototype.lt = function(angle) { this.left(angle); };
 
            turtleObj.prototype.rt = function(angle) { this.right(angle); };
 
            turtleObj.prototype.pu = function() { this.penUp(); };
 
            turtleObj.prototype.pd = function() { this.penDown(); };
 
            turtleObj.prototype.ht = function() { this.hideTurtle(); };
 
            turtleObj.prototype.st = function() { this.showTurtle(); };
 
            turtleObj.prototype.cs = function() { this.clearScreen(); };
 
 
 
            var brd = JXG.JSXGraph.initBoard('box', {originX: 300, originY: 300, unitX: 1, unitY: 1});
 
            var t = new turtleObj(brd);
 
 
 
 
function run(nr) {
 
function run(nr) {
 
   brd.suspendUpdate();
 
   brd.suspendUpdate();
Line 271: Line 127:
  
 
<source lang="javascript">
 
<source lang="javascript">
            var turtleObj = function(board,attributes) {
+
var brd = JXG.JSXGraph.initBoard('box', {originX: 300, originY: 300, unitX: 1, unitY: 1});
                this.turtleIsHidden = false;
+
var t = new turtleObj(brd);
                this.board = board;
 
                if (attributes==null) {
 
                    this.attributes = {
 
                        strokeColor:'#000000'
 
                    };
 
                } else {
 
                    this.attributes = attributes;
 
                }
 
                this.attributes.straightFirst = false;
 
                this.attributes.straightLast = false;
 
                this.init();
 
            };
 
 
 
            turtleObj.prototype.init = function() {
 
                this.pos = [0,0];
 
                this.isPenDown = true;
 
                this.dir = 90;
 
                this.attributes.curveType = 'plot';
 
                this.curve = this.board.createElement('curve',
 
                      [[this.pos[0]],[this.pos[1]]],this.attributes);
 
 
 
                this.turtle = this.board.createElement('point',this.pos,{fixed:true,name:' ',visible:false});
 
                this.turtle2 = this.board.createElement('point',[this.pos[0],this.pos[1]+20],{fixed:true,name:' ',visible:false});
 
                this.arrow = this.board.createElement('line',[this.turtle,this.turtle2],
 
                        {lastArrow:true,strokeColor:'#ff0000',straightFirst:false,straightLast:false});
 
            }
 
 
 
            turtleObj.prototype.forward = function(len) {
 
                if (len==0) { return; }
 
                var dx = -len*Math.cos(this.dir*Math.PI/180.0);
 
                var dy = len*Math.sin(this.dir*Math.PI/180.0);
 
                if (!this.turtleIsHidden) {
 
                    var t = this.board.createElement('transform', [dx,dy], {type:'translate'});
 
                    t.applyOnce(this.turtle);
 
                    t.applyOnce(this.turtle2);
 
                }
 
                if (this.isPenDown) if (this.curve.dataX.length>=8192) {
 
                    // IE workaround
 
                    this.curve = this.board.createElement('curve',
 
                          [[this.pos[0]],[this.pos[1]]],this.attributes);
 
                }
 
                this.pos[0] += dx;
 
                this.pos[1] += dy;
 
                if (this.isPenDown) {
 
                    this.curve.dataX.push(this.pos[0]);
 
                    this.curve.dataY.push(this.pos[1]);
 
                }
 
            };
 
           
 
            turtleObj.prototype.back = function(len) {
 
                this.forward(-len);
 
            }
 
           
 
            turtleObj.prototype.right = function(angle) {
 
                this.dir += angle;
 
                if (!this.turtleIsHidden) {
 
                    var t = this.board.createElement('transform', [-angle*Math.PI/180.0,this.turtle], {type:'rotate'});
 
                    t.applyOnce(this.turtle2);
 
                }
 
            }
 
           
 
            turtleObj.prototype.left = function(angle) {
 
                this.right(-angle);
 
            }
 
           
 
            turtleObj.prototype.penUp = function() {
 
                this.isPenDown = false;
 
            }
 
           
 
            turtleObj.prototype.penDown = function() {
 
                this.isPenDown = true;
 
                this.curve = this.board.createElement('curve',
 
                              [[this.pos[0]],[this.pos[1]]],this.attributes);
 
            }
 
 
 
            turtleObj.prototype.clean = function() {
 
                for(var el in this.board.objects) {
 
                    this.board.removeObject(el);
 
                }
 
                this.init();
 
            }
 
 
 
            turtleObj.prototype.setPos = function(x,y) {
 
                this.pos = [x,y];
 
                if (!this.turtleIsHidden) {
 
                    this.turtle.setPositionDirectly(JXG.COORDS_BY_USER,x,y);
 
                    this.turtle2.setPositionDirectly(JXG.COORDS_BY_USER,x,y+20);
 
                    var t = this.board.createElement('transform',
 
                          [-(this.dir-90)*Math.PI/180.0,this.turtle], {type:'rotate'});
 
                    t.applyOnce(this.turtle2);
 
                }
 
                this.curve = this.board.createElement('curve',
 
                              [[this.pos[0]],[this.pos[1]]],this.attributes);
 
            }
 
 
 
            turtleObj.prototype.setPenSize = function(size) {
 
                this.attributes.strokeWidth = size;
 
                this.curve = this.board.createElement('curve',
 
                              [[this.pos[0]],[this.pos[1]]],this.attributes);
 
            };
 
 
 
            turtleObj.prototype.setPenColor = function(colStr) {
 
                this.attributes.strokeColor = colStr;
 
                this.curve = this.board.createElement('curve',
 
                              [[this.pos[0]],[this.pos[1]]],this.attributes);
 
            };
 
 
 
            turtleObj.prototype.showTurtle = function() {
 
                this.turtleIsHidden = false;
 
                this.arrow.setProperty('visible:true');
 
                this.setPos(this.pos[0],this.pos[1]);
 
            };
 
 
 
            turtleObj.prototype.hideTurtle = function() {
 
                this.turtleIsHidden = true;
 
                this.arrow.setProperty('visible:false');
 
                this.setPos(this.pos[0],this.pos[1]);
 
            };
 
 
 
            turtleObj.prototype.home= function() {
 
                this.pos = [0,0];
 
                this.setPos(this.pos[0],this.pos[1]);
 
            };
 
 
 
            turtleObj.prototype.fd = function(len) { this.forward(len); };
 
            turtleObj.prototype.bk = function(len) { this.back(len); };
 
            turtleObj.prototype.lt = function(angle) { this.left(angle); };
 
            turtleObj.prototype.rt = function(angle) { this.right(angle); };
 
            turtleObj.prototype.pu = function() { this.penUp(); };
 
            turtleObj.prototype.pd = function() { this.penDown(); };
 
            turtleObj.prototype.ht = function() { this.hideTurtle(); };
 
            turtleObj.prototype.st = function() { this.showTurtle(); };
 
            turtleObj.prototype.cs = function() { this.clean(); };
 
 
 
            var brd = JXG.JSXGraph.initBoard('box', {originX: 300, originY: 300, unitX: 1, unitY: 1});
 
            var t = new turtleObj(brd);
 
  
 
function run(nr) {
 
function run(nr) {

Revision as of 11:05, 21 December 2008

This is a very basic implementation of turtle graphics in JavaScript with JSXGraph. Here, we use SVG (on Firefox, Safari, Opera and Chrome) and VML (on Internet Explorer). CanvasTurtle does the same on browsers which support the canvas element.

List of available commands

There is a predefined turtle object t. Therefore, all commands start with t, like t.fd(100);

  • t.forward(len); or t.fd(len);
  • t.back(len); or t.bk(len);
  • t.right(angle); or t.rt(angle); ([math]0\leq angle \leq 360[/math])
  • t.left(angle); or t.lt(angle);
  • t.penUp(); or t.pu();
  • t.penDown(); or t.pd();
  • t.clearScreen(); or t.cs();
  • t.clean();
  • t.setPos(x,y);
  • t.home();
  • t.hideTurtle(); or t.ht();
  • t.showTurtle(); or t.st();
  • t.setPenSize(size); (size: number)
  • t.setPenColor(col); (col: colorString, e.g. 'red' or '#ff0000')

Snowflake and Branches Example


References

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

The turtle graphics code

<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script>
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
<div id="box" class="jxgbox" style="width:600px; height:600px;"></div>
var brd = JXG.JSXGraph.initBoard('box', {originX: 300, originY: 300, unitX: 1, unitY: 1});
var t = new turtleObj(brd);

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