Pendulum

euler, Rk4

by jmchen

HTML

<div id="info">Pendulum
<a href="javascript:reset(0.25);">lower</a>
<a href="javascript:reset(1.8);">higher</a></div>
<!--div id='eulerM'>Euler</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: 50%;
    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;
var clock = new THREE.Clock();
var x2 = [];
var l = 24, g = 110;
var line;

function reset(angle) {
    x2[0] = angle, x2[1] = 0;
}

function deriv(x) {
    var ff = [];
    ff.push(x[1]); // x_dot = v;
    ff.push(-g/l*Math.sin(x[0]));
    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;
    }
}

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());
    scene.add(mesh);

    var nail = new THREE.Mesh (new THREE.CircleGeometry(1,10),
                               new THREE.MeshBasicMaterial());
    scene.add(nail);

    geometry = new THREE.Geometry();
    geometry.vertices.push (new THREE.Vector3(), new THREE.Vector3());
    line = new THREE.Line (geometry, new THREE.LineBasicMaterial({color:0xffff00}));
    scene.add (line);
    line.visible = true;
    
    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setClearColor(0x888888);

    document.body.appendChild(renderer.domElement);
    window.addEventListener('resize', onWindowResize, false);
//	window.addEventListener( 'mousedown', onDocumentMouseDown, false );
//	window.addEventListener( 'mouseup', onDocumentMouseUp, false );

    // INITIIALIZE ODE
    x2.push(Math.PI/6);
    x2.push(0);
}

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}

function onDocumentMouseDown (event)...