CGhw2p helper

dancing arm

by RGMGx

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 = 100;
  scene.add(camera);

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

  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth,...