JSXGraph
JSXGraph share

Share

n-gons - Slow version
Show plain example
QR code 
<iframe 
    src="http://jsxgraph.uni-bayreuth.de/share/iframe/n-gones-slow-version" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: n-gons - Slow version" 
    allowfullscreen
></iframe>
This code has to 
<textarea id="inputtext" rows=3 cols=35 wrap="off" style="width:600px;">
speed=25;
t.cs().hideTurtle().setProperty({strokeWidth:4,strokeOpacity:0.6,fillOpacity:0.3});
ngon(10,60);
</textarea>

<input type="button" value="run" onClick="run()">
<input type="button" value="clear" onClick="clearturtle()">

<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], keepaspectratio: true });
    
    var t = board.create('turtle', [], { fillColor: 'yellow', highlight: false });
    var speed;
    
    var innerloop = function(i, j, ne, sz) {
        if (i > 0) {
            if (j == ne) { t.rt(360 / ne); }
            t.rt(360 / ne);
            t.fd(sz);
            j--;
            if (j <= 0) {
                j = ne;
                i--;
            }
            setTimeout(function() { innerloop(i, j, ne, sz); }, speed);
        }
    }
    
    function ngon(ne, sz) {
        innerloop(ne, ne, ne, sz);
    }
    
    function run() {
        var code = document.getElementById('inputtext').value;
        if (code == '') { return; }
        eval(code);
    }
    
    function clearturtle() {
        t.cs();
    }
 </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], keepaspectratio: true });

var t = board.create('turtle', [], { fillColor: 'yellow', highlight: false });
var speed;

var innerloop = function(i, j, ne, sz) {
    if (i > 0) {
        if (j == ne) { t.rt(360 / ne); }
        t.rt(360 / ne);
        t.fd(sz);
        j--;
        if (j <= 0) {
            j = ne;
            i--;
        }
        setTimeout(function() { innerloop(i, j, ne, sz); }, speed);
    }
}

function ngon(ne, sz) {
    innerloop(ne, ne, ne, sz);
}

function run() {
    var code = document.getElementById('inputtext').value;
    if (code == '') { return; }
    eval(code);
}

function clearturtle() {
    t.cs();
}

n-gons - Slow version

Turtle
This interactive turtle graphics demo allows users to draw regular polygons by editing the JavaScript code in the text area. The drawing speed (default 25) as well as the $n$ (default 10), the number of $n$-gons, and their size (in pixel, default 60) can be adjusted.
Have also a look at the examples 
<textarea id="inputtext" rows=3 cols=35 wrap="off" style="width:600px;">
speed=25;
t.cs().hideTurtle().setProperty({strokeWidth:4,strokeOpacity:0.6,fillOpacity:0.3});
ngon(10,60);
</textarea>

<input type="button" value="run" onClick="run()">
<input type="button" value="clear" onClick="clearturtle()">
// Define the id of your board in BOARDID

var board = JXG.JSXGraph.initBoard(BOARDID, { boundingbox: [-300, 300, 300, -300], keepaspectratio: true });

var t = board.create('turtle', [], { fillColor: 'yellow', highlight: false });
var speed;

var innerloop = function(i, j, ne, sz) {
    if (i > 0) {
        if (j == ne) { t.rt(360 / ne); }
        t.rt(360 / ne);
        t.fd(sz);
        j--;
        if (j <= 0) {
            j = ne;
            i--;
        }
        setTimeout(function() { innerloop(i, j, ne, sz); }, speed);
    }
}

function ngon(ne, sz) {
    innerloop(ne, ne, ne, sz);
}

function run() {
    var code = document.getElementById('inputtext').value;
    if (code == '') { return; }
    eval(code);
}

function clearturtle() {
    t.cs();
}

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.