hw4-3

by yi hom

HTML

<div id="info">hw4-3 <br/>
</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
}
body {
    overflow: hidden;
}

JavaScript

var camera, scene, renderer;
var mesh,mesh1, border, box, ball;
var clock = new THREE.Clock();
var mouse = new THREE.Vector2();
var raycaster;
var m = 1, k = 5, c = 0.3;
var rkx = [];
var dt;
var line,lineGeometry;
var fv = [];
var vertArray = [];


function force(dt){
  var a;
  fv[0] = mouse.x*50-rkx[0];
  fv[1] = mouse.y*50;
  console.log(fv);
  a = 10*Math.sqrt(fv[0]*fv[0]+fv[1]*fv[1]);
  if(fv[0]<0){
  	a=a*-1;
  }
  //console.log(rkx[1]);
	rkx[1] = rkx[1]+a*dt;
  //console.log(rkx[1]);
}

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

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);


    mesh1 = new THREE.Mesh(new THREE.CircleGeometry(1, 10), new THREE.MeshBasicMaterial());
    scene.add(mesh1);
    
    var geometry = new THREE.BoxGeometry( 15, 10, 0 );
    var material = new THREE.MeshBasicMaterial( {color: 0xffffff} );
    box = new THREE.Mesh( geometry, material );
    box.position.y = 5;
    scene.add( box );

    
    var material = new THREE.LineBasicMaterial({
        color: 0x0000ff
    });

    var geometry = new THREE.Geometry();
    geometry.vertices.push(
    new THREE.Vector3(-40, -0, 0),
    new...