Difference between revisions of "Turtle Graphics"

From JSXGraph Wiki
Jump to navigationJump to search
Line 9: Line 9:
 
<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>
 
 
<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 91: Line 90:
 
<script language="JavaScript">
 
<script language="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 JSXTurtleObj(brd);
+
var t = brd.createElement('turtle');
 
function run(nr) {
 
function run(nr) {
 
   brd.suspendUpdate();
 
   brd.suspendUpdate();
Line 108: Line 107:
 
<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>
 
<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;">
Line 118: Line 116:
 
<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 JSXTurtleObj(brd);
+
var t = brd.createElement('turtle');
  
 
function run(nr) {
 
function run(nr) {

Revision as of 16:08, 21 January 2009

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>
<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 = brd.createElement('turtle');

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