Turtle Graphics: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
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.


Line 6: Line 6:
===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>
<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 87: 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', {originX: 300, originY: 300, unitX: 1, unitY: 1});
var t = brd.createElement('turtle');
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 104: 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>
<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...
</textarea>
</textarea>
<input type="button" value="run example 1" onClick="run(1)">  
<input type="button" value="run example 1" onClick="run(1)">  
<jsxgraph width="600" height="600" box="box0">
</source>
</source>


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


function run(nr) {
function run(nr) {

Revision as of 10:04, 25 March 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', {originX: 300, originY: 300, unitX: 1, unitY: 1});
var t = brd.create('turtle');

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