File: ode_dynamic.html

package info (click to toggle)
jsxgraph 1.3.5+dfsg1-2
  • links: PTS, VCS
  • area: main
  • in suites: bullseye, buster, sid
  • size: 26,044 kB
  • sloc: xml: 5,869; java: 1,072; python: 747; php: 192; makefile: 146; sh: 47
file content (121 lines) | stat: -rw-r--r-- 4,399 bytes parent folder | download
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="../src/loadjsxgraph.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:'&epsilon;<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:'&epsilon;<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:'&gamma;<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:'&gamma;<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>