JSXGraph
JSXGraph share

Share

Turtle Graphics
QR code 
<iframe 
    src="https://jsxgraph.org/share/iframe/turtle-graphics" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Turtle Graphics" 
    allowfullscreen
></iframe>
This code has to 
<textarea id="input1" rows=7 cols=35 wrap="off" style="width:300px; float:left;">
function side(size, level) {
    if (level==0) {
        t.fd(size);
        return;
    }
    side(size/3, level-1);
    t.lt(60);
    side(size/3, level-1);
    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)">

<div id="board-0-wrapper" class="jxgbox-wrapper " style="width: 100%; ">
   <div id="board-0" class="jxgbox" style="aspect-ratio: 1 / 1; width: 100%;" data-ar="1 / 1"></div>
</div>

<script type = "text/javascript"> 
    /*
    This example is licensed under a 
    Creative Commons Attribution ShareAlike 4.0 International License.
    https://creativecommons.org/licenses/by-sa/4.0/
    
    Please note you have to mention 
    The Center of Mobile Learning with Digital Technology
    in the credits.
    */
    
    const BOARDID = 'board-0';

    var board = JXG.JSXGraph.initBoard(BOARDID, { boundingbox: [-300, 300, 300, -300] });
    var t = board.create('turtle');
    
    function run(nr) {
        board.suspendUpdate();
        eval(document.getElementById('input' + nr).value);
        board.unsuspendUpdate();
    }
 </script> 
/*
This example is licensed under a 
Creative Commons Attribution ShareAlike 4.0 International License.
https://creativecommons.org/licenses/by-sa/4.0/

Please note you have to mention 
The Center of Mobile Learning with Digital Technology
in the credits.
*/

const BOARDID = 'your_div_id'; // Insert your id here!

var board = JXG.JSXGraph.initBoard(BOARDID, { boundingbox: [-300, 300, 300, -300] });
var t = board.create('turtle');

function run(nr) {
    board.suspendUpdate();
    eval(document.getElementById('input' + nr).value);
    board.unsuspendUpdate();
}
This is a very basic implementation of turtle graphics in JavaScript with [JSXGraph](http://jsxgraph.org). [CanvasTurtle](http://u2d.com/turtle_js/index.html) does the same on browsers which support the *canvas* element.

<textarea id="input1" rows=7 cols=35 wrap="off" style="width:300px; float:left;">
function side(size, level) {
    if (level==0) {
        t.fd(size);
        return;
    }
    side(size/3, level-1);
    t.lt(60);
    side(size/3, level-1);
    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)">
// Define the id of your board in BOARDID

var board = JXG.JSXGraph.initBoard(BOARDID, { boundingbox: [-300, 300, 300, -300] });
var t = board.create('turtle');

function run(nr) {
    board.suspendUpdate();
    eval(document.getElementById('input' + nr).value);
    board.unsuspendUpdate();
}

license

This example is licensed under a Creative Commons Attribution ShareAlike 4.0 International License.
Please note you have to mention The Center of Mobile Learning with Digital Technology in the credits.