hw4

spring-mass-damper system

by pkin159

HTML

<div id="info">Spring (hw4 helper)
  <br/>
  <a href="javascript:Higher();">Higher</a>
  <a href="javascript:Lower();">Lower</a>
</div>
<div id="euler">Euler</div>
<div id="rk4">Rk4</div>
<div id="midpoint">MidPoint</div>
</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: 43%;
  Left: 66.5%;
  padding: 10px;
  text-align: center;
  color: #ff0000
}

#rk4 {
  position: absolute;
  top: 43%;
  Left: 27%;
  padding: 10px;
  text-align: center;
  color: #00ff00
}

#midpoint {
  position: absolute;
  top: 43%;
  Left: 45%;
  padding: 10px;
  text-align: center;
  color: #0000ff
}

body {
  overflow: hidden;
}

JavaScript

var camera, scene, renderer;
var mesh, border;
var pen1 = new THREE.Object3D();
var pen2 = new THREE.Object3D();
var pen3 = new THREE.Object3D();
var clock = new THREE.Clock();

var l = 20,
  g = 9.8;
//var m = 1, k = 5, c = 0;
var x = [];
var x2 = [];
var x3 = [];

function Higher() {
  x[0] = Math.PI / 3, x[1] = 0;
  x2[0] = Math.PI / 3, x2[1] = 0;
  x3[0] = Math.PI / 3, x3[1] = 0;
}

function Lower() {
  x[0] = Math.PI / 6, x[1] = 0;
  x2[0] = Math.PI / 6, x2[1] = 0;
  x3[0] = Math.PI / 6, x3[1] = 0;
}

function deriv(x) {
  var ff = [];
  ff.push(x[1]); // x_dot = v;
  ff.push(-(x[1] + g * Math.sin(x[0])) / l); // v_dot = 1/m *(-cx_dot -kx)
  return ff;
}

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

  // Euler's method
  var f = deriv(x);
  for (var i = 0; i < n; i++) {
    x[i] += f[i] * dt;
  }
}

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

  var f = deriv(x);
  var ftemp = [];
  for (var i = 0; i < n; i++) {
    ftemp[i] = x[i] + f[i] * dt / 2;
  }
  var f2 = deriv(ftemp);
  for (var i = 0; i < n; i++) {
    x[i] = x[i] + f2[i] * dt;
  }

}

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

  var k1 = deriv(x);
  var k2temp = [];
  for (var i = 0; i < n; i++) {
    k2temp[i] = x[i] + k1[i] * 1 / 2 * dt;
  }
  var k2 = deriv(k2temp);
  var k3temp = [];
  for (var i = 0; i < n; i++) {
    k3temp[i] = x[i] + k2[i] * 1 / 2 * dt;
  }
  var k3 = deriv(k3temp);
  var k4temp = [];
  for (var i = 0; i < n; i++) {
    k4temp[i] = x[i] + k3[i] * dt;
  }
  var k4 = deriv(k4temp);
  for (var i = 0; i < n; i++) {
    x[i] = x[i] + 1 / 6 * (k1[i] + 2 * k2[i] + 2 * k3[i] + k4[i]) * 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());
  pen1.add(mesh);
  mesh2 = mesh.clone();
  pen2.add(mesh2);
  mesh3 = mesh.clone();
 ...