hw4 helper

spring-mass-damper system

by pkin159

HTML

<div id="info">Spring (hw4 helper) <br/>
    <a href="javascript:reset();">reset</a>
</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
}
body {
    overflow: hidden;
}

JavaScript

var camera, scene, renderer;
var mesh, border;
var clock = new THREE.Clock();

var m = 1, g = 9.8, l = 10;
var theta = [];

function reset() {
	theta[0] = 1.2, theta[1] = 0;
}

function deriv (theta) {
	var ff = [];
    ff.push (theta[1]);                  // x_dot = v;
    ff.push (-(l*theta[1] + g*Math.sin(theta[0]))/m);  // v_dot = 1/m *(-cx_dot -kx)
    return ff;
}

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

    // Euler's method
    var f = deriv(x);
    for (var i = 0; i < n; i++) {
        x[i] += f[i] * dt;
    }
}
function ODESolver2(x,dt){
	var n = x.length;
  
  var f = deriv(x);
  for(var i = 0; i < n; i++){
  	x[i] = x[i] + f[i]/2 * dt;
  }
  var f2 = deriv(x);
  for(var i = 0; i < n; i++){
  	x[i] = x[i] + f2[i] * dt;
  }

}
function ODESolver3(x, dt){
	var n = x.length;
  
  var f = deriv(x);
  
	for(var i = 0; i < n ; i++){
  	k1 = f[i];
    k2 = 1/2*k1*dt;
    k3 = 1/2*k2*dt;
    k4 = k3*dt;
    
    x[i] += 1/6*(k1+2*k2+2*k3+k4)*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 material = new THREE.LineBasicMaterial({
        color: 0x0000ff
    });

    var geometry = new THREE.Geometry();
    geometry.vertices.push(
    new THREE.Vector3(-20, -0, 0),
    new THREE.Vector3(20, 0, 0));
	
    var border = new THREE.Line(geometry, material);
    border.position.set(0,-10,0);
    scene.add(border);
    var border2 = border.clone();
    border2.position.set(25,20,0);
    scene.add(border2);
    var border3 = border.clone();
    border3.position.set(-25,20,0);
    scene.add(border3);
    
    
    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setClearColor(0x888888);

   ...