Hw4 Op.3

pendulum with movable support

by jmchen

HTML

<div id="info">Hw4 Option 3 with MidPoint
</div>
<script src="https://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 block, pend, line;
var xx = -12, theta = -0.5;
var l = 30, M = 3, m = 12, g = 10;
var x=[]; // state

init();
animate();

function Av (a, v) {  // matrix(2x2) times v (2x1)
	return [ a[0][0]*v[0]+a[0][1]*v[1], a[1][0]*v[0]+a[1][1]*v[1] ];
}

// invert a
function invert (a) {
    var ainv = [];
    
    var det = a[0][0] * a[1][1] - a[0][1]*a[1][0];
    ainv.push ([a[1][1]/det, -a[0][1]/det]);
    ainv.push ([-a[1][0]/det, a[0][0]/det]);
    return ainv;
}

function deriv (x) {
	// variable order: x1, x3, x2, x4
  var x1,x2,x3,x4;
  x1 = x[0], x3 = x[1], x2 = x[2], x4 = x[3];
  var k = [[M+m, m*l*Math.cos(x3)], [Math.cos(x3)/l, 1.0]];
  var v = [m*l*x4*x4*Math.sin(x3), -g/l*Math.sin(x3)];
  var dd = Av (invert(k), v);
  return [x2, x4, dd[0], dd[1]];
}

function ODESolver (x, dt) {
	// implement Euler
  var f = deriv (x);
  var xmid = [0,0,0,0];
  for (var i = 0; i < x.length; i++) {
  	xmid[i] = x[i] + f[i]*dt/2;
  }
  f = deriv(xmid);
  for (var i = 0; i < x.length; i++) {
  	x[i] = x[i] + f[i]*dt;
  }
  
}

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

	// initial condition
	x.push (0), x.push (1.0), x.push (0), x.push (0);
/*
	x[0] = 0;
  x[1] = 1.0;
  x[2] = 0;
  x[3] = 0;
  */
camera = new THREE.OrthographicCamera(-50, 50, 50, -50, -10, 10);
  camera.position.z = 10;
  scene.add(camera);

	block = new THREE.Mesh (new THREE.PlaneGeometry(10,8),
  new THREE.MeshBasicMaterial());
  scene.add (block);

  pend = new THREE.Mesh(new THREE.CircleGeometry(5, 10), new THREE.MeshBasicMaterial());
  scene.add(pend);

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

  var geometry = new THREE.Geometry();
  geometry.vertices.push(
    new THREE.Vector3(-40, -40, 0),
    new THREE.Vector3(40, -40, 0));
  line = new THREE.Line (geometry, material);
  scene.add (line);
  
  var gridXZ = new THREE.GridHelper(50, 10);
  gridXZ.setColors(new THREE.Color(0xff00ff), new THREE.Color(0xffffff));
  gridXZ.rotation.x =...