hw4 helper

spring-mass-damper system

by zx22516969

HTML

<div id="info">Spring (hw4 helper) <br/>
    <a href="javascript:reset();">reset</a>
</div>
<div id="euler">Euler </div>
<div id="midpt">MidPoint </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:50%;
  left:10%;
  color: red;
}
#midpt{
  position: absolute;
  top:35%;
  left:10%;
  color: red;
}
body {
    overflow: hidden;
}

JavaScript

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

var m = 1, k = 5, c =0.51;
var x = [];
var x1 = [];
var t,dt;
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 ODESolver (dt) {
    /*
	var n = x.length;
    var f = deriv (x);
    
    for (var i = 0; i < n; i++) {
        x[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....
    x1[0] = 20*Math.cos(5*this.time);  // fake....
}

function doEuler (dt) {
  let ff = deriv ( x)
  x[0] = x[0] + ff[0]*dt;  // theta
  x[1] = x[1] + ff[1]*dt;
}
function doMidPoint(dt) {
	// predictor:
  let ff = deriv (t, x)
  let predict = [];
  predict.push (x[0] + ff[0] * dt/2)
  predict.push (x[1] + ff[1] * dt/2)
  
  let ffp = deriv (t+dt/2, predict);
  x[0] += ffp[0]*dt
  x[1] += ffp[1]*dt

}
function doRK4(dt){
	let k1=[];
  k1=deriv(t,x);
  let k2=[];
  let y2=[];
  y2.push(x[0]+k1[0]*dt/2);
  y2.push(x[1]+k1[1]*dt/2);
  k2=deriv(t+dt/2,y2);
  
  let k3=[];
  let y3=[];
  y3.push(x[0]+k2[0]*dt/2);
  y3.push(x[1]+k2[1]*dt/2);
  k3=deriv(t+dt/2,y3);
  
  let k4=[];
  let y4=[];
  y4.push(x[0]+k3[0]*dt/2);
  y4.push(x[1]+k3[1]*dt/2);
  k4=deriv(t+dt/2,y4);
  
  x[0]=x[0]+(k1[0]+2*k2[0]+2*k3[0]+k4[0])/6*dt;
  x[1]=x[1]+(k1[1]+2*k2[1]+2*k3[1]+k4[1])/6*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);
		mesh1 = mesh.clone();
  	scene.add (mesh1);
  
    var material = new THREE.LineBasicMaterial({
        color: 0x0000ff
    });

    var...