hw4 helper

spring-mass-damper system

by 蔡 育曄

HTML

<div id="info">Spring Simulation <br/>
    <a href="javascript:reset();">reset</a>
</div>
<div id = 'euler'>Euler</div>
<div id = 'midpoint'>MidPoint</div>
<div id = 'rk4'>RK4</div>
<div id = 'eulerText'></div>
<div id = 'midpointText'></div>
<div id = 'rk4Text'></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;
}
#euler {
  position: absolute;
    top: 35vh;
    width: 25vw;
    text-align: center;
    color: #ffff00
}
#eulerText {
  position: absolute;
    top: 35vh;
    right: 50%;
    text-align: center;
    color: #ffff00
}
#midpoint {
    position: absolute;
   top: 50vh;
   width: 30vw;
   color: #00ffff;
   text-align: center;
}
#midpointText {
    position: absolute;
   top: 50vh;
   right: 50%;
   color: #00ffff;
   text-align: center;
}
#rk4 {
   position: absolute;
   top: 65vh;
   width: 25vw;
   color: #ff00ff;
   text-align: center;
}
#rk4Text {
   position: absolute;
   top: 65vh;
   right: 50%;
   color: #ff00ff;
   text-align: center;
}

JavaScript

var camera, scene, renderer;
var mesh, border,mesh2,mesh3;
var clock = new THREE.Clock();
var nowDate,EulerT,midpiointT,RK4T;
var nowEulerv = 0, tmpEulerv, nowMPv = 0, tmpMPv, nowRK4v = 0, tmpRK4v;
var idealPeriod ;
var m = 1, k = 25
//var c = 0.251;
var x = [],x2 = [],x3 = [];

function reset() {
	 x[0] = 20;
   x[1] = 0;
  x2[0] = 20;
  x2[1] = 0;
  x3[0] = 20;
  x3[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)
   ff.push ( -k * x[0] / m); // v_dot = 1/m *(-kx)
    return ff;
}

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

    // Euler's method
    var f = deriv(x);
    x[0] += f[0] * dt;
    x[1] += f[1] * dt;
}

function doMidPoint(dt) {
	// predictor:
  let ff = deriv (x2)
  let predict = [];
  predict.push (x2[0] + ff[0] * dt/2)
  predict.push (x2[1] + ff[1] * dt/2)
  
  let ffp = deriv (predict);
  x2[0] += ffp[0]*dt
  x2[1] += ffp[1]*dt

}

function doRK4(dt) {
	let k1 = [];
  k1 = deriv (x3);
  
  let k2 = [], y2 = [];
  y2.push(x3[0] + k1[0]*dt/2);
  y2.push(x3[1] + k1[1]*dt/2);
  k2 = deriv (y2);
  
  let k3 = [], y3 = [];
  y3.push(x3[0] + k2[0]*dt/2);
  y3.push(x3[1] + k2[1]*dt/2);
  k3 = deriv (y3);
  
  let k4 = [], y4 = [];
  y4.push(x3[0] + k3[0]*dt);
  y4.push(x3[1] + k3[1]*dt);
	k4 = deriv (y4);
  
  x3[0] = x3[0] + (k1[0] + 2*k2[0] + 2*k3[0] + k4[0])/6*dt;
  x3[1] = x3[1] + (k1[1] + 2*k2[1] + 2*k3[1] + k4[1])/6*dt;

}

function compare() {

	if(tmpEulerv * nowEulerv < 0 ) {
		let nowTime = new Date();
    $('#eulerText').text('period = ' + 2*(nowTime-EulerT) / 1000);
    
   	EulerT = nowTime; 
  }
  if(tmpMPv * nowMPv < 0 ) {
  	let nowTime = new Date();
    $('#midpointText').text('period = ' + 2*(nowTime-midpiointT) / 1000);
    midpiointT = nowTime; 
  }
  if(nowRK4v * tmpRK4v < 0 ) {
    let nowTime = new Date();
    $('#rk4Text').text('period = ' + 2*(nowTime-RK4T) / 1000);
    RK4T = nowTime;
  }
    
}

/*function...