JSXGraph
JSXGraph share

Share

Autocatalytic process
QR code 
<iframe 
    src="https://www.jsxgraph.org/share/iframe/autocatalytic-process" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Autocatalytic process" 
    allowfullscreen
></iframe>
This code has to 
<button onClick="clearturtle(); run()">Clear and run simulation</button>

<div id="board-0-wrapper" class="jxgbox-wrapper " style="width: 100%; ">
   <div id="board-0" class="jxgbox" style="aspect-ratio: 6 / 5; width: 100%;" data-ar="6 / 5"></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';

    const board = JXG.JSXGraph.initBoard(BOARDID, {
        boundingbox: [-0.5, 12.5, 14.5, -12.5],
        keepaspectratio: false,
        axis: true
    });
    var t = board.create('turtle', [4, 3, 70]);
    
    var s = board.create('slider', [
        [0, -5],
        [10, -5],
        [-5, 0.5, 5]
    ], {
        name: 's'
    });
    var alpha = board.create('slider', [
        [0, -6],
        [10, -6],
        [-1, 0.2, 2]
    ], {
        name: 'α'
    });
    t.hideTurtle();
    
    var A = 5;
    var tau = 0.3;
    var dx = 0.1;
    var x;
    
    function clearturtle() {
        t.cs();
        t.ht();
    }
    
    function run() {
        t.setPos(0, s.Value());
        t.setPenSize(4);
        x = 0.0; // global
        loop();
    }
    
    function loop() {
        var dy = alpha.Value() * t.Y() * (A - t.Y()) * dx; // Autocatalytic process
        t.moveTo([dx + t.X(), dy + t.Y()]);
        x += dx;
        if (x < 20.0) {
            setTimeout(loop, 10);
        }
    }
 </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!

const board = JXG.JSXGraph.initBoard(BOARDID, {
    boundingbox: [-0.5, 12.5, 14.5, -12.5],
    keepaspectratio: false,
    axis: true
});
var t = board.create('turtle', [4, 3, 70]);

var s = board.create('slider', [
    [0, -5],
    [10, -5],
    [-5, 0.5, 5]
], {
    name: 's'
});
var alpha = board.create('slider', [
    [0, -6],
    [10, -6],
    [-1, 0.2, 2]
], {
    name: 'α'
});
t.hideTurtle();

var A = 5;
var tau = 0.3;
var dx = 0.1;
var x;

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

function run() {
    t.setPos(0, s.Value());
    t.setPenSize(4);
    x = 0.0; // global
    loop();
}

function loop() {
    var dy = alpha.Value() * t.Y() * (A - t.Y()) * dx; // Autocatalytic process
    t.moveTo([dx + t.X(), dy + t.Y()]);
    x += dx;
    if (x < 20.0) {
        setTimeout(loop, 10);
    }
}
This application simulates an *autocatalytic population growth model*. In JSXGraph, simulations involving differential equations can be easily realized with the *turtle element*. _The model_ In time $\Delta t$ the population grows by $\alpha\cdot y \cdot(A-y)$ members: $$ \Delta y = \alpha\cdot y\cdot \Delta t \cdot(A-y), \mbox{ that is } \frac{\Delta y}{\Delta t} = \alpha\cdot y \cdot(A-y). $$ With the limit process $\Delta t\to 0$ we get $$\frac{d y}{d t} = \alpha\cdot y \cdot (A-y), \mbox{ i.e. } y' = \alpha\cdot y \cdot (A-y).$$ The initial population is $y(0)= s$, $A := 5$. The essential part of the code is: we have a step width `dx` (time) and in each step the turtle `t` moves from its current position `[t.X(), t.Y()]` to the new position`[dx + t.X(), dy + t.Y()]` and `dy` is determined from the differential equation: ``` var dy = alpha.Value() * t.Y() * (A - t.Y()) * dx; t.moveTo([dx + t.X(), dy + t.Y()]); ``` 
<button onClick="clearturtle(); run()">Clear and run simulation</button>
// Define the id of your board in BOARDID

const board = JXG.JSXGraph.initBoard(BOARDID, {
    boundingbox: [-0.5, 12.5, 14.5, -12.5],
    keepaspectratio: false,
    axis: true
});
var t = board.create('turtle', [4, 3, 70]);

var s = board.create('slider', [
    [0, -5],
    [10, -5],
    [-5, 0.5, 5]
], {
    name: 's'
});
var alpha = board.create('slider', [
    [0, -6],
    [10, -6],
    [-1, 0.2, 2]
], {
    name: 'α'
});
t.hideTurtle();

var A = 5;
var tau = 0.3;
var dx = 0.1;
var x;

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

function run() {
    t.setPos(0, s.Value());
    t.setPenSize(4);
    x = 0.0; // global
    loop();
}

function loop() {
    var dy = alpha.Value() * t.Y() * (A - t.Y()) * dx; // Autocatalytic process
    t.moveTo([dx + t.X(), dy + t.Y()]);
    x += dx;
    if (x < 20.0) {
        setTimeout(loop, 10);
    }
}

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.