hw4 helper

spring-mass-damper system

by Bai Shiuan Huang

HTML

<div id="info">Spring (hw4 helper) <br/>
    <a href="javascript:reset();">reset</a>
</div>
<div id="name0">Euler 週期 = <input id='input0' size = "10px" value = 0 readonly = true></div>
<div id="name1">MidPoint 週期 = <input id='input1' size = "10px" value = 0 readonly = true></div>
<div id="name2">RK4 週期 = <input id='input2' size = "10px" value = 0 readonly = true></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/92/three.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

CSS

#info {
    position: absolute;
    top: 0px;
    width: 100%;
    padding: 10px;
    text-align: center;
    color: #ffff00
}
body {
    overflow: hidden;
}
#name0 {
  position: absolute;
  top: 30vh;
  text-align: center;
}

#name1 {
  position: absolute;
  top: 50vh;
  text-align: center;
}
#name2 {
  position: absolute;
  top: 70vh;
  text-align: center;
}

#input0 {
  color: white;
  background-color: transparent;
  border: 0px;
  height: 40px;
  width: 90px;
}
#input1 {
  color: white;
  background-color: transparent;
  border: 0px;
  height: 40px;
  width: 90px;
}
#input2 {
  color: white;
  background-color: transparent;
  border: 0px;
  height: 40px;
  width: 90px;
}

JavaScript

var camera, scene, renderer;
var ball0, ball1, ball2;
var mousePoint;
var mouse_x, down_true = false;
//var mymouse;
var mouse = new THREE.Vector2();

var clock = new THREE.Clock();
var x_time;
var y_time;
var z_time;
var m = 2, k = 20, c = 0;
var x = [], y = [], z = [];
//x for euler , y for mid , z for RK4

var line;

function reset() {
	x[0] = 20, x[1] = 0;
  y[0] = 20, y[1] = 0;
  z[0] = 20, z[1] = 0;
}

function deriv (x) {
	var ff = [];
    ff.push (x[1]);
    ff.push (-(c*x[1] + k*x[0])/m);
    return ff;
    
}

function Euler(dt) {
  var n = x.length;
  
  var f = deriv(x);
  
  for (var i = 0; i < n; i++) {
    x[i] += f[i] * dt;
  }
}

function MidPoint(dt) {
  var n = y.length;
  
  let ycopy = y.slice(); 
  
  var f = deriv(y);   
  for (let i = 0; i < n; i++) {
    y[i] += f[i] * (dt / 2);
  }
  
  f = deriv(y);
  
  for (let i = 0; i < n; i++) {
    y[i] = ycopy[i] + f[i] * dt;  
  }
}

function RK4(dt) {
  var n = z.length;
  // RK4
  let k1 = deriv(z);
  let f1 = z.slice();
  for (let i = 0; i < n; i++) {
    f1[i] = z[i] +  k1[i] * (dt / 2);
  }
  
  let k2 = deriv(f1);
  
	let f2 = f1.slice();
  for (let i = 0; i < n; i++) {
    f2[i] = z[i] + k2[i] * (dt / 2);
  }
  
  let k3 = deriv(f2);
  
  let f3 = f2.slice();
  for (let i = 0; i < n; i++) {
    f3[i] = z[i] + k3[i] * dt;
  }
  
  var k4 = deriv(f3);
  
  for (let i = 0; i < n; i++) {
    z[i] += (k1[i] + 2*k2[i] + 2*k3[i] + k4[i])/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);

    ball0 = new THREE.Mesh(new THREE.CircleGeometry(1, 10), new THREE.MeshBasicMaterial());
    ball1 = ball0.clone();
    ball2 = ball0.clone();
    ball0.position.y = 20;
    ball2.position.y = -20;
    
    scene.add(ball0);
    scene.add(ball1);
    scene.add(ball2);
    
    var border = new THREE.Line(new THREE.Geometry(), new...