Difference between revisions of "Turtle Graphics"
From JSXGraph Wiki
Jump to navigationJump to searchA WASSERMANN (talk | contribs) |
A WASSERMANN (talk | contribs) |
||
Line 183: | Line 183: | ||
turtleObj.prototype.clean = function() { | turtleObj.prototype.clean = function() { | ||
for(var el in this.board.objects) { | for(var el in this.board.objects) { | ||
− | if (el.type==JXG.OBJECT_TYPE_CURVE) { | + | if (this.board.objects[el].type==JXG.OBJECT_TYPE_CURVE) { |
this.board.removeObject(el); | this.board.removeObject(el); | ||
} | } |
Revision as of 19:51, 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.
Contents
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 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.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) {
brd.suspendUpdate();
eval($('input'+nr).value);
brd.unsuspendUpdate();
}