spring

euler, Rk4

by jmchen

HTML

<div id="info">Spring Simulation
 <br/> <a href="javascript:reset();">RESET</a>
 <a href="javascript:deltaTime(0);">Real time</a>  
 <a href="javascript:deltaTime(1);">Faster</a>
 <a href="javascript:deltaTime(-1);">Slower</a>
</div>
<div id='eulerM'>Euler</div>
<div id='RK4M'>RK4</div>
<div id='ImEuler'>ImplicitEuler</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>

CSS

#info {
    position: absolute;
    top: 0px;
    width: 100%;
    padding: 10px;
    text-align: center;
    color: #ffff00
}
#eulerM {
    position: absolute;
    top: 40%;
    left: 30%;
    color: white;
}
#RK4M {
    position: absolute;
    top: 60%;
    left: 30%;
    color: cyan;
}
#ImEuler {
    position: absolute;
    top: 80%;
    left: 30%;
    color: yellow;
}
a {
    color: yellow
}
body {
    overflow: hidden;
}

JavaScript

// period T = 2PI sqrt (m/k)
//

var camera, scene, renderer;
var mesh, mesh2, mesh3;
var clock = new THREE.Clock();
var ddt = 0.01, dtMode = 0;
var x1 = [],
    x2 = [], x3=[];

var m = 1,
    k = 10,
    c = 0.;

function reset() {
    x1[0] = 20, x1[1] = 0;
    x2[0] = 20, x2[1] = 0;
    x3[0] = 20, x3[1] = 0;
}

function deltaTime (mode) {
    if (mode > 0) {
        ddt += 0.01;
    } else if (mode < 0) {
        ddt -= 0.01;
        if (ddt < 0) ddt = 0.01;
    }    
	dtMode = mode;
}

function deriv(x) {
    var ff = [];
    ff.push(x[1]); // x_dot = v;
    ff.push(-(c * x[1] + k * x[0]) / m);
    return ff;
}

function MidPoint(x, dt) {
    var n = x.length;

    var xcopy = x.slice(0);
    var f = deriv(x);

    // y(x+0.5h)
    for (var i = 0; i < n; i++) {
        xcopy[i] += f[i] * dt / 2;
    }

    f = deriv(xcopy);
    for (var i = 0; i < n; i++) {
        x[i] += f[i] * dt;
    }
}

function Euler(x, dt) {
    var n = x.length;

    var f = deriv(x);
    for (var i = 0; i < n; i++) {
        x[i] += f[i] * dt;
    }
}
function invert (a) {
    var ainv = [];
    
    var det = a[0][0] * a[1][1] - a[0][1]*a[1][0];
    ainv.push ([a[1][1]/det, -a[0][1]/det]);
    ainv.push ([-a[1][0]/det, a[0][0]/det]);
    return ainv;
}
function ImplicitEuler (x, dt) {
	var a = [[1, -dt], [k*dt/m, 1+ (dt*c/m)]];
    var ainv = invert (a);
    var xx = ainv[0][0]*x[0] + ainv[0][1]*x[1];
    var vv = ainv[1][0]*x[0] + ainv[1][1]*x[1];
    x[0] = xx;
    x[1] = vv;
}

init();
animate();

function init() {
    scene = new THREE.Scene();

    camera = new THREE.OrthographicCamera(-50, 50, 50, -50, -10, 10);
    camera.position.z = 10;
    scene.add(camera);


    mesh = new THREE.Mesh(new THREE.CircleGeometry(1, 10), new THREE.MeshBasicMaterial());
    mesh2 = mesh.clone();
    scene.add(mesh2);
    mesh3 = mesh.clone();
    scene.add(mesh3);
    scene.add(mesh);

    var material = new THREE.LineBasicMaterial({
        color: 0x0000ff
    });

    var geometry = new...