hw4 helper

spring-mass-damper system

by Bai Shiuan Huang

HTML

<div id="info">Spring (hw4 helper) <br/>
    <a href="javascript:reset();">reset</a>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/92/three.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.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 mousePoint;
var mouse_x, down_true = false;
//var mymouse;
var mouse = new THREE.Vector2();

var clock = new THREE.Clock();

var m = 1, k = 15, c = 0.8;
var x = [];

var line;

function reset() {
	x[0] = 0, x[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 (dt) { // RK4
   /*
	  var n = x.length;
    
    var f = deriv (x);
    
        
    for (var i = 0; i < n; i++) {
        x[i] += f[i]*dt;
    }*/
    
  var n = x.length;
  
  let k1 = deriv(x);
  let f1 = x.slice();//function 1 copy k1 deriv
  for (let i = 0; i < n; i++) {
    f1[i] = x[i] +  f1[i] * (dt / 2);
  }
  
  let k2 = deriv(f1);
	let f2 = f1.slice();
  for (let i = 0; i < n; i++) {
    f2[i] = x[i] + f2[i] * (dt / 2);
  }
  
  let k3 = deriv(f2);
  let f3 = f2.slice();
  for (let i = 0; i < n; i++) {
    f3[i] = x[i] + k3[i] * dt;
  }
  
  var k4 = deriv(f3);
  
  for (let i = 0; i < n; i++) {
    x[i] += (k1[i] + 2*k2[i] + 2*k3[i] + k4[i])/6 * dt;  
  }
    
    
    // fake version
    // let x[0] be a sine function
    /*
    this.time = this.time + dt || 0;
    x[0] = 20*Math.sin(5*this.time);  // fake....
    */
}

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(-40, -0, 0),
    new THREE.Vector3(40, 0, 0));

    var border = new THREE.Line(geometry, material);
    scene.add(border);
    
    renderer = new THREE.WebGLRenderer();
   ...