Systems of differential equations: Difference between revisions
From JSXGraph Wiki
A WASSERMANN (talk | contribs)  New page: Display solutions of the ordinary differential equation :<math> y'= f(x,y)</math> with initial value <math>(x_0,y_0)</math>. <html> <form> f<sub>1</sub>(x,y)=<input type="text" id="odeinpu...  | 
				A WASSERMANN (talk | contribs) No edit summary  | 
				||
| (17 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
Display solutions of the ordinary differential equation  | Display solutions of the ordinary differential equation  | ||
:<math>   | :<math> y_1'= f_1(x,y_1,y_2)</math>  | ||
with initial   | :<math> y_2'= f_2(x,y_1,y_2)</math>  | ||
with initial values <math>(x_0,c_1)</math>, <math>(x_0,c_2)</math>.  | |||
<html>  | <html>  | ||
<form>  | <form>  | ||
f<sub>1</sub>(x,  | f<sub>1</sub>(x,y1,y2)=<input type="text" id="odeinput1" value="y1+y2"><br />  | ||
f<sub>2</sub>(x,  | f<sub>2</sub>(x,y1,y2)=<input type="text" id="odeinput2" value="y2+1"><input type=button value="ok" onclick="doIt()">  | ||
</form>  | </form>  | ||
</html>  | </html>  | ||
| Line 11: | Line 12: | ||
var brd = JXG.JSXGraph.initBoard('jxgbox', {axis:true, boundingbox:[-11,11,11,-11]});  | var brd = JXG.JSXGraph.initBoard('jxgbox', {axis:true, boundingbox:[-11,11,11,-11]});  | ||
var N = brd.create('slider',[[-7,9.5],[7,9.5],[-15,10,15]], {name:'N'});  | var N = brd.create('slider',[[-7,9.5],[7,9.5],[-15,10,15]], {name:'N'});  | ||
var P1 = brd.create('point',[  | var P1 = brd.create('point',[1,-1], {name:'(x_0,c_1)'});  | ||
var line = brd.create('line',[function(){return -P1.X();},function(){return 1;},function(){return 0;}]);  | var line = brd.create('line',[function(){return -P1.X();},function(){return 1;},function(){return 0;}],{visible:false});  | ||
var P2 = brd.create('glider',[0  | var P2 = brd.create('glider',[1,-0.5,line], {name:'(x_0,c_2)'});  | ||
function doIt() {  | function doIt() {  | ||
   var   |    var txt1 = document.getElementById("odeinput1").value;  | ||
   f =   |   var txt2 = document.getElementById("odeinput2").value;  | ||
  var snip1 = brd.jc.snippet(txt1, true, 'x, y1, y2');  | |||
  var snip2 = brd.jc.snippet(txt2, true, 'x, y1, y2');  | |||
   f = function (x, yy) {  | |||
      return [snip1(x, yy[0], yy[1]), snip2(x, yy[0], yy[1])];  | |||
  }  | |||
   brd.update();  |    brd.update();  | ||
}  | }  | ||
function ode() {  | function ode() {  | ||
    return JXG.Math.Numerics.rungeKutta(  |     return JXG.Math.Numerics.rungeKutta('heun', [P1.Y(),P2.Y()], [P1.X(), P1.X()+N.Value()], 200, f);  | ||
}  | }  | ||
var   | var g1 = brd.create('curve', [[0],[0]], {strokeColor:'red', strokeWidth:2, name:'y_1', withLabel:false});  | ||
var g2 = brd.create('curve', [[0],[0]], {strokeColor:'black', strokeWidth:2, name:'y_2', withLabel:false});  | |||
g1.updateDataArray = function() {  | |||
     var data = ode();  |      var data = ode();  | ||
     var h = N.Value()/200;  |      var h = N.Value()/200;  | ||
    var i;  | |||
     this.dataX = [];  |      this.dataX = [];  | ||
     this.dataY = [];  |      this.dataY = [];  | ||
     for(  |      for(i=0; i<data.length; i++) {  | ||
         this.dataX[i] =   |          this.dataX[i] = P1.X()+i*h;  | ||
         this.dataY[i] = data[i][0];  |          this.dataY[i] = data[i][0];  | ||
    }  | |||
};  | |||
g2.updateDataArray = function() {  | |||
    var data = ode();  | |||
    var h = N.Value()/200;  | |||
    var i;  | |||
    this.dataX = [];  | |||
    this.dataY = [];  | |||
    for(i=0; i<data.length; i++) {  | |||
        this.dataX[i] = P2.X()+i*h;  | |||
        this.dataY[i] = data[i][1];  | |||
     }  |      }  | ||
};  | };  | ||
doIt();  | doIt();  | ||
</jsxgraph>  | </jsxgraph>  | ||
===See also===  | |||
* [[Differential equations]]  | |||
* [[Lotka-Volterra equations]]  | |||
* [[Epidemiology: The SIR model]]  | |||
* [[Population growth models]]  | |||
* [[Autocatalytic process]]  | |||
* [[Logistic process]]  | |||
===The underlying JavaScript code===  | |||
<source lang="xml">  | |||
<form>  | |||
f<sub>1</sub>(x,y1,y2)=<input type="text" id="odeinput1" value="y1+y2"><br />  | |||
f<sub>2</sub>(x,y1,y2)=<input type="text" id="odeinput2" value="y2+1"><input type=button value="ok" onclick="doIt()">  | |||
</form>  | |||
</source>  | |||
<source lang="javascript">  | |||
var brd = JXG.JSXGraph.initBoard('jxgbox', {axis:true, boundingbox:[-11,11,11,-11]});  | |||
var N = brd.create('slider',[[-7,9.5],[7,9.5],[-15,10,15]], {name:'N'});  | |||
var P1 = brd.create('point',[1,-1], {name:'(x_0,c_1)'});  | |||
var line = brd.create('line',[function(){return -P1.X();},function(){return 1;},function(){return 0;}],{visible:false});  | |||
var P2 = brd.create('glider',[1,-0.5,line], {name:'(x_0,c_2)'});  | |||
function doIt() {  | |||
  var txt1 = document.getElementById("odeinput1").value;  | |||
  var txt2 = document.getElementById("odeinput2").value;  | |||
  var snip1 = brd.jc.snippet(txt1, true, 'x, y1, y2');  | |||
  var snip2 = brd.jc.snippet(txt2, true, 'x, y1, y2');  | |||
  f = function (x, yy) {  | |||
      return [snip1(x, yy[0], yy[1]), snip2(x, yy[0], yy[1])];  | |||
  }  | |||
  brd.update();  | |||
}  | |||
function ode() {  | |||
   return JXG.Math.Numerics.rungeKutta('heun', [P1.Y(),P2.Y()], [P1.X(), P1.X()+N.Value()], 200, f);  | |||
}  | |||
var g1 = brd.create('curve', [[0],[0]], {strokeColor:'red', strokeWidth:2, name:'y_1', withLabel:false});  | |||
var g2 = brd.create('curve', [[0],[0]], {strokeColor:'black', strokeWidth:2, name:'y_2', withLabel:false});  | |||
g1.updateDataArray = function() {  | |||
    var data = ode();  | |||
    var h = N.Value()/200;  | |||
    var i;  | |||
    this.dataX = [];  | |||
    this.dataY = [];  | |||
    for(i=0; i<data.length; i++) {  | |||
        this.dataX[i] = P1.X()+i*h;  | |||
        this.dataY[i] = data[i][0];  | |||
    }  | |||
};  | |||
g2.updateDataArray = function() {  | |||
    var data = ode();  | |||
    var h = N.Value()/200;  | |||
    var i;  | |||
    this.dataX = [];  | |||
    this.dataY = [];  | |||
    for(i=0; i<data.length; i++) {  | |||
        this.dataX[i] = P2.X()+i*h;  | |||
        this.dataY[i] = data[i][1];  | |||
    }  | |||
};  | |||
doIt();  | |||
</source>  | |||
[[Category:Examples]]  | |||
[[Category:Calculus]]  | |||
Latest revision as of 11:34, 19 January 2017
Display solutions of the ordinary differential equation
- [math]\displaystyle{ y_1'= f_1(x,y_1,y_2) }[/math]
 - [math]\displaystyle{ y_2'= f_2(x,y_1,y_2) }[/math]
 
with initial values [math]\displaystyle{ (x_0,c_1) }[/math], [math]\displaystyle{ (x_0,c_2) }[/math].
See also
- Differential equations
 - Lotka-Volterra equations
 - Epidemiology: The SIR model
 - Population growth models
 - Autocatalytic process
 - Logistic process
 
The underlying JavaScript code
<form>
f<sub>1</sub>(x,y1,y2)=<input type="text" id="odeinput1" value="y1+y2"><br />
f<sub>2</sub>(x,y1,y2)=<input type="text" id="odeinput2" value="y2+1"><input type=button value="ok" onclick="doIt()">
</form>
var brd = JXG.JSXGraph.initBoard('jxgbox', {axis:true, boundingbox:[-11,11,11,-11]});
var N = brd.create('slider',[[-7,9.5],[7,9.5],[-15,10,15]], {name:'N'});
var P1 = brd.create('point',[1,-1], {name:'(x_0,c_1)'});
var line = brd.create('line',[function(){return -P1.X();},function(){return 1;},function(){return 0;}],{visible:false});
var P2 = brd.create('glider',[1,-0.5,line], {name:'(x_0,c_2)'});
function doIt() {
  var txt1 = document.getElementById("odeinput1").value;
  var txt2 = document.getElementById("odeinput2").value;
  var snip1 = brd.jc.snippet(txt1, true, 'x, y1, y2');
  var snip2 = brd.jc.snippet(txt2, true, 'x, y1, y2');
  f = function (x, yy) {
      return [snip1(x, yy[0], yy[1]), snip2(x, yy[0], yy[1])];
  }
  brd.update();
}
function ode() {
   return JXG.Math.Numerics.rungeKutta('heun', [P1.Y(),P2.Y()], [P1.X(), P1.X()+N.Value()], 200, f);
}
var g1 = brd.create('curve', [[0],[0]], {strokeColor:'red', strokeWidth:2, name:'y_1', withLabel:false});
var g2 = brd.create('curve', [[0],[0]], {strokeColor:'black', strokeWidth:2, name:'y_2', withLabel:false});
g1.updateDataArray = function() {
    var data = ode();
    var h = N.Value()/200;
    var i;
    this.dataX = [];
    this.dataY = [];
    for(i=0; i<data.length; i++) {
        this.dataX[i] = P1.X()+i*h;
        this.dataY[i] = data[i][0];
    }
};
g2.updateDataArray = function() {
    var data = ode();
    var h = N.Value()/200;
    var i;
    this.dataX = [];
    this.dataY = [];
    for(i=0; i<data.length; i++) {
        this.dataX[i] = P2.X()+i*h;
        this.dataY[i] = data[i][1];
    }
};
doIt();