hw4 helper

spring-mass-damper system

HTML

<div id="info">Spring (hw4 helper) <br/>
    <a href="javascript:reset();">reset</a>
</div>
<div id="centerText"> test
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r70/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;
}
#centerText {
  position: absolute;
  top: 50vh;
  right: 50vw;
  text-align: center;
  color: #ff00ff
}

JavaScript

var camera, scene, renderer;
var mesh, line;
var clock = new THREE.Clock();
var nowDate;
var m = 1, k = 5, c = .51;
var x = [];
var vNow, vOld;
var then;
var mouseFlag = 0;
var mouse = new THREE.Vector2()
function reset() {
	x[0] = 20, 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 catchEnds() {
  if (vNow * vOld < 0) { // velocity changes sign
    //$('#centerText').text ( 'turn')
    let now = new Date()
    $('#centerText').text('period = ' + 2 * (now - then) / 1000)
    then = now;
  }
}
function ODESolver (dt) {
    
      var n = x.length;
      
        // Euler's
        var f = deriv(x);
        for (var i = 0; i < n; i++) {
          x[i] += f[i] * dt;
        }
      
      // midpoint
      /*
      let xsave = x.slice();  // 存現在的x & v
      var f = deriv(x);       // initial tangent
      for (let i = 0; i < n; i++) {
        x[i] += f[i] * (dt / 2);  // half step
      }
      var f = deriv(x);       // evaluate tangent at halfstep
      for (let i = 0; i < n; i++) {
        // full step with midpoint tangent from saved (x,v)
        x[i] = xsave[i] + f[i] * 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();
		document.addEventListener('mousedown', onDocumentMouseDown, false);
    document.addEventListener('mouseup', onDocumentMouseUp, false);
    document.addEventListener('mousemove', onDocumentMouseMove, false);
    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.LineDashedMaterial({
        color:...