stemcstudio/MinecraftFigure.ts

## README.css
table {
  background: #FFFFFF;
  border: solid 1px #DDDDDD;
  margin-bottom: 1.25rem;
  table-layout: auto;
}

table caption {
  background: transparent;
  color: #222222;
  font-size: 1rem;
  font-weight: bold;
}

table thead {
  background: #F5F5F5;
}

table thead tr th,
table thead tr td {
  color: #222222;
  font-size: 0.875rem;
  font-weight: bold;
  padding: 0.5rem 0.625rem 0.625rem;
}

table tfoot {
  background: #F5F5F5;
}

table tfoot tr th,
table tfoot tr td {
  color: #222222;
  font-size: 0.875rem;
  font-weight: bold;
  padding: 0.5rem 0.625rem 0.625rem;
}

table tr th,
table tr td {
  color: #222222;
  font-size: 0.875rem;
  padding: 0.5625rem 0.625rem;
  text-align: left;
}

table tr.even, table tr.alt, table tr:nth-of-type(even) {
  background: #F9F9F9;
}
table thead tr th,
table tfoot tr th,
table tfoot tr td,
table tbody tr th,
table tbody tr td,
table tr td {
  display: table-cell;
  line-height: 1.125rem;
}

## README.md

      
    Raw
  

              README.md
            
          
    Minecraft Body Parts

The EIGHT library provides a MinecraftFigure for experimenting with robot kinematics. If you would like to assemble your own virtual robot then you may also use the various body parts with your own class derived from EIGHT.Group.
Minecraft Skins


Skin (png)
oldLayout


abrahamlincoln


admiral


adventurer


adventurersteve


alex


alice


antman


ash


ash


audrya


autumngirl


barackobama


barman


baseballtee


batgirl


batman


billnye


blueguy


bluejacket


bluestripes


bobmarley


bookerdewitt


boombahsteve


brightgirl


brownhair


bunnyshirt


businesssuit


buzzlightyear


c3po


caesar


cakegirl


calvin


captainamerica


captainhook


carrotgirl


casualdude


cherrysoda


chewbacca


chucknorris


cleopatra


colephelps


coolcreeper


coolpumpkin


countrykitty


dantdm


darthvader


deathstroke


diddykong


donaldduck


donkeykong


einstein


elf


eliteknight


ella


evilwizard


farmer


farmergirl


femaleadventurer


femalepirate


firegirl


flowerangel


flowergirl


gentleman


govanni


girl


goldsolace


goofy


greenknight


greenlantern


greenshirt


halloweengirl


hansolo


headband


hermione


herobrinealex


honey


iceprincess


indianajones


ironman


jabbathehutt


jacksparrow


jamesbond


jamesbonskyfall


jarjarbinks


joker


juliet


katnisseverdeen


king


knight


laracroft


logan


lordsteamounk


lukeskywalker


lumberjack


lumberjackgirl


luna


lunar


maeve


mario


mariobalotelli


martymcfly


maxwell


messi


mickeymouse


monk


muhammadali


napoleon


navycaptain


neymar


ninja


notch


odessa


oldspiceguy


otes


pastelblue


pharmacist


plaidboy


ponygirl


princessleia


pumpkinboy


pumpkintee


punker


purplebunnie


purplegirl


rainbowgirl


rainbowhair


redeyes


redjacket


redteen


robocop


romancitizen


santahd


schoolgirl


scientist


scottishsteve


seacaptain


shrek


simplyplaid


spiderman


spock


spring


squidgirl


stardust


steampunkengineer


steampunkgirl


steampunksuit


steve


strawberry


stripedshirt


stripedsweater


stripedteen


summer


summergirl


summerkid


superherogirl


superman


teenageemo


theflash


theterminator


tinkerbell


toxic


ubersteve


warriorprincess


winterdude


wizard


wolverine


wonderwoman


wreckitralph


## geometry.ts
//
// Basis elements
//
export const zero = EIGHT.Geometric3.zero()
export const one = EIGHT.Geometric3.one()
export const e1 = EIGHT.Geometric3.e1()
export const e2 = EIGHT.Geometric3.e2()
export const e3 = EIGHT.Geometric3.e3()

export const exp = EIGHT.exp

## index.html
<!doctype html>
<html>
<head>
  <!-- STYLES-MARKER -->
  <style>
  /* STYLE-MARKER */
  </style>
  <!-- SHADERS-MARKER -->
  <!-- SCRIPTS-MARKER -->
  <script src="https://jspm.io/system.js"></script>
</head>
<body>
  <canvas id='canvas'></canvas>
  <script>
  // CODE-MARKER
  </script>
  <script>System.import('./script.js')</script>
</body>
</html>

## keyboard.ts
export enum KeyCode {
  leftArrow = 37,
  upArrow = 38,
  rightArrow = 39,
  downArrow = 40,
  k = 75,
  m = 77
}

interface KeyInfo {
  down: boolean
}

export const keyboard: {[code: number]: KeyInfo} = {}
for (let k = 0; k < 100; k++) {
  keyboard[k] = {down: false}
}

$(document).keydown(function(e) {
  if (keyboard[e.keyCode]) {
    keyboard[e.keyCode].down = true
  }
})
$(document).keyup(function(e) {
  if (keyboard[e.keyCode]) {
    keyboard[e.keyCode].down = false
  }
})

## MinecraftFigure.ts
import {e1, e2, e3, exp} from './geometry';


function isBoolean(x: any): boolean {
  return typeof x === 'boolean'
}

function isNumber(x: any): boolean {
  return typeof x === 'number'
}

interface MinecraftFigureOptions {
    height?: number;
    oldSkinLayout?: boolean;
}

/**
 * A group of body parts arranged to look like a figure.
 */
export default class MinecraftFigure extends EIGHT.Group {
    /**
     * The head property is 8 x 8 x 8.
     */
    public head: EIGHT.MinecraftHead;
    public armL: EIGHT.MinecraftArmL;
    public armR: EIGHT.MinecraftArmR;
    public legL: EIGHT.MinecraftLegL;
    public legR: EIGHT.MinecraftLegR;
    public torso: EIGHT.MinecraftTorso;
    constructor(engine: EIGHT.Engine, texture: EIGHT.ImageTexture, options: MinecraftFigureOptions = {}) {
        super();
        const height = isNumber(options.height) ? options.height : 1;
        const scale = height / 32;
        const oldSkinLayout = isBoolean(options.oldSkinLayout) ? options.oldSkinLayout : false;
        this.head = new EIGHT.MinecraftHead(engine, texture, {height, offset: +e2 * scale * 4, oldSkinLayout });
        this.head.position = e2 * scale * 24;
        this.add(this.head);
        this.head.release();

        this.torso = new EIGHT.MinecraftTorso(engine, texture, {height, oldSkinLayout });
        this.torso.position.zero().addVector(e2, scale * 18);
        this.add(this.torso);
        this.torso.release();

        this.armL = new EIGHT.MinecraftArmL(engine, texture, {height, offset: -e2 * scale * 4, oldSkinLayout });
        this.armL.position.zero().addVector(e2, scale * 22).addVector(e1, scale * 6);
        this.add(this.armL);
        this.armL.release();

        this.armR = new EIGHT.MinecraftArmR(engine, texture, {height, offset: -e2 * scale * 4, oldSkinLayout });
        this.armR.position.zero().addVector(e2, scale * 22).subVector(e1, scale * 6);
        this.add(this.armR);
        this.armR.release();

        this.legL = new EIGHT.MinecraftLegL(engine, texture, {height, offset: -e2 * scale * 4, oldSkinLayout });
        this.legL.position.zero().addVector(e2, scale * 10).addVector(e1, scale * 2);
        this.add(this.legL);
        this.legL.release();

        this.legR = new EIGHT.MinecraftLegR(engine, texture, {height, offset: -e2 * scale * 4, oldSkinLayout });
        this.legR.position.zero().addVector(e2, scale * 10).subVector(e1, scale * 2);
        this.add(this.legR);
        this.legR.release();
    }
}

## package.json
{
  "description": "Minecraft Body Parts",
  "dependencies": {
    "davinci-eight": "3.7.7",
    "jquery": "2.1.4"
  },
  "operatorOverloading": true,
  "name": "copy-of-minecraft-figures",
  "version": "0.1.0",
  "keywords": [
    "WebGL",
    "Graphics",
    "Teaching",
    "Introduction",
    "GLSL",
    "shaders",
    "EIGHT"
  ],
  "author": "David Geo Holmes"
}

## script.ts
import {e1, e2, e3, exp} from './geometry';
import {keyboard, KeyCode} from './keyboard'
import {loadFigure, windowResizer} from './utilities';
import MinecraftFigure from './MinecraftFigure'

const engine = new EIGHT.Engine('canvas')
  .size(500, 500)
  .clearColor(0.1, 0.1, 0.1, 1.0)
  .enable(EIGHT.Capability.DEPTH_TEST)

const scene = new EIGHT.Scene(engine)

const skins: {name: string; oldLayout?: boolean}[] = []
skins.push({name: 'batman', oldLayout: false})
skins.push({name: 'katnisseverdeen', oldLayout: false})
const figures: {[name: string]: MinecraftFigure} = {}
let remaining = skins.length;
/**
 *
 */
function loadHandler(figure: MinecraftFigure) {
  figures[figure.name] = figure
  scene.add(figure)
  remaining--
  if (remaining === 0) {
    init()
    requestAnimationFrame(animate)
  }
}

skins.forEach(function(skin) {
  loadFigure(skin.name, engine, {oldSkinLayout: skin.oldLayout}, loadHandler)
})

const ambients: EIGHT.Facet[] = []

const dirLight = new EIGHT.DirectionalLight()
ambients.push(dirLight)

const grid = new EIGHT.GridZX(engine)
scene.add(grid)

const arrow = new EIGHT.Arrow(engine)
arrow.h = +e3
arrow.color = EIGHT.Color.green

const camera = new EIGHT.PerspectiveCamera()
camera.eye = (3 * e3 + 2 * e2 + 1.5 * e1).normalize().scale(2.7);
ambients.push(camera)

const trackball = new EIGHT.TrackballControls(camera)
//trackball.subscribe(engine.canvas)
// trackball.enableContextMenu()
// trackball.noPan = true

const resizer = windowResizer(engine, camera).resize()

function init() {
}

function animate(timestamp: number) {
  engine.clear()
  trackball.update()

  dirLight.direction = camera.look - camera.eye

  figures[skins[0].name].position.copyVector(e1).scale(-0.4)
  figures[skins[1].name].position = +0.4 * e1

  if (keyboard[KeyCode.upArrow].down) {
    runPose(figures[skins[0].name], timestamp * 0.002)
    runPose(figures[skins[1].name], -timestamp * 0.002)
  }
  else {
    standPose(figures[skins[0].name])
    standPose(figures[skins[1].name])
  }
  if (keyboard[KeyCode.leftArrow].down) {
    figures[skins[0].name].attitude = (e3 ^ e1).scale(-0.01).exp() * figures[skins[0].name].attitude
  }
  if (keyboard[KeyCode.rightArrow].down) {
    figures[skins[0].name].attitude = (e3 ^ e1).scale(+0.01).exp() * figures[skins[0].name].attitude
  }

  scene.draw(ambients)

  requestAnimationFrame(animate)
}

function runPose(figure: MinecraftFigure, phase: number) {
  figure.position.addVector(e2, 0.06 * (1+Math.cos(2 * phase)))
  figure.head.attitude.rotorFromGeneratorAngle(e3 ^ e1, Math.cos(phase) * Math.PI/6)
  figure.armL.attitude.rotorFromGeneratorAngle(-e2 ^ e3, -Math.cos(phase) * Math.PI/2)
  figure.armR.attitude.rotorFromGeneratorAngle(-e2 ^ e3, +Math.cos(phase) * Math.PI/2)
  figure.legL.attitude.rotorFromGeneratorAngle(-e2 ^ e3, +Math.cos(phase) * Math.PI/3)
  figure.legR.attitude.rotorFromGeneratorAngle(-e2 ^ e3, -Math.cos(phase) * Math.PI/3)
}

function standPose(figure: MinecraftFigure) {
  figure.head.attitude.one()
  figure.armL.attitude.one()
  figure.armR.attitude.one()
  figure.legL.attitude.one()
  figure.legR.attitude.one()
}

## style.css
body {
  margin: 0;
  overflow: hidden;
}
canvas { width: 500px; height: 500px }

## utilities.ts
import MinecraftFigure from './MinecraftFigure';

export function loadFigure(name: string, engine: EIGHT.Engine, options: {oldSkinLayout?: boolean}, callback: (figure: EIGHT.MinecraftFigure) => any): void {
  const loader = new EIGHT.TextureLoader(engine)
  loader.loadImageTexture(`img/textures/minecraft-skins/${name}.png`, function(texture) {
    texture.minFilter = EIGHT.TextureMinFilter.NEAREST
    texture.magFilter = EIGHT.TextureMagFilter.NEAREST
    const figure = new MinecraftFigure(engine, texture, {
      height: 1,
      oldSkinLayout: options.oldSkinLayout
    })
    figure.name = name
    callback(figure)
  })
}

/**
 * Creates an object that manages resizing of the output to fit the window.
 */
export function windowResizer(engine: EIGHT.Engine, camera: EIGHT.PerspectiveCamera) {
  const callback = function() {
    engine.size(window.innerWidth, window.innerHeight);
    engine.canvas.style.width = `${window.innerWidth}px`
    engine.canvas.style.height = `${window.innerHeight}px`
    camera.aspect	= window.innerWidth / window.innerHeight;
  }
  window.addEventListener('resize', callback, false);

  const that = {
    /**
     *
     */
    resize: function() {
      callback();
      return that;
    },

    /**
     * Stop watching window resize
     */
    stop: function() {
      window.removeEventListener('resize', callback);
      return that;
    }
  };
  return that;
}
	table {
	background: #FFFFFF;
	border: solid 1px #DDDDDD;
	margin-bottom: 1.25rem;
	table-layout: auto;
	}

	table caption {
	background: transparent;
	color: #222222;
	font-size: 1rem;
	font-weight: bold;
	}

	table thead {
	background: #F5F5F5;
	}

	table thead tr th,
	table thead tr td {
	color: #222222;
	font-size: 0.875rem;
	font-weight: bold;
	padding: 0.5rem 0.625rem 0.625rem;
	}

	table tfoot {
	background: #F5F5F5;
	}

	table tfoot tr th,
	table tfoot tr td {
	color: #222222;
	font-size: 0.875rem;
	font-weight: bold;
	padding: 0.5rem 0.625rem 0.625rem;
	}

	table tr th,
	table tr td {
	color: #222222;
	font-size: 0.875rem;
	padding: 0.5625rem 0.625rem;
	text-align: left;
	}

	table tr.even, table tr.alt, table tr:nth-of-type(even) {
	background: #F9F9F9;
	}
	table thead tr th,
	table tfoot tr th,
	table tfoot tr td,
	table tbody tr th,
	table tbody tr td,
	table tr td {
	display: table-cell;
	line-height: 1.125rem;
	}
Skin (png)	oldLayout
abrahamlincoln
admiral
adventurer
adventurersteve
alex
alice
antman
ash
ash
audrya
autumngirl
barackobama
barman
baseballtee
batgirl
batman
billnye
blueguy
bluejacket
bluestripes
bobmarley
bookerdewitt
boombahsteve
brightgirl
brownhair
bunnyshirt
businesssuit
buzzlightyear
c3po
caesar
cakegirl
calvin
captainamerica
captainhook
carrotgirl
casualdude
cherrysoda
chewbacca
chucknorris
cleopatra
colephelps
coolcreeper
coolpumpkin
countrykitty
dantdm
darthvader
deathstroke
diddykong
donaldduck
donkeykong
einstein
elf
eliteknight
ella
evilwizard
farmer
farmergirl
femaleadventurer
femalepirate
firegirl
flowerangel
flowergirl
gentleman
govanni
girl
goldsolace
goofy
greenknight
greenlantern
greenshirt
halloweengirl
hansolo
headband
hermione
herobrinealex
honey
iceprincess
indianajones
ironman
jabbathehutt
jacksparrow
jamesbond
jamesbonskyfall
jarjarbinks
joker
juliet
katnisseverdeen
king
knight
laracroft
logan
lordsteamounk
lukeskywalker
lumberjack
lumberjackgirl
luna
lunar
maeve
mario
mariobalotelli
martymcfly
maxwell
messi
mickeymouse
monk
muhammadali
napoleon
navycaptain
neymar
ninja
notch
odessa
oldspiceguy
otes
pastelblue
pharmacist
plaidboy
ponygirl
princessleia
pumpkinboy
pumpkintee
punker
purplebunnie
purplegirl
rainbowgirl
rainbowhair
redeyes
redjacket
redteen
robocop
romancitizen
santahd
schoolgirl
scientist
scottishsteve
seacaptain
shrek
simplyplaid
spiderman
spock
spring
squidgirl
stardust
steampunkengineer
steampunkgirl
steampunksuit
steve
strawberry
stripedshirt
stripedsweater
stripedteen
summer
summergirl
summerkid
superherogirl
superman
teenageemo
theflash
theterminator
tinkerbell
toxic
ubersteve
warriorprincess
winterdude
wizard
wolverine
wonderwoman
wreckitralph
	//
	// Basis elements
	//
	export const zero = EIGHT.Geometric3.zero()
	export const one = EIGHT.Geometric3.one()
	export const e1 = EIGHT.Geometric3.e1()
	export const e2 = EIGHT.Geometric3.e2()
	export const e3 = EIGHT.Geometric3.e3()

	export const exp = EIGHT.exp
	<!doctype html>
	<html>
	<head>
	<!-- STYLES-MARKER -->
	<style>
	/* STYLE-MARKER */
	</style>
	<!-- SHADERS-MARKER -->
	<!-- SCRIPTS-MARKER -->
	<script src="https://jspm.io/system.js"></script>
	</head>
	<body>
	<canvas id='canvas'></canvas>
	<script>
	// CODE-MARKER
	</script>
	<script>System.import('./script.js')</script>
	</body>
	</html>
	export enum KeyCode {
	leftArrow = 37,
	upArrow = 38,
	rightArrow = 39,
	downArrow = 40,
	k = 75,
	m = 77
	}

	interface KeyInfo {
	down: boolean
	}

	export const keyboard: {[code: number]: KeyInfo} = {}
	for (let k = 0; k < 100; k++) {
	keyboard[k] = {down: false}
	}

	$(document).keydown(function(e) {
	if (keyboard[e.keyCode]) {
	keyboard[e.keyCode].down = true
	}
	})
	$(document).keyup(function(e) {
	if (keyboard[e.keyCode]) {
	keyboard[e.keyCode].down = false
	}
	})
	import {e1, e2, e3, exp} from './geometry';



	function isBoolean(x: any): boolean {
	return typeof x === 'boolean'
	}

	function isNumber(x: any): boolean {
	return typeof x === 'number'
	}

	interface MinecraftFigureOptions {
	height?: number;
	oldSkinLayout?: boolean;
	}

	/**
	* A group of body parts arranged to look like a figure.
	*/
	export default class MinecraftFigure extends EIGHT.Group {
	/**
	* The head property is 8 x 8 x 8.
	*/
	public head: EIGHT.MinecraftHead;
	public armL: EIGHT.MinecraftArmL;
	public armR: EIGHT.MinecraftArmR;
	public legL: EIGHT.MinecraftLegL;
	public legR: EIGHT.MinecraftLegR;
	public torso: EIGHT.MinecraftTorso;
	constructor(engine: EIGHT.Engine, texture: EIGHT.ImageTexture, options: MinecraftFigureOptions = {}) {
	super();
	const height = isNumber(options.height) ? options.height : 1;
	const scale = height / 32;
	const oldSkinLayout = isBoolean(options.oldSkinLayout) ? options.oldSkinLayout : false;
	this.head = new EIGHT.MinecraftHead(engine, texture, {height, offset: +e2 * scale * 4, oldSkinLayout });
	this.head.position = e2 * scale * 24;
	this.add(this.head);
	this.head.release();

	this.torso = new EIGHT.MinecraftTorso(engine, texture, {height, oldSkinLayout });
	this.torso.position.zero().addVector(e2, scale * 18);
	this.add(this.torso);
	this.torso.release();

	this.armL = new EIGHT.MinecraftArmL(engine, texture, {height, offset: -e2 * scale * 4, oldSkinLayout });
	this.armL.position.zero().addVector(e2, scale * 22).addVector(e1, scale * 6);
	this.add(this.armL);
	this.armL.release();

	this.armR = new EIGHT.MinecraftArmR(engine, texture, {height, offset: -e2 * scale * 4, oldSkinLayout });
	this.armR.position.zero().addVector(e2, scale * 22).subVector(e1, scale * 6);
	this.add(this.armR);
	this.armR.release();

	this.legL = new EIGHT.MinecraftLegL(engine, texture, {height, offset: -e2 * scale * 4, oldSkinLayout });
	this.legL.position.zero().addVector(e2, scale * 10).addVector(e1, scale * 2);
	this.add(this.legL);
	this.legL.release();

	this.legR = new EIGHT.MinecraftLegR(engine, texture, {height, offset: -e2 * scale * 4, oldSkinLayout });
	this.legR.position.zero().addVector(e2, scale * 10).subVector(e1, scale * 2);
	this.add(this.legR);
	this.legR.release();
	}
	}
	{
	"description": "Minecraft Body Parts",
	"dependencies": {
	"davinci-eight": "3.7.7",
	"jquery": "2.1.4"
	},
	"operatorOverloading": true,
	"name": "copy-of-minecraft-figures",
	"version": "0.1.0",
	"keywords": [
	"WebGL",
	"Graphics",
	"Teaching",
	"Introduction",
	"GLSL",
	"shaders",
	"EIGHT"
	],
	"author": "David Geo Holmes"
	}
	import {e1, e2, e3, exp} from './geometry';
	import {keyboard, KeyCode} from './keyboard'
	import {loadFigure, windowResizer} from './utilities';
	import MinecraftFigure from './MinecraftFigure'

	const engine = new EIGHT.Engine('canvas')
	.size(500, 500)
	.clearColor(0.1, 0.1, 0.1, 1.0)
	.enable(EIGHT.Capability.DEPTH_TEST)

	const scene = new EIGHT.Scene(engine)

	const skins: {name: string; oldLayout?: boolean}[] = []
	skins.push({name: 'batman', oldLayout: false})
	skins.push({name: 'katnisseverdeen', oldLayout: false})
	const figures: {[name: string]: MinecraftFigure} = {}
	let remaining = skins.length;
	/**
	*
	*/
	function loadHandler(figure: MinecraftFigure) {
	figures[figure.name] = figure
	scene.add(figure)
	remaining--
	if (remaining === 0) {
	init()
	requestAnimationFrame(animate)
	}
	}

	skins.forEach(function(skin) {
	loadFigure(skin.name, engine, {oldSkinLayout: skin.oldLayout}, loadHandler)
	})

	const ambients: EIGHT.Facet[] = []

	const dirLight = new EIGHT.DirectionalLight()
	ambients.push(dirLight)

	const grid = new EIGHT.GridZX(engine)
	scene.add(grid)

	const arrow = new EIGHT.Arrow(engine)
	arrow.h = +e3
	arrow.color = EIGHT.Color.green

	const camera = new EIGHT.PerspectiveCamera()
	camera.eye = (3 * e3 + 2 * e2 + 1.5 * e1).normalize().scale(2.7);
	ambients.push(camera)

	const trackball = new EIGHT.TrackballControls(camera)
	//trackball.subscribe(engine.canvas)
	// trackball.enableContextMenu()
	// trackball.noPan = true

	const resizer = windowResizer(engine, camera).resize()

	function init() {
	}

	function animate(timestamp: number) {
	engine.clear()
	trackball.update()

	dirLight.direction = camera.look - camera.eye

	figures[skins[0].name].position.copyVector(e1).scale(-0.4)
	figures[skins[1].name].position = +0.4 * e1

	if (keyboard[KeyCode.upArrow].down) {
	runPose(figures[skins[0].name], timestamp * 0.002)
	runPose(figures[skins[1].name], -timestamp * 0.002)
	}
	else {
	standPose(figures[skins[0].name])
	standPose(figures[skins[1].name])
	}
	if (keyboard[KeyCode.leftArrow].down) {
	figures[skins[0].name].attitude = (e3 ^ e1).scale(-0.01).exp() * figures[skins[0].name].attitude
	}
	if (keyboard[KeyCode.rightArrow].down) {
	figures[skins[0].name].attitude = (e3 ^ e1).scale(+0.01).exp() * figures[skins[0].name].attitude
	}

	scene.draw(ambients)

	requestAnimationFrame(animate)
	}

	function runPose(figure: MinecraftFigure, phase: number) {
	figure.position.addVector(e2, 0.06 * (1+Math.cos(2 * phase)))
	figure.head.attitude.rotorFromGeneratorAngle(e3 ^ e1, Math.cos(phase) * Math.PI/6)
	figure.armL.attitude.rotorFromGeneratorAngle(-e2 ^ e3, -Math.cos(phase) * Math.PI/2)
	figure.armR.attitude.rotorFromGeneratorAngle(-e2 ^ e3, +Math.cos(phase) * Math.PI/2)
	figure.legL.attitude.rotorFromGeneratorAngle(-e2 ^ e3, +Math.cos(phase) * Math.PI/3)
	figure.legR.attitude.rotorFromGeneratorAngle(-e2 ^ e3, -Math.cos(phase) * Math.PI/3)
	}

	function standPose(figure: MinecraftFigure) {
	figure.head.attitude.one()
	figure.armL.attitude.one()
	figure.armR.attitude.one()
	figure.legL.attitude.one()
	figure.legR.attitude.one()
	}
	body {
	margin: 0;
	overflow: hidden;
	}
	canvas { width: 500px; height: 500px }
	import MinecraftFigure from './MinecraftFigure';

	export function loadFigure(name: string, engine: EIGHT.Engine, options: {oldSkinLayout?: boolean}, callback: (figure: EIGHT.MinecraftFigure) => any): void {
	const loader = new EIGHT.TextureLoader(engine)
	loader.loadImageTexture(`img/textures/minecraft-skins/${name}.png`, function(texture) {
	texture.minFilter = EIGHT.TextureMinFilter.NEAREST
	texture.magFilter = EIGHT.TextureMagFilter.NEAREST
	const figure = new MinecraftFigure(engine, texture, {
	height: 1,
	oldSkinLayout: options.oldSkinLayout
	})
	figure.name = name
	callback(figure)
	})
	}

	/**
	* Creates an object that manages resizing of the output to fit the window.
	*/
	export function windowResizer(engine: EIGHT.Engine, camera: EIGHT.PerspectiveCamera) {
	const callback = function() {
	engine.size(window.innerWidth, window.innerHeight);
	engine.canvas.style.width = `${window.innerWidth}px`
	engine.canvas.style.height = `${window.innerHeight}px`
	camera.aspect = window.innerWidth / window.innerHeight;
	}
	window.addEventListener('resize', callback, false);

	const that = {
	/**
	*
	*/
	resize: function() {
	callback();
	return that;
	},

	/**
	* Stop watching window resize
	*/
	stop: function() {
	window.removeEventListener('resize', callback);
	return that;
	}
	};
	return that;
	}