Autocatalytic process
From JSXGraph Wiki
Autocatalytic population growth model
In time [math]\displaystyle{ \Delta t }[/math] the population grows by [math]\displaystyle{ \alpha\cdot y \cdot(A-y) }[/math] elements: [math]\displaystyle{ \Delta y = \alpha\cdot y\cdot \Delta t \cdot(A-y) }[/math], that is [math]\displaystyle{ \frac{\Delta y}{\Delta t} = \alpha\cdot y \cdot(A-y) }[/math].
With [math]\displaystyle{ \Delta \to 0 }[/math] we get [math]\displaystyle{ \frac{d y}{d t} = \alpha\cdot y \cdot (A-y) }[/math], i.e. [math]\displaystyle{ y' = \alpha\cdot y \cdot (A-y) }[/math].
The initial population is [math]\displaystyle{ y(0)= s }[/math], [math]\displaystyle{ A := 5 }[/math].
The blue line is the simulation with [math]\displaystyle{ \Delta t = 0.1 }[/math].
The JavaScript code
<jsxgraph height="500" width="600" board="board" box="box1">
brd = JXG.JSXGraph.initBoard('box1', {originX: 10, originY: 250, unitX: 40, unitY: 20, axis:true});
var t = brd.createElement('turtle',[4,3,70]);
var s = brd.createElement('slider', [[0,-5], [10,-5],[-5,0.5,5]], {name:'s'});
var alpha = brd.createElement('slider', [[0,-6], [10,-6],[-1,0.2,2]], {name:'α'});
var e = brd.createElement('functiongraph', [function(x){return s.X()*Math.exp(alpha.X()*x);}],{strokeColor:'red'});
t.hideTurtle();
A = 5;
function clearturtle() {
t.cs();
t.ht();
}
function run() {
t.setPos(0,s.X());
t.setPenSize(4);
delta = 0.1; // global
x = 0.0; // global
loop();
}
function loop() {
var y = alpha.X()*t.pos[1]*(A-t.pos[1]); // Autocatalytic process
t.lookTo([1.0+t.pos[0],y+t.pos[1]]);
t.fd(delta*Math.sqrt(1+y*y));
x += delta;
if (x<10.0) {
setTimeout(loop,10);
}
}
</jsxgraph>