1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121
|
<html>
<head>
<title>JSXGraph example</title>
<link rel="stylesheet" type="text/css" href="../distrib/jsxgraph.css" />
<script type="text/javascript" src="/javascript/prototype/prototype.js"></script>
<script type="text/javascript" src="../distrib/jsxgraphcore.js"></script>
</head>
<body>
<h2>Solving ODEs numerically with explicit Runge-Kutta methods</h2>
<h3>Lotka-Volterra equations (Predator-Prey equations)</h3>
<div style="width:800px">
<div id="jxgbox" class="jxgbox" style="width:600px; height:600px; float:left"></div>
<div id="jxgbox2" class="jxgbox" style="width:600px; height:600px;"></div>
</div>
<script type="text/javascript">
/* <![CDATA[ */
b = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-2, 28, 28, -2], axis: true, grid: false});
s = b._slider([[20.0,26.0],[25.0,26.0],[0.0,0.3,1.0]],{name:'ε<sub>1</sub>'});
st = b._text([20,25, "Birth rate predators"]);
u = b._slider([[20.0,24.0],[25.0,24.0],[0.0,0.7,1.0]],{name:'ε<sub>2</sub>'});
ut = b._text([20,23, "Death rate predators"]);
o = b._slider([[10.0,26.0],[15.0,26.0],[0.0,0.1,1.0]],{name:'γ<sub>1</sub>'});
ot = b._text([10,25, "Death rate preys/per predator"]);
p = b._slider([[10.0,24.0],[15.0,24.0],[0.0,0.3,1.0]],{name:'γ<sub>2</sub>'});
pt = b._text([10,23, "Reproduction rate pred./per prey"]);
scp1 = b._glider([12, 0, b.defaultAxes.x], {name: "", showinfobox: false});
scp2 = b._point([function() { return scp1.X(); }, 22], {visible: false});
scl = b._segment([scp1, scp2], {strokeWidth: '1px'});
startpred = b._glider([0, 10, b.defaultAxes.y], {name:'Preys'});
startprey = b._glider([0, 5, b.defaultAxes.y], {name:'Predators'});
var g3 = null;
function ode() {
var I = [0, 25];
var N = 1000;
var f = function(t, x) {
var bpred = s.Value();//0.3;
var bprey = u.Value();//0.7;
var dpred = o.Value();//0.1;
var dprey = p.Value();//0.3;
var y = [];
y[0] = x[0]*(bpred - dpred*x[1]);
y[1] = -x[1]*(bprey - dprey*x[0]);
return y;
};
var x0 = [startpred.Y(), startprey.Y()];
var data = JXG.Math.Numerics.rungeKutta('euler', x0, I, N, f);
var t = [];
var q = I[0];
var h = (I[1]-I[0])/N;
for(var i=0; i<data.length; i++) {
data[i].push(q);
q += h;
}
return data;
}
function createCurve() {
var data = ode();
var t = [];
var dataprey = [];
var datapred = [];
for(var i=0; i<data.length; i++) {
t[i] = data[i][2];
datapred[i] = data[i][0];
dataprey[i] = data[i][1];
}
g3 = b._curve([t, datapred], {strokeColor:'red', strokeWidth:'2px'});
g4 = b._curve([t, dataprey], {strokeColor:'blue', strokeWidth:'2px'});
g4.updateDataArray = function() {
var data = ode();
this.dataX = [];
g3.dataY = [];
this.dataY = [];
for(var i=0; i<data.length; i++) {
this.dataX[i] = t[i];
g3.dataY[i] = data[i][0];
this.dataY[i] = data[i][1];
}
}
}
createCurve();
// b._text([0.2, 25, '<a href="#" onclick="scp1.setPositionByTransform(JXG.COORDS_BY_USER, -scp1.X(), -scp1.Y()); scp1.visit([25, 0], 4000, 5);;">Animate Glider</a>'], {});
var b2 = JXG.JSXGraph.initBoard('jxgbox2', {boundingbox: [-0.1, 3, 25, -0.1], axis: false, grid: false});
var xax2 = b2._axis([[0, 0], [1, 0]]);
b.addChild(b2);
var dirtytrickdata = 0;
var data = [function () { var x = scp1.X(); for(var i=1; i<g3.dataX.length; i++) { if((x >= g3.dataX[i-1]) && (x <= g3.dataX[i])) { dirtytrickdata = g4.dataY[i]; return g3.dataY[i]; } }; },
function () { return dirtytrickdata; }];
var bar = b2._chart([data], {chartStyle:'bar',labels:['Predator', 'Prey'],width:0.8,dir:'horizontal'});
// sct1 = b.createElement('text', [10, 10, function () { var x = scp1.X(); for(var i=1; i<g3.dataX.length; i++) { if((x >= g3.dataX[i-1]) && (x <= g3.dataX[i])) return 'Preed: ' + g3.dataY[i] + ', Prey: ' + g4.dataY[i]; }; }]);
/* ]]> */
</script>
<div id="debug" style="display:block;"></div>
</body>
</html>
|