JSXGraph
JSXGraph share

Share

Autocatalytic process
QR code 
<iframe 
    src="http://jsxgraph.uni-bayreuth.de/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 Δt\Delta t the population grows by α⋅y⋅(A−y)\alpha\cdot y \cdot(A-y) members:

Δy=α⋅y⋅Δt⋅(A−y), that is ΔyΔt=α⋅y⋅(A−y).

With the limit process Δt→0\Delta t\to 0 we get

dydt=α⋅y⋅(A−y), i.e. y′=α⋅y⋅(A−y). The initial population is y(0)=sy(0)= s, A:=5A := 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()]);
246810121424681012−2−4−6−8−10−12
s = 0.50
α = 0.20
<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.