Human Simulator

by Tgwizman

HTML

<center>
    <h1>Human Simulator</h1>
    <canvas id="canvas">
        You need a browser that is up to date, and that can use html5 canvas tag.<br>
        Get Google Chrome by clicking <a href="http://chrome.google.com">this link</a>.
    </canvas>
    <p>Use the qwertyuiopasdfghjkl; keys to control the "player" on the screen</p>
    <p>The qwerasdf keys control the left body part rotations.<br>
        The uiopjkl; keys control the right body part rotations.<br>
        The tg keys control the head rotation, and the yh keys control the body rotation.<br><br>
        Use the upper keys (qwertyuiop) to make then go counter-clockwise.<br>
        Use the lower keys (asdfghjkl;) to make then go clockwise.<br><br>
        The eduj keys control the humorus. The rfik keys control the forearm.<br>
        The qaol keys control the thighs. The wsp; keys control the calves.<br>

</center>

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

canvas.width = 640;
canvas.height = 480;

var delta = 1, delay = 1;

var player = {
    pos: {
        x: 320,
        y: 240
    },
    head: 90,
    headLength: 30,
    body: 90,
    bodyLength: 60,
    arms: {
        leftHumorus: 110,
        leftForearm: 130,
        rightHumorus: 70,
        rightForearm: 100,
        humorusLength: 35,
        forearmLength: 30
    },
    legs: {
        leftThigh: 120,
        leftCalve: 100,
        rightThigh: 90,
        rightCalve: 60,
        thighLength: 40,
        calveLength: 50
    },
    keys: {
        89: false,
        84: false,
        72: false,
        71: false,
        69: false,
        82: false,
        85: false,
        73: false,
        68: false,
        70: false,
        74: false,
        75: false,
        81: false,
        87: false,
        79: false,
        80: false,
        65: false,
        83: false,
        76: false,
        59: false,
        186: false
    }
};

var c2p = function(x, y) {
    var r = Math.pow((Math.pow(x, 2) + Math.pow(y, 2)), 0.5);
    var theta = Math.atan(y / x) * 360 / 2 / Math.PI;
    if (x >= 0 && y >= 0) {
        theta = theta;
    } else if (x < 0 && y >= 0) {
        theta = 180 + theta;
    } else if (x < 0 && y < 0) {
        theta = 180 + theta;
    } else if (x > 0 && y < 0) {
        theta = 360 + theta;
    }
    return [Math.round(r * 100) / 100, Math.round(theta * 100) / 100];
};

var p2c = function(radius, theta) {
    theta = theta / (180 / Math.PI)
    x = radius * Math.cos(theta);
    y = radius * Math.sin(theta);
    return [x, y];
};

var drawPlayer = function() {
    ctx.strokeStyle = '#FFF';
    ctx.lineWidth = 3;
    ctx.beginPath();
    //body
    var temp = p2c(player.bodyLength/2, player.body);
    ctx.moveTo(player.pos.x + temp[0], player.pos.y - temp[1]);
    ctx.lineTo(player.pos.x - temp[0], player.pos.y + temp[1]);
    var headAnchor =...