CGhw2p helper

dancing arm

by Millieyan

HTML

<div id="info">Homework 2p Helper
  <br>
  <br> Keyframe Interpolation<br>
  <a href="javascript:style('popping')">pop</a>,
  <a href="javascript:style('regular')">regular</a>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.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 clock = new THREE.Clock();

var period = 2; // 3 seconds
var pose1 = {
  LShoulder: 0.5,
  LElbow: -1,
  RShoulder: 0,
  RElbow: 0
};
var pose2 = {
  LShoulder: 0,
  LElbow: 0,
  RShoulder: 0.5,
  RElbow: -1
};

var Ppose2 = {
  LShoulder: 0.9,
  LElbow: 1.21,
  RShoulder: 0.9,
  RElbow: 1.21
};
var Ppose2p = {
  LShoulder: 0.9 - 0.05,
  LElbow: 1.21 - 0.05,
  RShoulder: 0.9 - 0.05,
  RElbow: 1.21 - 0.05
};
var Ppose1 = {
  LShoulder: 0.23,
  LElbow: 0.3,
  RShoulder: 0.23,
  RElbow: 0.3
};
var Ppose1p = {
  LShoulder: 0.23 + 0.05,
  LElbow: 0.30 + 0.05,
  RShoulder: 0.23 + 0.05,
  RElbow: 0.30 + 0.05
};

// "normal" keys
var Nkeys = [{
  s: 0,
  pose: pose1
}, {
  s: 0.5,
  pose: pose2
}, {
  s: 1,
  pose: pose1
}];
// "popping" keys: https://www.youtube.com/watch?v=YhYsTszCMkM
var Pkeys = [{
    s: 0,
    pose: Ppose1
  },
  {
    s: 0.40,
    pose: Ppose2p
  }, {
    s: 0.48,
    pose: Ppose2p
  }, {
    s: 0.5,
    pose: Ppose2
  },
  {
    s: 0.90,
    pose: Ppose1p
  }, {
    s: 0.98,
    pose: Ppose1p
  }, {
    s: 1,
    pose: Ppose1
  }
];

var keys = Nkeys;

function style(ss) {
  if (ss === 'popping')
    keys = Pkeys;
  else if (ss === 'regular')
    keys = Nkeys;
}

init();
animate();

function makeLink() {
  var oneLink = new THREE.Object3D();
  var mesh = new THREE.Mesh(new THREE.BoxGeometry(15, 5, 5), new THREE.MeshBasicMaterial({
    wireframe: true
  }));
  oneLink.add(mesh);
  mesh.position.set(7.5, 0, 0);
  joint = new THREE.Mesh(new THREE.CylinderGeometry(3, 3, 3, 12),
    new THREE.MeshBasicMaterial({
      wireframe: true
    }));
  joint.rotation.x = Math.PI / 2;
  oneLink.add(joint);
  return oneLink;
}

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

  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.z = 150;

  scene.add(camera);

  var gridXZ = new THREE.GridHelper(50, 10);
  gridXZ.setColors(new THREE.Color(0xff00ff), new...