JSXGraph
JSXGraph share

Share

Differential equations
Show plain example
QR code 
<iframe 
    src="https://jsxgraph.uni-bayreuth.de/share/iframe/differential-equations" 
    style="border: 1px solid black; overflow: hidden; width: 550px; aspect-ratio: 55 / 65;" 
    name="JSXGraph example: Differential equations" 
    allowfullscreen
></iframe>
This code has to 
f(t,y):<input type="text" id="odeinput" value="(2-t)*y + c"><input type=button value="ok" onclick="doPlot()">

<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 4.0 International License.
    https://creativecommons.org/licenses/by/4.0/
    
    Please note you have to mention 
    The Center of Mobile Learning with Digital Technology
    in the credits.
    */
    
    const BOARDID = 'board-0';

    const board = JXG.JSXGraph.initBoard(BOARDID, {axis:true, boundingbox:[-11,11,11,-11]});
    
    var N = board.create('slider', [[-7, 9.5], [7, 9.5], [-15, 10, 15]], {name:'N'});
    var slider = board.create('slider', [[-7, 8], [7, 8], [-15, 0, 15]], {name:'c'});
    var P = board.create('point', [0, 1], {name:'(t_0, y_0)'});
    var f;
    
    var doPlot = function() {
        var snip = board.jc.snippet(document.getElementById('odeinput').value, true, 't, y');
        f = (t, y) => [snip(t, y[0])];
        board.update();
    }
    
    // Solve ODE
    var ode = function() {
       return JXG.Math.Numerics.rungeKutta('heun', [P.Y()], [P.X(), P.X()+N.Value()], 200, f);
    }
    
    var g = board.create('curve', [[0],[0]], {strokeColor:'red', strokeWidth:2});
    
    // In each update, solve ODE from t_0 to t_0 + N and plot solution
    g.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] = P.X() + i * h;
            this.dataY[i] = data[i][0];
        }
    };
    
    // Inital plotting
    doPlot();
    
 </script> 
/*
This example is licensed under a 
Creative Commons Attribution 4.0 International License.
https://creativecommons.org/licenses/by/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!

const board = JXG.JSXGraph.initBoard(BOARDID, {axis:true, boundingbox:[-11,11,11,-11]});

var N = board.create('slider', [[-7, 9.5], [7, 9.5], [-15, 10, 15]], {name:'N'});
var slider = board.create('slider', [[-7, 8], [7, 8], [-15, 0, 15]], {name:'c'});
var P = board.create('point', [0, 1], {name:'(t_0, y_0)'});
var f;

var doPlot = function() {
    var snip = board.jc.snippet(document.getElementById('odeinput').value, true, 't, y');
    f = (t, y) => [snip(t, y[0])];
    board.update();
}

// Solve ODE
var ode = function() {
   return JXG.Math.Numerics.rungeKutta('heun', [P.Y()], [P.X(), P.X()+N.Value()], 200, f);
}

var g = board.create('curve', [[0],[0]], {strokeColor:'red', strokeWidth:2});

// In each update, solve ODE from t_0 to t_0 + N and plot solution
g.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] = P.X() + i * h;
        this.dataY[i] = data[i][0];
    }
};

// Inital plotting
doPlot();
Plot ordinary differential equations (ODE), i.e. display solutions of the ordinary differential equation $y'= f(t,y)$ with initial value $(t_0,y_0)$.
f(t,y): 
f(t,y):<input type="text" id="odeinput" value="(2-t)*y + c"><input type=button value="ok" onclick="doPlot()">
// Define the id of your board in BOARDID

const board = JXG.JSXGraph.initBoard(BOARDID, {axis:true, boundingbox:[-11,11,11,-11]});

var N = board.create('slider', [[-7, 9.5], [7, 9.5], [-15, 10, 15]], {name:'N'});
var slider = board.create('slider', [[-7, 8], [7, 8], [-15, 0, 15]], {name:'c'});
var P = board.create('point', [0, 1], {name:'(t_0, y_0)'});
var f;

var doPlot = function() {
    var snip = board.jc.snippet(document.getElementById('odeinput').value, true, 't, y');
    f = (t, y) => [snip(t, y[0])];
    board.update();
}

// Solve ODE
var ode = function() {
   return JXG.Math.Numerics.rungeKutta('heun', [P.Y()], [P.X(), P.X()+N.Value()], 200, f);
}

var g = board.create('curve', [[0],[0]], {strokeColor:'red', strokeWidth:2});

// In each update, solve ODE from t_0 to t_0 + N and plot solution
g.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] = P.X() + i * h;
        this.dataY[i] = data[i][0];
    }
};

// Inital plotting
doPlot();

license

This example is licensed under a Creative Commons Attribution 4.0 International License.
Please note you have to mention The Center of Mobile Learning with Digital Technology in the credits.