JSXGraph
JSXGraph share

Share

Dragon curve
Show plain example
QR code 
<iframe 
    src="http://jsxgraph.org/share/iframe/dragon-curve" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Dragon curve" 
    allowfullscreen
></iframe>
This code has to 
<textarea id="inputtext" rows=15 cols=35 wrap="off" style="width:600px;">
var level = 8;
var axiom = 'Fl';
var rules = {
    'F' : 'F',
    'l' : 'l+rF+', 
    'r' : '-Fl-r', 
    '+' : '+',
    '-' : '-'
};
var symbols = { 'F':'F',
                'l':' ',
                'r':' ',
                '+':'+',
                '-':'-',
                '[':'[',
                ']':']'
              } ;
              
var angle = 90;
var len = 1000/(level*level);
</textarea><br />
<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 4.0 International License.
    https://creativecommons.org/licenses/by/4.0/
    
    Please note you have to mention 
    The Center of Mobile Learning with Digital Technology
    in the credits.
    */
    
    const BOARDID = 'board-0';

    var t;
    const board = JXG.JSXGraph.initBoard(BOARDID, {
        boundingbox: [-300, 300, 300, -300]
    });
    const turtle = board.create('turtle');
    
    var expander = function(level, axiom, rules) {
        this.axiom = axiom;
        this.rules = rules;
        this.source = (level > 1) ? new expander(level - 1, axiom, rules) : (new function() {
            // Axiom:
            this.code = axiom;
            this.pos = 0;
            this.next = function() {
                if (this.pos >= this.code.length) return null;
                return this.code.charAt(this.pos++);
            }
        });
    
        this.code = '';
        this.pos = 0;
        this.next = function() {
            while (this.pos >= this.code.length) { // produce new symbols from source
                this.pos = 0;
                var pattern = this.source.next();
                if (!pattern) return null // Finished
                this.code = this.rules[pattern];
            }
            return this.code.charAt(this.pos++);
        }
    }
    
    var plotter = function(generator, symbols, len, angle, t, shrink) {
        var c;
        for (c; c = generator.next(); c) {
            switch (symbols[c]) {
                case 'F':
                    t.fd(len);
                    break;
                case 'f':
                    t.penUp();
                    t.fd(len);
                    t.penDown();
                    break;
                case '+':
                    t.lt(angle);
                    break;
                case '-':
                    t.rt(angle);
                    break;
                case '[':
                    t.pushTurtle();
                    len *= shrink;
                    break;
                case ']':
                    t.popTurtle();
                    len /= shrink;
                    break;
                default:
                    ;
            }
        }
        return null;
    }
    var shrink = 1.0;
    
    var run = function() {
        var code = document.getElementById('inputtext').value;
        if (code === '') {
            return;
        }
        t = turtle;
        t.cs();
        t.hideTurtle();
    
        eval(code); // eval is considered insecure and should be used only in safe environments
        var generator = new expander(level, axiom, rules);
        plotter(generator, symbols, len, angle, t, shrink);
    }
    
    var clearturtle = function() {
        turtle.cs();
    }
 </script> 
/*
This example is licensed under a 
Creative Commons Attribution 4.0 International License.
https://creativecommons.org/licenses/by/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 t;
const board = JXG.JSXGraph.initBoard(BOARDID, {
    boundingbox: [-300, 300, 300, -300]
});
const turtle = board.create('turtle');

var expander = function(level, axiom, rules) {
    this.axiom = axiom;
    this.rules = rules;
    this.source = (level > 1) ? new expander(level - 1, axiom, rules) : (new function() {
        // Axiom:
        this.code = axiom;
        this.pos = 0;
        this.next = function() {
            if (this.pos >= this.code.length) return null;
            return this.code.charAt(this.pos++);
        }
    });

    this.code = '';
    this.pos = 0;
    this.next = function() {
        while (this.pos >= this.code.length) { // produce new symbols from source
            this.pos = 0;
            var pattern = this.source.next();
            if (!pattern) return null // Finished
            this.code = this.rules[pattern];
        }
        return this.code.charAt(this.pos++);
    }
}

var plotter = function(generator, symbols, len, angle, t, shrink) {
    var c;
    for (c; c = generator.next(); c) {
        switch (symbols[c]) {
            case 'F':
                t.fd(len);
                break;
            case 'f':
                t.penUp();
                t.fd(len);
                t.penDown();
                break;
            case '+':
                t.lt(angle);
                break;
            case '-':
                t.rt(angle);
                break;
            case '[':
                t.pushTurtle();
                len *= shrink;
                break;
            case ']':
                t.popTurtle();
                len /= shrink;
                break;
            default:
                ;
        }
    }
    return null;
}
var shrink = 1.0;

var run = function() {
    var code = document.getElementById('inputtext').value;
    if (code === '') {
        return;
    }
    t = turtle;
    t.cs();
    t.hideTurtle();

    eval(code); // eval is considered insecure and should be used only in safe environments
    var generator = new expander(level, axiom, rules);
    plotter(generator, symbols, len, angle, t, shrink);
}

var clearturtle = function() {
    turtle.cs();
}
Plot a *space filling* dragon curve described as Lindenmayer system (L-system). See Przemyslaw Prusinkiewicz, James Hanan: Lindenmayer Systems, Fractals, and Plants (Lecture Notes in Biomathematics). Springer 1989, ISBN 0-387-97092-4 

<textarea id="inputtext" rows=15 cols=35 wrap="off" style="width:600px;">
var level = 8;
var axiom = 'Fl';
var rules = {
    'F' : 'F',
    'l' : 'l+rF+', 
    'r' : '-Fl-r', 
    '+' : '+',
    '-' : '-'
};
var symbols = { 'F':'F',
                'l':' ',
                'r':' ',
                '+':'+',
                '-':'-',
                '[':'[',
                ']':']'
              } ;
              
var angle = 90;
var len = 1000/(level*level);
</textarea><br />
<input type="button" value="run" onClick="run()">
<input type="button" value="clear" onClick="clearturtle()">
// Define the id of your board in BOARDID

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

var expander = function(level, axiom, rules) {
    this.axiom = axiom;
    this.rules = rules;
    this.source = (level > 1) ? new expander(level - 1, axiom, rules) : (new function() {
        // Axiom:
        this.code = axiom;
        this.pos = 0;
        this.next = function() {
            if (this.pos >= this.code.length) return null;
            return this.code.charAt(this.pos++);
        }
    });

    this.code = '';
    this.pos = 0;
    this.next = function() {
        while (this.pos >= this.code.length) { // produce new symbols from source
            this.pos = 0;
            var pattern = this.source.next();
            if (!pattern) return null // Finished
            this.code = this.rules[pattern];
        }
        return this.code.charAt(this.pos++);
    }
}

var plotter = function(generator, symbols, len, angle, t, shrink) {
    var c;
    for (c; c = generator.next(); c) {
        switch (symbols[c]) {
            case 'F':
                t.fd(len);
                break;
            case 'f':
                t.penUp();
                t.fd(len);
                t.penDown();
                break;
            case '+':
                t.lt(angle);
                break;
            case '-':
                t.rt(angle);
                break;
            case '[':
                t.pushTurtle();
                len *= shrink;
                break;
            case ']':
                t.popTurtle();
                len /= shrink;
                break;
            default:
                ;
        }
    }
    return null;
}
var shrink = 1.0;

var run = function() {
    var code = document.getElementById('inputtext').value;
    if (code === '') {
        return;
    }
    t = turtle;
    t.cs();
    t.hideTurtle();

    eval(code); // eval is considered insecure and should be used only in safe environments
    var generator = new expander(level, axiom, rules);
    plotter(generator, symbols, len, angle, t, shrink);
}

var clearturtle = function() {
    turtle.cs();
}

license

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