Difference between revisions of "Turtle Graphics"

From JSXGraph Wiki
Jump to navigationJump to search
 
(8 intermediate revisions by 2 users not shown)
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].  
 
[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')
 
</source>
 
  
 
===Snowflake and Branches Example===
 
===Snowflake and Branches Example===
 
<html>
 
<html>
<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>
 
 
<form><textarea id="input1" rows=7 cols=35 wrap="off" style="width:300px; float:left;">
 
<form><textarea id="input1" rows=7 cols=35 wrap="off" style="width:300px; float:left;">
 
function side(size, level) {
 
function side(size, level) {
Line 43: Line 22:
  
 
function snowflake(size, level) {
 
function snowflake(size, level) {
     (3).times(function() {
+
     for (var i=0;i<3;i++) {
 
         side(size, level);
 
         side(size, level);
 
         t.rt(120);
 
         t.rt(120);
     });
+
     };
 
}
 
}
  
Line 105: Line 84:
 
<input type="button" value="run example 2" onClick="run(2)">  
 
<input type="button" value="run example 2" onClick="run(2)">  
 
</form>
 
</form>
<div id="box" class="jxgbox" style="width:600px; height:600px;"></div>
+
</html>
<script language="JavaScript">
+
<jsxgraph width="600" height="600" box="box">
var brd = JXG.JSXGraph.initBoard('box', {originX: 300, originY: 300, unitX: 1, unitY: 1});
+
var brd = JXG.JSXGraph.initBoard('box', {boundingbox: [-300, 300, 300, -300]});
var t = new JSXTurtleObj(brd);
+
var t = brd.create('turtle');
 
function run(nr) {
 
function run(nr) {
 
   brd.suspendUpdate();
 
   brd.suspendUpdate();
   eval($('input'+nr).value);
+
   eval(document.getElementById('input'+nr).value);
 
   brd.unsuspendUpdate();
 
   brd.unsuspendUpdate();
 
}
 
}
</script>
+
</jsxgraph>
</html>
 
  
 
===References===
 
===References===
Line 122: Line 100:
 
===The turtle graphics code===
 
===The turtle graphics code===
 
<source lang="html4strict">
 
<source lang="html4strict">
<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;">
 
<form><textarea id="input1" rows=7 cols=35 wrap="off" style="width:300px; float:left;">
 
turtle code...
 
turtle code...
Line 134: Line 107:
  
 
<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', {boundingbox: [-300, 300, 300, -300]});
var t = new JSXTurtleObj(brd);
+
var t = brd.create('turtle');
  
 
function run(nr) {
 
function run(nr) {
Line 145: Line 118:
  
 
[[Category:Examples]]
 
[[Category:Examples]]
[[:Category:Turtle Graphics]]
+
[[Category:Turtle Graphics]]
 +
[[Category:Fractals]]

Latest revision as of 09:40, 9 June 2011

This is a very basic implementation of turtle graphics in JavaScript with JSXGraph. 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

<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', {boundingbox: [-300, 300, 300, -300]});
var t = brd.create('turtle');

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