Human RIG

by Dini Mer

HTML

<body>
    <canvas id="c" width="100" height="100"></canvas>
</body>

CSS

html, body {
    height: 100%;
}

body {
    margin: 0;
    overflow: hidden;
}

JavaScript

// all the following Code will be stored in a window.onload function by fiddle ^^

console.clear();

// Variables
// -----------------------------

var canvas;
var ctx;

var options = {
    line: {
      	width: 1,
        color: '#333'
    },
    rect: {
        size: 20,
     	width: 1,
        color: '#f00'
    },
    arc: {
        size: 30,
     	width: 1,
        color: '#000'
    }
};

var human = {
	head: [{
        m: 'strokeRect',
        a: [
            '({winWidth} * 0.5) - ({rectSize} / 2)',
            '({winHeight} * 0.1) - ({rectSize} / 2)',
            '{rectSize}',
            '{rectSize}'
        ]
    }],
    neck: [{
    	m: 'moveTo',
        a: [
			'({winWidth} * 0.5)',
            '({winHeight} * 0.1)'
        ]
    }, {
     	m: 'lineTo',
        a: [
        	'({winWidth} * 0.5)',
            '({winHeight} * 0.2)'
       	]
    }, {
     	m: 'strokeRect',
        a: [
        	'({winWidth} * 0.5) - ({rectSize} / 2)',
            '({winHeight} * 0.2) - ({rectSize} / 2)'
       	]
    }],
    chest: {},
   	spinal: {},
    leftHip: {},
    rightHip: {},
    leftUpperArm: {},
    leftLowerArm: {},
    leftPalm: {},
    rightUpperArm: {},
    rightLowerArm: {},
    rightleftPalm: {},
    leftUpperLeg: {},
    leftLowerLeg: {},
    leftFoot: {},
    rightUpperLeg: {},
    rightLowerLeg: {},
    rightFoot: {}
};

// Eventbinding
// -----------------------------

window.onresize = function() {
 	setCanvasSize();
    createHuman();
};

// Init
// -----------------------------

getCanvas();
setCanvasSize();
createHuman();

// Methods
// -----------------------------

function getCanvas() {
	canvas = document.getElementById('c');
	ctx    = canvas.getContext('2d');
};

function setCanvasSize() {
    canvas.width  = window.innerWidth;
    canvas.height = window.innerHeight;
    ctx.clearRect(0,0,canvas.width,canvas.height);
};

// -------------------

function createHuman() {
    console.log('create Human');
    for(var part in human) {
    ...