NA_HW4

by ikatyang

HTML

<div id="info">HW4
  <br/>
  <a href="javascript:reset();">reset</a>
  <br/>T*=
  <span id="t0"></span>(s)
</div>
<div id="m1">Euler T=
  <span id="t1">0</span> ( err =
  <span id="e1">0</span> )
</div>
<div id="m2">MidPoint T=
  <span id="t2">0</span> ( err =
  <span id="e2">0</span> )
</div>
<div id="m3">RK4 T=
  <span id="t3">0</span> ( err =
  <span id="e3">0</span> )
</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
}
#m1, #m2, #m3 {
  position: absolute;
  left: 10%;
}
#m1 { top: 35%; }
#m2 { top: 50%; }
#m3 { top: 65%; }
body {
  overflow: hidden;
}

JavaScript

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

var digit = 4;
var m = 1, k = 5, c = .51;
var x1, x2, x3;
var pos = 15;
var size = 50;
var F = [0, 0, 0];
var Fn = 2;
var isMouseDown = false;
var mouseX, mouseY;
var line1, line2, line3;
var clock1, clock2, clock3;
var T;

var isStable = [true, true, true];

function reset() {
  x1 = [20, 0];
  x2 = [20, 0];
  x3 = [20, 0];
}

function deriv(x, n) {
  var _x = x[0];
  var _v = x[1];
  return [
    /* x_dot */ _v,
    /* v_dot */ (c * _v + k * _x - (isMouseDown ? F[n] * Fn : 0)) / -m
  ];
}

function ODESolver(dt) {

  // Euler
  var f1 = deriv(x1, 0);
  for (var i = 0; i < x1.length; i++) x1[i] += f1[i] * dt;
  
  // MidPoint
  var f2 = deriv(x2, 1);
  var x2_mid = x2.slice(0);
  for (var i = 0; i < x2.length; i++) x2_mid[i] += f2[i] * (dt / 2);
  var f2_mid = deriv(x2_mid, 1);
  for (var i = 0; i < x2.length; i++) x2[i] += f2_mid[i] * dt;
  
  // RK4
  var x3_k1 = x3.slice(0);
  var f3_k1 = deriv(x3_k1, 2);
  var x3_k2 = x3.slice(0);
  for (var i = 0; i < x3.length; i++) x3_k2[i] += f3_k1[i] * (dt / 2); 
  var f3_k2 = deriv(x3_k2, 2);
  var x3_k3 = x3.slice(0);
  for (var i = 0; i < x3.length; i++) x3_k3[i] += f3_k2[i] * (dt / 2); 
  var f3_k3 = deriv(x3_k3, 2);
  var x3_k4 = x3.slice(0);
  for (var i = 0; i < x3.length; i++) x3_k4[i] += f3_k3[i] * dt;
  var f3_k4 = deriv(x3_k4, 2);
  for (var i = 0; i < x3.length; i++) 
    x3[i] += (f3_k1[i] + 2 * f3_k2[i] + 2 * f3_k3[i] + f3_k4[i]) / 6 * dt;
}

init();
animate();

function init() {
  scene = new THREE.Scene();

  camera = new THREE.OrthographicCamera(-size, size, size, -size, -10, 10);
  camera.position.z = 10;
  scene.add(camera);

  mesh1 = new THREE.Mesh(new THREE.CircleGeometry(1, 10), new THREE.MeshBasicMaterial())
  mesh1.position.set(0, pos, 0);
  scene.add(mesh1);

  mesh2 = new THREE.Mesh(new THREE.CircleGeometry(1, 10), new THREE.MeshBasicMaterial());
  mesh2.position.set(0, 0, 0);
  scene.add(mesh2);

 ...