Cat Showroom

catmachine.js

(function (catmachine) {

    catmachine.getCat = function (catId) {
        return buildCat(catId);
    };

    catmachine.getRandomCatId = function () {
        var id = '';
        for (var i = 0; i < 8; i++) {
            id += (Math.floor(Math.random() * 4) + 1);
        }
        return id;
    };

    var cat = {
        EARS: {
            pos: 0,
            inventory: [
                ' /\\_/\\ ',
                ' )\\_/( ',
                ' ^___^ ',
                '|\\___/|'
            ]
        },
        FACE: {
            pos: 1,
            inventory: [
                '(     )',
                '>     <',
                '=     =',
                '{     }'
            ]
        },
        LEFT_EYE: {
            pos: 2,
            inventory: 'oO><'
        },
        NOSE: {
            pos: 3,
            inventory: ' .,_'
        },
        RIGHT_EYE: {
            pos: 4,
            inventory: 'oO><'
        },
        COLLAR: {
            pos: 5,
            inventory: [
                ' ==*== ',
                ' \\ u / ',
                ' - # - ',
                ' -.^.- '
            ]
        },
        BODY: {
            pos: 6,
            inventory: [
                '(     )',
                '/     \\',
                '| n n |',
                '{|| ||}'
            ]
        },
        LEGS: {
            pos: 7,
            inventory: [
                ' "" "" ',
                ' oo oo ',
                ' (, ,) ',
                ' -m-m- '
            ]
        }
    };


    function getPart(catId, part) {
        return part.inventory[parseInt(catId[part.pos]) - 1]
    }

    function buildCat(catId) {
        return getPart(catId, cat.EARS) + '\n'
            + getPart(catId, cat.FACE).slice(0, 2)
            + getPart(catId, cat.LEFT_EYE)
            + getPart(catId, cat.NOSE)
            + getPart(catId, cat.RIGHT_EYE)
            + getPart(catId, cat.FACE).slice(-2) + '\n'
            + getPart(catId, cat.COLLAR) + '\n'
            + getPart(catId, cat.BODY) + '\n'
            + getPart(catId, cat.LEGS) + '\n'
    }
    

}(window.catmachine = window.catmachine || {}));

catpolaroid.css

@font-face {
    font-family: handwritten;
    src: url('Lex Font.ttf');
}

body {
    background: url(http://zurb.com/playground/uploads/upload/upload/87/wood-bg.jpg) repeat;
}

.polaroid-wrapper {

    /*width:800px;*/
    /*height:500px;*/
    /*margin:0 auto;*/
    /*position:absolute;*/
    /*left:50%;*/
    /*top:50%;*/
    /*background: #999999;*/
    /*background-color : transparent;*/
    margin-left:-400px;
    margin-top:-250px;
    text-align: center;
}

.polaroid {
    width: 300px;
    background: #ffffff;
    position: absolute;
    /*top: 50%;*/
    /*left: 50%;*/
    /*transform: translateX(-50%) translateY(-50%);*/
    -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
    -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
}

.polaroid .pic {
    width: 260px;
    margin: 0 auto;
    margin-top: 15px;
}

.polaroid .pic pre {
    width: 260px;
    font-size: 40px;
    background: #336699;
    color: #FFFFFF;
    display: table-cell;
    text-align: center;
    mix-blend-mode: difference;
}

.polaroid .caption {
    font-family: handwritten;
    font-weight: normal;
    color: #000000;
    margin-top: 10px;
    height: 30px;
    font-weight: bold;
    font-size: 25px;
}

colour.js

(function (colour) {

    colour.randomColour = function () {
        var c;
        c = Math.floor(Math.random() * 0x1000000); // integer between 0x0 and 0xFFFFFF
        c = c.toString(16); // convert to hex
        c = ("000000" + c).slice(-6); // pad with leading zeros
        c = "#" + c; // prepend #
        return c;
    };

    colour.invertCssColour = function (c) {
        var rgb = invertColour(hexColour2rgb(c));
        return rgb2hexColour(rgb);
    };

    colour.rgb2hexColour = function (rgb) {
        return '#' + dec2hex(rgb.r) + dec2hex(rgb.g) + dec2hex(rgb.b);
    };

    function invertColour(rgb) {
        var yuv = rgb2yuv(rgb);
        var factor = 180;
        var threshold = 100;
        yuv.y = clamp(yuv.y + (yuv.y > threshold ? -factor : factor));
        return yuv2rgb(yuv);
    }
    
    function hexColour2rgb(c) {
        c = c.substring(1); // remove #
        return {
            r: parseInt(c.substring(0, 2), 16),
            g: parseInt(c.substring(2, 4), 16),
            b: parseInt(c.substring(4, 6), 16)
        };
    }

    function rgb2hexColour(rgb) {
        return '#' + dec2hex(rgb.r) + dec2hex(rgb.g) + dec2hex(rgb.b);
    }

    function dec2hex(n) {
        var hex = n.toString(16);
        if (hex.length < 2) {
            return '0' + hex;
        }
        return hex;
    }

    function rgb2yuv(rgb) {
        var y = clamp(rgb.r * 0.29900 + rgb.g * 0.587 + rgb.b * 0.114);
        var u = clamp(rgb.r * -0.16874 + rgb.g * -0.33126 + rgb.b * 0.50000 + 128);
        var v = clamp(rgb.r * 0.50000 + rgb.g * -0.41869 + rgb.b * -0.08131 + 128);
        return {y: y, u: u, v: v};
    }

    function yuv2rgb(yuv) {
        var y = yuv.y;
        var u = yuv.u;
        var v = yuv.v;
        var r = clamp(y + (v - 128) * 1.40200);
        var g = clamp(y + (u - 128) * -0.34414 + (v - 128) * -0.71414);
        var b = clamp(y + (u - 128) * 1.77200);
        return {r: r, g: g, b: b};
    }

    function clamp(n) {
        if (n < 0) {
            return 0;
        }
        if (n > 255) {
            return 255;
        }
        return Math.floor(n);
    }
    
}(window.colour = window.colour || {}));

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cat Showroom</title>

    <link rel="stylesheet" type="text/css" href="catpolaroid.css">
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"
            integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
            crossorigin="anonymous"></script>


    <script src="catmachine.js" type="application/javascript"></script>
    <script src="colour.js" type="application/javascript"></script>
    <script type="application/javascript">

        function getCatPolaroid() {
            var catId = catmachine.getRandomCatId();
            var $polaroid = $('#template').clone();

            $('.pic', $polaroid).html('<pre>\n\n' + catmachine.getCat(catId) + '\n</pre>');
            $('.caption', $polaroid).html('Cat #' + catId);

            applyRandomRotation($polaroid);
            applyRandomTranslation($polaroid);
            applyRandomPortraitColor($polaroid);
            return $polaroid;
        }

        function applyRandomRotation($elem) {
            var maxRotation = 30;
            var rotation = Math.floor(Math.random() * maxRotation * 2) - maxRotation;  // could be +ve or -ve

            $elem.css("-webkit-transform", "rotate(" + rotation + "deg)");
            $elem.css("-moz-transform", "rotate(" + rotation + "deg)");

            return $elem;
        }

        function applyRandomTranslation($elem) {

            var ww = $(window).width() - 250;
            var wh = $(window).height() - 400;

            $elem.css('top', Math.floor(Math.random() * wh));
            $elem.css('left', Math.floor(Math.random() * ww));

            return $elem;
        }

        function applyRandomPortraitColor($elem) {
            var bgColour = colour.randomColour();

            $('.pic > pre', $elem)
                    .css('background-color', bgColour)
                    .css('color', colour.invertCssColour(bgColour));

            return $elem;
        }

        var fifoQueue = [];
        var queueSize = 20;

        function snap() {
            fifoQueue.push(_snap());
            if (fifoQueue.length > queueSize) {
                var oldSnap = fifoQueue.shift();
                oldSnap.fadeOut(function () {
                    $(this).remove();
                });
            }
        }

        function _snap() {
            return getCatPolaroid()
                    .appendTo('#catwalk')
                    .fadeIn()
        }


        $(document).ready(function () {
            
            snap();
            window.setInterval(function () {
                snap();
            }, 2000);

        });
    </script>
</head>
<body>

<div class="polaroid" id="template" style="display:none">
    <div class="pic"></div>
    <div class="caption"></div>
</div>

<div class="polaroid-wrapper" id="catwalk"></div>

</body>
</html>

Lex Font.ttf

wood-bg.jpg