hw4

by yi hom

HTML

<div id="info">Spring (hw4) <br/>
    <a href="javascript:reset();">reset</a>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>

<div id="euler">Euler </div>
<div id="RK4">RK4 </div>
<div id="midpoint">midpoint </div>

CSS

#info {
    position: absolute;
    top: 0px;
    width: 100%;
    padding: 10px;
    text-align: center;
    color: #ffff00
}
#euler{
  position: absolute;
  top:50%;
  left:10%;
  color: red;
}
#RK4{
  position: absolute;
  top:30%;
  left:10%;
  color: red;
}
#midpoint{
  position: absolute;
  top:70%;
  left:10%;
  color: red;
}
body {
    overflow: hidden;
}

JavaScript

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

var m = 1, k = 5, c = 0.51;
var x = [];
var rkx = [];
var mx = [];

function reset() {
	x[0] = 20, x[1] = 0;
  rkx[0] = 20, rkx[1] = 0;
  mx[0] = 20, mx[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;
    }
}

function rk4 (dt){
	var rx = [];
  var k1,k2,k3,k4;
  rx[0] = rkx[0];
  rx[1] = rkx[1];
  //console.log(rkx[0]);
  k1=deriv(rx);
  rx[0] = rkx[0]+k1[0]*dt/2;
  rx[1] = rkx[1]+k1[1]*dt/2;
  //console.log(rkx[0]);
  k2=deriv(rx);
  rx[0] = rkx[0]+k2[0]*dt/2;
  rx[1] = rkx[1]+k2[1]*dt/2;
  //console.log(rkx[0]);
  k3=deriv(rx);
  rx[0] = rkx[0]+k3[0]*dt;
  rx[1] = rkx[1]+k3[1]*dt;
  //console.log(rkx[0]);
  k4=deriv(rx);
  rkx[0] = rkx[0] + dt*(k1[0]+2*k2[0]+2*k3[0]+k4[0])/6;
  rkx[1] = rkx[1] + dt*(k1[1]+2*k2[1]+2*k3[1]+k4[1])/6;
}

function midpoint(dt){
	var xmid = [];
  var f = deriv (mx);
  var n = mx.length;
  for(var i = 0; i < n; i++){
  	xmid[i] = mx[i] + f[i] * (dt/2);
  }
  var fmid = deriv(xmid);
  for(i = 0; i <n; i++){
  	mx[i] = mx[i] + fmid[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());
    scene.add(mesh);

    mesh1 = new THREE.Mesh(new THREE.CircleGeometry(1, 10), new THREE.MeshBasicMaterial());
    mesh1.position.y=20;
    scene.add(mesh1);

    mesh2 = new THREE.Mesh(new THREE.CircleGeometry(1, 10), new THREE.MeshBasicMaterial());
    mesh2.position.y=-20;
    scene.add(mesh2);
    
    var material = new THREE.LineBasicMaterial({
        color:...