Difference between revisions of "Turtle Graphics"

From JSXGraph Wiki
Jump to navigationJump to search
Line 1: Line 1:
 
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).
 
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).
 
[http://u2d.com/turtle_js/index.html CanvasTurtle] does the same on browsers which support the ''canvas'' element.
 
[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
+
* [[List of available commands]]
start with ''t'', like ''t.fd(100)'';
 
<source lang="javascript">
 
* 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')
 
* t.setProperty({key1:value1,key2:value2,...});
 
* t.pushTurtle()
 
* t.popTurtle()
 
</source>
 
  
 
===Snowflake and Branches Example===
 
===Snowflake and Branches Example===

Revision as of 15:00, 30 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.

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>
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxturtle.js"></script>
<div id="box" class="jxgbox" style="width:600px; height:600px;"></div>
<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', {originX: 300, originY: 300, unitX: 1, unitY: 1});
var t = new JSXTurtleObj(brd);

function run(nr) {
  brd.suspendUpdate();
  eval($('input'+nr).value);
  brd.unsuspendUpdate();
}