hw4_1

spring-mass-damper system

by YouTingKuo

HTML

<div id="info">Spring <br/>
    <a href="javascript:reset();">reset</a>
</div>
<div id="Euler">Euler's method </div>
<div id="Mid">Midpoint method </div>
<div id="RK4">Runge-Kutta 4th order </div>
<div id="dataShow"></div>
<div id="dataShow1"></div>
<div id="dataShow2"></div>
<div id="dataShow3"></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
}
#Euler {
    position: absolute;
    top: 30%;
    left: 10%;
    padding: 10px;
    color: #ffffff
}
#Mid {
    position: absolute;
    top: 50%;
    left: 10%;
    padding: 10px;
    color: #ffffff
}
#RK4 {
    position: absolute;
    top: 70%;
    left: 10%;
    padding: 10px;
    color: #ffffff
}
#dataShow {
    position: absolute;
    bottom: 85px;
    width: 100%;
    padding:5px;
    text-align: center;
    color: #00ffff;
}
#dataShow1 {
    position: absolute;
    bottom: 60px;
    width: 100%;
    padding:5px;
    text-align: center;
    color: #00ffff;
}
#dataShow2 {
    position: absolute;
    bottom: 35px;
    width: 100%;
    padding:5px;
    text-align: center;
    color: #00ffff;
}
#dataShow3 {
    position: absolute;
    bottom: 10px;
    width: 100%;
    padding:5px;
    text-align: center;
    color: #00ffff;
}
body {
    overflow: hidden;
}

JavaScript

var camera, scene, renderer;
var mesh, mesh2, mesh3, border, show, show1, show2, show3;
var clock = new THREE.Clock();

var m = 1, k = 3, c = .0;
var x = [], u = [], y = [], z = [];
var a = 0, p1, p2, b = 0, d = 0, q1, q2, r1, r2;
var s1, s2, s3, t1, t2, t3;
var cycle;

function reset() {
	x[0] = 20, x[1] = 0;
  y[0] = 20, y[1] = 0;
  z[0] = 20, z[1] = 0;
}

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


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

function ODESolver_Mid (dt) {
		var n = y.length;
  	var f = deriv(y);
  	for(var i = 0; i < n; i++)
      	u[i] = y[i] + f[i] * (dt/2);
  	f = deriv(u);
  	for(var i = 0; i < n; i++)
      	y[i] += f[i] * dt;
}

function ODESolver_RK4 (dt) {
    var n = z.length;
  	var f = deriv(z);
    for(var i = 0; i < n; i++) {
        k1 = f[i];
        
        var t = [];
        t[0] = z[0] + 0.5*dt;
        t[1] = z[1] + 0.5*k1*dt;
        var f2 = deriv(t);
        k2 = f2[i];
        
        t[0] = z[0] + 0.5*dt;
        t[1] = z[1] + 0.5*k2*dt;
        var f3 = deriv(t);
        k3 = f3[i];
        
        t[0] = z[0] + dt;
        t[1] = z[1] + k3*dt;
        var f4 = deriv(t);
        k4 = f4[i];
        
        z[i] += (k1+2*k2+2*k3+k4)*dt/6;
    }
}

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);
    mesh2 = new THREE.Mesh(new THREE.CircleGeometry(1, 10), new THREE.MeshBasicMaterial());
    scene.add(mesh2);
    mesh3 = new THREE.Mesh(new THREE.CircleGeometry(1, 10), new THREE.MeshBasicMaterial());
    scene.add(mesh3);

    var material =...