Hand

a hand in 3d

by guyluchenbill

HTML

<script>
    var data = "v - 28.599861 - 44.384812 - 2.002876 v - 28.467789 - 44.080918 - 1.574919 v - 26.936775 - 42.561681 - 1.751430 v - 25.694378 - 40.398937 - 0.916075 v - 28.712887 - 44.860471 - 1.376516 v - 28.567911 - 44.106905 - 1.011539 v - 26.736206 - 42.779219 - 0.854816 v - 25.223288 - 40.139422 - 0.400071 v - 29.170390 - 45.082163 - 0.838855 v - 28.782393 - 44.492232 - 0.524904 v - 26.881330 - 42.874772 0.621377 v - 25.134439 - 40.266213 0.413064 v - 29.333492 - 45.187298 - 0.131804 v - 28.857804 - 44.318421 0.242428 v - 27.452720 - 42.416467 1.206057 v - 25.512083 - 40.165676 0.987006 v - 29.737835 - 45.264695 0.767866 v - 29.158435 - 44.802950 0.845026 v - 27.457585 - 42.421244 1.274733 v - 25.764775 - 40.186531 1.523479 v - 29.681440 - 45.401988 1.512829 v - 29.149091 - 44.567345 1.604852 v - 27.410921 - 42.508283 1.338188 v - 25.709359 - 40.150487 2.312437 v - 30.025058 - 45.172317 2.440948 v - 29.502260 - 44.701671 2.463732 v - 27.121295 - 42.753143 1.395917    v -25.717488 -40.100530 2.719687 v -29.661416 -45.365677 3.292590 v -26.783878 -43.053656 1.980182 v -25.793224 -40.016398 3.530004 v -29.934933 -45.028290 4.071135 v -29.347465 -44.659160 3.944878 v -25.827784 -40.460226 3.987033 v -29.470874 -43.642608 -2.212315 v -29.389798 -43.217885 -1.931471 v -28.195103 -41.484284 -1.790144 v -26.618908 -39.553436 -0.608709 v -30.118356 -43.586421 -1.737635 v -29.833269 -42.874357 -1.431901 v -28.265054 -40.919005 -0.679462 v -26.624633 -39.039004 -0.208431 v -30.137757 -44.041996 -1.100773 v -30.167927 -43.360962 -0.982407 v -28.707666 -41.365117 -0.275801 v -26.797762 -38.958343 0.316117 v -30.845105 -43.763169 -0.444896 v -30.380244 -42.893788 -0.120502 v -28.547620 -40.791947 0.557655 v -26.998984 -38.917108 0.938146 v -30.825229 -44.147280 0.446349 v -30.647680 -43.597249 0.559197 v -28.847213 -41.168552 1.157583 v -27.017406 -38.946981 1.503959 v -31.376506 -43.827751 1.412559 v -30.600245 -43.037814 1.524458 v -28.574971 -40.730421   ...

CSS

canvas {
    z-index:-1;
    position:fixed;
    left:0px;
    top:0px;
    right:0px;
    bottom:0px;
    width:100%;
    height:100%;
}
html,body{
    height:100%;
}

JavaScript

function Point3d(a, c, b) {
    this.x = (a === undefined) ? 0 : a;
    this.y = (c === undefined) ? 0 : c;
    this.z = (b === undefined) ? 0 : b;
    this.fl = 400;
    this.vpX = 0;
    this.vpY = 0;
    this.cX = 0;
    this.cY = 0;
    this.cZ = 0
}
Point3d.prototype = {
    setVanishingPoint: function (b, a) {
        this.vpX = b;
        this.vpY = a
    },
    setCenter: function (c, b, a) {
        this.cX = c;
        this.cY = b;
        this.cZ = a
    },
    rotateX: function (a) {
        var d = Math.cos(a),
            b = Math.sin(a),
            c = this.y * d - this.z * b,
            e = this.z * d + this.y * b;
        this.y = c;
        this.z = e;
        return this
    },
    rotateY: function (a) {
        var d = Math.cos(a),
            c = Math.sin(a),
            b = this.x * d - this.z * c,
            e = this.z * d + this.x * c;
        this.x = b;
        this.z = e;
        return this
    },
    rotateZ: function (a) {
        var d = Math.cos(a),
            b = Math.sin(a),
            c = this.x * d - this.y * b,
            e = this.y * d + this.x * b;
        this.x = c;
        this.y = e;
        return this
    },
    getScreenX: function () {
        var a = this.fl / (this.fl + this.z + this.cZ);
        return this.vpX + (this.cX + this.x) * a
    },
    getScreenY: function () {
        var a = this.fl / (this.fl + this.z + this.cZ);
        return this.vpY + (this.cY + this.y) * a
    }
};
var points = [];


/*//////////////////////////////////////////////////////////////////*/
///*this is where it calculates all of the point information*////
/*//////////////////////////////////////////////////////////////////*/

function makepoints() {
    points = [];
   
    var byv = data.split('v').filter(Boolean);
    points = byv.map(function (e) {
        var cp = '';
        var byspace = e.split(' ').filter(Boolean).map(function(g){if(!/\d+/.test(g)){cp += g;return "";}else {var p = cp; cp = ""; return...