Skip to content

Instantly share code, notes, and snippets.

@shawnchin
Last active Oct 14, 2016
Embed
What would you like to do?
Cat Showroom
(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 || {}));
@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;
}
(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 || {}));
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment