Difference between revisions of "Turtle Graphics"

From JSXGraph Wiki
Jump to navigationJump to search
Line 17: Line 17:
 
<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>
<form><textarea id="input" rows=7 cols=35 wrap="off" style="width:600px">
+
<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 40: Line 40:
  
 
t.clean();
 
t.clean();
 +
t.hideTurtle();
 
t.lt(30);
 
t.lt(30);
 
t.setPos(0,-100);
 
t.setPos(0,-100);
 
snowflake(250, 4);
 
snowflake(250, 4);
 
</textarea><br />
 
</textarea><br />
<input type="button" value="run" onClick="run()">  
+
<textarea id="input2" rows=7 cols=35 wrap="off" style="width:600px">
 +
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.clean()
 +
t.hideTurtle();
 +
//branch(100,6)
 +
 
 +
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>
 
</form>
 
<div id="box" class="jxgbox" style="width:600px; height:600px;"></div>
 
<div id="box" class="jxgbox" style="width:600px; height:600px;"></div>
Line 163: Line 209:
 
             turtleObj.prototype.hideTurtle = function() {  
 
             turtleObj.prototype.hideTurtle = function() {  
 
                 this.turtleIsHidden = true;
 
                 this.turtleIsHidden = true;
 +
                this.arrow.setProperty('visible:false');
 
                 this.setPos(this.pos[0],this.pos[1]);
 
                 this.setPos(this.pos[0],this.pos[1]);
 
             };
 
             };
Line 174: Line 221:
 
             var t = new turtleObj(brd);
 
             var t = new turtleObj(brd);
  
 +
/*
 
fd = t.fd;  
 
fd = t.fd;  
 
bk = t.bk;  
 
bk = t.bk;  
Line 189: Line 237:
 
penUp = t.penUp;
 
penUp = t.penUp;
 
penDown = t.penDown;
 
penDown = t.penDown;
 +
*/
  
function run() {
+
function run(nr) {
 
   brd.suspendUpdate();
 
   brd.suspendUpdate();
  t.hideTurtle();
+
   eval($('input'+nr).value);
   eval($('input').value);
 
 
   brd.unsuspendUpdate();
 
   brd.unsuspendUpdate();
 
}
 
}

Revision as of 17:38, 20 December 2008

This is a very basic implementation of turtle graphics with JSXGraph.

List of 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);
  • t.left(angle); or t.lt(angle);
  • t.penUp();
  • t.penDown();
  • t.clean();
  • t.setPos(x,y);

Snowflake Example



References

  • The snowflake example has 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 turtleObj = function(board,attributes) {
                this.turtleIsHidden = false;
                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.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();
  //t.hideTurtle();
  eval($('input').value);
  brd.unsuspendUpdate();
}