JSXGraph
JSXGraph share

Share

Logistic process
QR code 
<iframe 
    src="http://jsxgraph.org/share/iframe/logistic-process" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Logistic process" 
    allowfullscreen
></iframe>
This code has to 
<button onClick="run()">Start</button>
<button onClick="clearturtle()">Reset</button>


<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: [-0.5, 11.5, 14.5, -11.5], axis: true, keepaspectratio: true });
    var t = board.create('turtle', [4, 3, 70]);
    var s = board.create('slider', [[0, -5], [10, -5], [0, 0.5, 5]], { name: 's' });
    var alpha = board.create('slider', [[0, -6], [10, -6], [-1, 0.9, 2]], { name: 'α' });
    
    t.hideTurtle();
    
    var A = 5;
    var tau = 0.3;
    
    function clearturtle() {
        t.cs();
        t.ht();
    }
    
    function run() {
        t.setPos(0, s.Value());
        t.setPenSize(4);
        dx = 0.1; // global
        x = 0.0; // global
        loop();
    }
    
    function loop() {
        var dy = (alpha.Value() * t.Y() - tau * t.Y() * t.Y()) * dx; // Logistic 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 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: [-0.5, 11.5, 14.5, -11.5], axis: true, keepaspectratio: true });
var t = board.create('turtle', [4, 3, 70]);
var s = board.create('slider', [[0, -5], [10, -5], [0, 0.5, 5]], { name: 's' });
var alpha = board.create('slider', [[0, -6], [10, -6], [-1, 0.9, 2]], { name: 'α' });

t.hideTurtle();

var A = 5;
var tau = 0.3;

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

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

function loop() {
    var dy = (alpha.Value() * t.Y() - tau * t.Y() * t.Y()) * dx; // Logistic process
    t.moveTo([dx + t.X(), dy + t.Y()]);
    x += dx;
    if (x < 20.0) {
        setTimeout(loop, 10);
    }
}
In time $\Delta t$ the population grows by $\alpha\cdot y -\tau\cdot y^2$ elements: $\Delta y = (\alpha\cdot y- \tau\cdot y^2)\cdot \Delta t$, that is $\frac{\Delta y}{\Delta t} = \alpha\cdot y -\tau\cdot y^2$. With $\Delta t\to 0$ we get $\frac{d y}{d t} = \alpha\cdot y -\tau\cdot y^2$, i.e. $y' = \alpha\cdot y -\tau\cdot y^2$. The initial population is $y(0)= s$, $\tau =0.3$.
<button onClick="run()">Start</button>
<button onClick="clearturtle()">Reset</button>

// Define the id of your board in BOARDID

var board = JXG.JSXGraph.initBoard(BOARDID, { boundingbox: [-0.5, 11.5, 14.5, -11.5], axis: true, keepaspectratio: true });
var t = board.create('turtle', [4, 3, 70]);
var s = board.create('slider', [[0, -5], [10, -5], [0, 0.5, 5]], { name: 's' });
var alpha = board.create('slider', [[0, -6], [10, -6], [-1, 0.9, 2]], { name: 'α' });

t.hideTurtle();

var A = 5;
var tau = 0.3;

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

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

function loop() {
    var dy = (alpha.Value() * t.Y() - tau * t.Y() * t.Y()) * dx; // Logistic 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 ShareAlike 4.0 International License.
Please note you have to mention The Center of Mobile Learning with Digital Technology in the credits.