Turtle Graphics: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
 
(25 intermediate revisions by 2 users not shown)
Line 1: Line 1:
This is a very basic implementation of turtle graphics with [http://jsxgraph.org JSXGraph].
This is a very basic implementation of turtle graphics in JavaScript with [http://jsxgraph.org JSXGraph].  
===List of commands===
[http://u2d.com/turtle_js/index.html CanvasTurtle] does the same on browsers which support the ''canvas'' element.
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);
* t.left(angle); or t.lt(angle);
* t.penUp();
* t.penDown();
* t.clean();
* t.setPos(x,y);


===Snowflake Example===
* [[List of available commands]]
 
===Snowflake and Branches Example===
<html>
<html>
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
<form><textarea id="input1" rows=7 cols=35 wrap="off" style="width:300px; float:left;">
<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>
<form><textarea id="input1" rows=7 cols=35 wrap="off" style="width:600px">
function side(size, level) {
function side(size, level) {
     if (level==0) {
     if (level==0) {
Line 33: Line 22:


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


t.clean();
t.clearScreen();
t.hideTurtle();
t.hideTurtle();
t.setPenSize(1)
t.setPenSize(1)
Line 46: Line 35:
t.setPos(0,-100);
t.setPos(0,-100);
snowflake(250, 4);
snowflake(250, 4);
</textarea><br />
</textarea>
<textarea id="input2" rows=7 cols=35 wrap="off" style="width:600px">
<textarea id="input2" rows=7 cols=35 wrap="off" style="width:300px">
function branch(length, level)
function branch(length, level)
{
{
Line 83: Line 72:
}
}


t.clean()
t.clearScreen()
t.hideTurtle();
t.hideTurtle();
//branch(100,6)
//branch(100,6)
Line 95: Line 84:
<input type="button" value="run example 2" onClick="run(2)">  
<input type="button" value="run example 2" onClick="run(2)">  
</form>
</form>
<div id="box" class="jxgbox" style="width:600px; height:600px;"></div>
</html>
<script language="JavaScript">
<jsxgraph width="600" height="600" box="box">
            var turtleObj = function(board,attributes) {
var brd = JXG.JSXGraph.initBoard('box', {boundingbox: [-300, 300, 300, -300]});
                this.turtleIsHidden = false;
var t = brd.create('turtle');
                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;
            };
 
            turtleObj.prototype.hideTurtle = function() {
                this.turtleIsHidden = true;
                this.arrow.setProperty('visible:false');
                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); };
 
            var brd = JXG.JSXGraph.initBoard('box', {originX: 300, originY: 300, unitX: 1, unitY: 1});
            var t = new turtleObj(brd);
 
/*
fd = t.fd;
bk = t.bk;
lt = t.lt;
rt = t.rt;
forward = t.forward;
back = t.back;
left = t.left;
right = t.right
setPenSize = t.setPenSize;
setPenColor = t.setPenColor;
hideTurtle = t.hideTurtle;
showTurtle = t.showTurtle;
clean = t.clean;
penUp = t.penUp;
penDown = t.penDown;
*/
 
function run(nr) {
function run(nr) {
   brd.suspendUpdate();
   brd.suspendUpdate();
   eval($('input'+nr).value);
   eval(document.getElementById('input'+nr).value);
   brd.unsuspendUpdate();
   brd.unsuspendUpdate();
}
}
</script>
</jsxgraph>
</html>


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


===The turtle graphics code===
===The turtle graphics code===
<source lang="html4strict">
<source lang="html4strict">
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
<form><textarea id="input1" rows=7 cols=35 wrap="off" style="width:300px; float:left;">
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script>
turtle code...
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
</textarea>
<div id="box" class="jxgbox" style="width:600px; height:600px;"></div>
<input type="button" value="run example 1" onClick="run(1)">  
</source>
</source>


<source lang="javascript">
<source lang="javascript">
            var turtleObj = function(board,attributes) {
var brd = JXG.JSXGraph.initBoard('box', {boundingbox: [-300, 300, 300, -300]});
                this.turtleIsHidden = false;
var t = brd.create('turtle');
                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() {
function run(nr) {
                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.showTurtle = function() {
                this.turtleIsHidden = false;
            };
 
            turtleObj.prototype.hideTurtle = function() {
                this.turtleIsHidden = true;
                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); };
 
            var brd = JXG.JSXGraph.initBoard('box', {originX: 300, originY: 300, unitX: 1, unitY: 1});
            var t = new turtleObj(brd);
function run() {
   brd.suspendUpdate();
   brd.suspendUpdate();
  //t.hideTurtle();
   eval($('input'+nr).value);
   eval($('input').value);
   brd.unsuspendUpdate();
   brd.unsuspendUpdate();
}
}
</source>
</source>
[[Category:Examples]]
[[Category:Examples]]
[[Category:Turtle Graphics]]
[[Category:Fractals]]

Latest revision as of 07:40, 9 June 2011

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

Snowflake and Branches Example


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

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();
}
Retrieved from "http://jsxgraph.org/wiki/index.php?title=Turtle_Graphics&oldid=5322"