Difference between revisions of "Turtle Graphics"

From JSXGraph Wiki
Jump to navigationJump to search
(New page: <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/pro...)
 
 
(70 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].
 +
[http://u2d.com/turtle_js/index.html CanvasTurtle] does the same on browsers which support the ''canvas'' element.
 +
 +
* [[List of available commands]]
 +
 +
===Snowflake and Branches Example===
 
<html>
 
<html>
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
+
<form><textarea id="input1" rows=7 cols=35 wrap="off" style="width:300px; float:left;">
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script>
+
function side(size, level) {
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
+
    if (level==0) {
<form><textarea id="input" rows=7 cols=35 wrap="off" >
+
        t.fd(size);
</textarea> <br>
+
        return;
<input type="button" value="plot" onClick="doIt()" style='margin-right:1em'>  
+
    }
<input type="button" value="clear all" onClick="board=clearAll(board)">
+
    side(size/3, level-1);
<input type='button' value='Zoom In' onclick='board.zoomIn()'>
+
    t.lt(60);
<input type='button' value='Zoom Out' onclick='board.zoomOut()'>
+
    side(size/3, level-1);
<input type='button' value='Zoom 100%' onclick='board.zoom100()'>  
+
    t.rt(120);
 +
    side(size/3, level-1);
 +
    t.lt(60);
 +
    side(size/3, level-1);
 +
}
 +
 
 +
function snowflake(size, level) {
 +
    for (var i=0;i<3;i++) {
 +
        side(size, level);
 +
        t.rt(120);
 +
    };
 +
}
 +
 
 +
t.clearScreen();
 +
t.hideTurtle();
 +
t.setPenSize(1)
 +
t.setPenColor("#000000")
 +
t.lt(30);
 +
t.setPos(0,-100);
 +
snowflake(250, 4);
 +
</textarea>
 +
<textarea id="input2" rows=7 cols=35 wrap="off" style="width:300px">
 +
function branch(length, level)
 +
{
 +
    if(level == 0) return
 +
    t.fd(length)
 +
    t.lt(45)
 +
    branch(length/2, level-1)
 +
    t.rt(90)
 +
    branch(length/2, level-1)
 +
    t.lt(45)
 +
    t.bk(length)
 +
}
 +
 
 +
function lbranch(length, angle, level)
 +
{
 +
    t.fd(2*length)
 +
    node(length, angle, level)
 +
    t.bk(2*length)
 +
}
 +
function rbranch(length, angle, level)
 +
{
 +
    t.fd(length)
 +
    node(length, angle, level)
 +
    t.bk(length)
 +
}
 +
 
 +
function node(length, angle, level)
 +
{
 +
    if (level == 0) return;
 +
    t.lt(angle)
 +
    lbranch(length, angle, level -1)
 +
    t.rt(2*angle)
 +
    rbranch(length, angle, level-1)
 +
    t.lt(angle)
 +
}
 +
 
 +
t.clearScreen()
 +
t.hideTurtle();
 +
//branch(100,6)
 +
 
 +
t.setPenSize(5)
 +
t.setPenColor("#008800")
 +
t.setPos(30, -150)
 +
lbranch(25, 20, 7)
 +
</textarea><br />
 +
<input type="button" value="run example 1" onClick="run(1)">  
 +
<input type="button" value="run example 2" onClick="run(2)">  
 
</form>
 
</form>
<div id="box" class="jxgbox" style="width:600px; height:600px;"></div>
 
<script language="JavaScript">
 
</script>
 
 
</html>
 
</html>
 +
<jsxgraph width="600" height="600" box="box">
 +
var brd = JXG.JSXGraph.initBoard('box', {boundingbox: [-300, 300, 300, -300]});
 +
var t = brd.create('turtle');
 +
function run(nr) {
 +
  brd.suspendUpdate();
 +
  eval(document.getElementById('input'+nr).value);
 +
  brd.unsuspendUpdate();
 +
}
 +
</jsxgraph>
 +
 +
===References===
 +
* The snowflake and branches example have been adapted from the excellent [http://u2d.com/turtle_js/index.html CanvasTurtle]
 +
 +
===The turtle graphics code===
 +
<source lang="html4strict">
 +
<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)">
 +
</source>
 +
 +
<source lang="javascript">
 +
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();
 +
}
 +
</source>
  
 
[[Category:Examples]]
 
[[Category:Examples]]
 +
[[Category:Turtle Graphics]]
 +
[[Category:Fractals]]

Latest revision as of 08: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();
}