Difference between revisions of "Turtle Graphics"

From JSXGraph Wiki
Jump to navigationJump to search
Line 123: Line 123:
 
<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>
 +
<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>
 
<div id="box" class="jxgbox" style="width:600px; height:600px;"></div>
 
</source>
 
</source>
Line 128: Line 129:
 
<source lang="javascript">
 
<source lang="javascript">
 
var brd = JXG.JSXGraph.initBoard('box', {originX: 300, originY: 300, unitX: 1, unitY: 1});
 
var brd = JXG.JSXGraph.initBoard('box', {originX: 300, originY: 300, unitX: 1, unitY: 1});
var t = new turtleObj(brd);
+
var t = new JSXTurtleObj(brd);
  
 
function run(nr) {
 
function run(nr) {

Revision as of 11:17, 21 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); ([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>
<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>
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();
}