Difference between revisions of "Turtle Graphics"

From JSXGraph Wiki
Jump to navigationJump to search
Line 147: Line 147:
 
   brd.unsuspendUpdate();
 
   brd.unsuspendUpdate();
 
}
 
}
 
 
</script>
 
</script>
 
</html>
 
</html>
  
 +
===The turtle graphics code===
 +
<source lang="javascript">
 +
            var turtleObj = function(board,attributes) {
 +
                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.points = [];
 +
                this.pos = [0,0];
 +
                this.isPenDown = true;
 +
                this.dir = 90;
 +
                var p = this.board.createElement('point',this.pos,{fixed:true,name:' ',visible:false});
 +
                this.points.push(p);
 +
                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.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);
 +
                var t = this.board.createElement('transform', [dx,dy], {type:'translate'});
 +
                t.applyOnce(this.turtle);
 +
                t.applyOnce(this.turtle2);
 +
                this.pos[0] += dx;
 +
                this.pos[1] += dy;
 +
                var p = this.board.createElement('point',this.pos,{fixed:true,name:' ',visible:false});
 +
                this.points.push(p);
 +
 +
                if (this.isPenDown) {
 +
                    this.board.createElement('line',[this.points[this.points.length-2],p],this.attributes);
 +
                }
 +
                //this.board.update();
 +
            };
 +
           
 +
            turtleObj.prototype.back = function(len) {
 +
                this.forward(-len);
 +
            }
 +
           
 +
            turtleObj.prototype.right = function(angle) {
 +
                this.dir += angle;
 +
                var t = this.board.createElement('transform', [-angle*Math.PI/180.0,this.turtle], {type:'rotate'});
 +
                t.applyOnce(this.turtle2);
 +
                //this.board.update();
 +
            }
 +
           
 +
            turtleObj.prototype.left = function(angle) {
 +
                this.right(-angle);
 +
            }
 +
           
 +
            turtleObj.prototype.penUp = function() {
 +
                this.isPenDown = false;
 +
            }
 +
           
 +
            turtleObj.prototype.penDown = function() {
 +
                this.isPenDown = true;
 +
            }
 +
 +
            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];
 +
                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*Math.PI/180.0,this.turtle], {type:'rotate'});
 +
                t.applyOnce(this.turtle2);
 +
                var p = this.board.createElement('point',this.pos,{fixed:true,name:' ',visible:false});
 +
                this.points.push(p);
 +
                //this.board.update();
 +
            }
 +
 +
            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();
 +
  eval($('input').value);
 +
  brd.unsuspendUpdate();
 +
}
 +
</source>
 
[[Category:Examples]]
 
[[Category:Examples]]

Revision as of 17:17, 19 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


The turtle graphics code

            var turtleObj = function(board,attributes) {
                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.points = [];
                this.pos = [0,0];
                this.isPenDown = true;
                this.dir = 90;
                var p = this.board.createElement('point',this.pos,{fixed:true,name:' ',visible:false});
                this.points.push(p);
                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.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);
                var t = this.board.createElement('transform', [dx,dy], {type:'translate'});
                t.applyOnce(this.turtle);
                t.applyOnce(this.turtle2);
                this.pos[0] += dx;
                this.pos[1] += dy;
                var p = this.board.createElement('point',this.pos,{fixed:true,name:' ',visible:false});
                this.points.push(p);

                if (this.isPenDown) {
                    this.board.createElement('line',[this.points[this.points.length-2],p],this.attributes);
                }
                //this.board.update();
            };
            
            turtleObj.prototype.back = function(len) {
                this.forward(-len);
            }
            
            turtleObj.prototype.right = function(angle) {
                this.dir += angle;
                var t = this.board.createElement('transform', [-angle*Math.PI/180.0,this.turtle], {type:'rotate'});
                t.applyOnce(this.turtle2);
                //this.board.update();
            }
            
            turtleObj.prototype.left = function(angle) {
                this.right(-angle);
            }
            
            turtleObj.prototype.penUp = function() {
                this.isPenDown = false;
            }
            
            turtleObj.prototype.penDown = function() {
                this.isPenDown = true;
            }

            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];
                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*Math.PI/180.0,this.turtle], {type:'rotate'});
                t.applyOnce(this.turtle2);
                var p = this.board.createElement('point',this.pos,{fixed:true,name:' ',visible:false});
                this.points.push(p);
                //this.board.update();
            }

            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();
  eval($('input').value);
  brd.unsuspendUpdate();
}