Difference between revisions of "Turtle Graphics"

From JSXGraph Wiki
Jump to: navigation, search
Line 86: Line 86:
 
</html>
 
</html>
 
<jsxgraph width="600" height="600" box="box">
 
<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 = brd.create('turtle');
 
var t = brd.create('turtle');
 
function run(nr) {
 
function run(nr) {
Line 108: Line 108:
  
 
<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 = brd.create('turtle');
 
var t = brd.create('turtle');
  

Revision as of 08:39, 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)"> 
<jsxgraph width="600" height="600" box="box0">
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();
}