hw4 helper

spring-mass-damper system

by k6e2n0t12

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>
<div id="rk4">RK4 </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:30%;
  color: red;
}
#midpt{
  position: absolute;
  top:35%;
  left:30%;
  color: red;
}
#rk4{
  position: absolute;
  top:20%;
  left:30%;
  color: red;
}
body {
    overflow: hidden;
}

JavaScript

var camera, scene, renderer;
var mesh, border;
var clock = new THREE.Clock();
var mesh1;
var time0,time1,time10,time11,time20,time21,check=0,check1=0,check2=0;
var euler,midpt,rk4;

var m = 5, k = 5, c = .31;
var x = [];
var x1 = [];
var x2 = [];

function reset() {
	x[0] = 20, x[1] = 0;
  x1[0] = 20 ,x1[1] = 0;
  x2[0] = 20 ,x2[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 f = deriv(x);
    var n = x.length;
    for (var i = 0; i < n; i++) {
        x[i] = x[i]+ f[i] * dt;
    }
  	
  	var f1 = deriv(x1);
    var temp=[];
  	temp.push(x1[0]);
  	temp.push(x1[1]);
  	for(var i = 0;i<n;i++){
      temp[i] = x1[i]+f1[i]*(dt/2);
    }
  	f1=deriv(temp);
  	for(var i = 0;i<n;i++){
      x1[i] = x1[i]+f1[i]*dt;
    }
  	
    for (var i = 0; i < n; i++) {
      	var k1 = deriv(x2)[i];
      
      	var temp1 =[];
      	temp1.push(x2[0]+0.5*dt);
      	temp1.push(x2[1]+0.5*k1*dt);
      	var k2 = deriv(temp1)[i];
      
      	temp1[0]=x2[0]+0.5*dt;
      	temp1[1]=x2[1]+0.5*k2*dt
      	var k3 = deriv(temp1)[i];
      
      	temp1[0]=x2[0]+dt;
      	temp1[1]=x2[1]+k3*dt;
      	var k4 = deriv(temp1)[i];
      	
        x2[i] = x2[i]+ (k1+2*k2+2*k3+k4)*dt/6;
    }
}

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);
		mesh2 = mesh.clone();
  	scene.add (mesh2);
  
    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 =...