Turtle Graphics: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
Line 1: Line 1:
This is a very basic implementation of turtle graphics in JavaScript with [http://jsxgraph.org JSXGraph].
This is a very basic implementation of turtle graphics in JavaScript with [http://jsxgraph.org JSXGraph]. Here, we use SVG (on Firefox, Safari, Opera and Chrome) and VML (on Internet Explorer).
===List of commands===
[http://u2d.com/turtle_js/index.html 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
There is a predefined turtle object ''t''. Therefore, all commands
start with ''t'', like ''t.fd(100)'';
start with ''t'', like ''t.fd(100)'';
Line 255: Line 256:


===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===

Revision as of 16:57, 20 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);
  • t.left(angle); or t.lt(angle);
  • t.penUp();
  • t.penDown();
  • t.clean();
  • t.setPos(x,y);
  • t.hideTurtle();
  • t.showTurtle();
  • t.setPenSize();
  • t.setPenColor();

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