nate2014jatc/index.html

## index.html
<!DOCTYPE html>
<html>
 <head>
  <script type="application/javascript"
          src="http://code.jquery.com/jquery-1.8.2.min.js">
  </script>
  <script type="application/javascript"
          src="tile.js">
  </script>
  <style type="text/css">
    html, body, canvas {
      padding: 0;
      margin: 0;
    }

    #main {
      font-family: Helvetica, Arial, sans-serif;
      background-color: rgba(255, 255, 255, .8);
      overflow-y: scroll;

      display: block;
      position:absolute;
      height:auto;
      bottom:0;
      top:0;
      left:0;
      right:0;
      margin-top:20px;
      margin-bottom:20px;
      margin-right:80px;
      margin-left:80px;
      padding: 20px;

      /*
      -webkit-border-radius: 10px;
      border-radius: 10px;
      -webkit-box-shadow: 2px 3px 5px 2px rgba(0, 0, 0, .6);
      box-shadow: 2px 3px 5px 2px rgba(0, 0, 0, .6);
      */
    }
  </style>
 </head>
 <body>
   <canvas id="canvas" width="1" height="1"></canvas>
   <div id="main">
     <h1>Hannah Kilcoyne</h1>

<p>Bacon ipsum dolor sit amet beef ribs sausage chuck t-bone short loin prosciutto pancetta beef biltong. Meatloaf rump shankle chicken, prosciutto capicola pork pork belly pork loin andouille ribeye. Pork loin leberkas t-bone capicola, fatback tri-tip frankfurter jowl jerky andouille strip steak pork turducken corned beef. Shoulder pastrami boudin meatball pork loin ham hock.</p>
<p>Kielbasa meatball filet mignon flank leberkas spare ribs, pig ham hock corned beef ham. Pancetta sausage turkey meatloaf biltong bresaola. Sausage ham chicken tri-tip pig ground round salami ball tip strip steak hamburger capicola turducken short ribs tail. Shankle ground round boudin shank beef ribs andouille short ribs rump brisket turducken meatloaf. Jowl shoulder pork chop ham, venison strip steak biltong drumstick corned beef. Venison ribeye ball tip short loin, shank bacon shoulder filet mignon turkey. Leberkas short ribs jerky chuck.</p>
<p>Kielbasa capicola prosciutto bresaola beef ribs andouille shankle venison shank. Beef drumstick pancetta jerky flank ham tenderloin shoulder boudin salami. Turkey jerky pork chop pork loin, leberkas pig andouille short ribs pork. Beef ribs bresaola venison, capicola tongue pork loin corned beef. Meatball cow corned beef, ham flank pork hamburger t-bone ribeye ground round tri-tip frankfurter. Tenderloin hamburger pancetta venison shankle frankfurter pork chop spare ribs chicken.</p>
<p>Chicken tri-tip tongue frankfurter kielbasa cow beef, pancetta beef ribs sirloin prosciutto biltong andouille bacon drumstick. Shank jowl chuck, corned beef cow pork loin meatloaf. Ham hock pancetta tenderloin filet mignon sirloin boudin, pork ribeye kielbasa jerky. Pork belly sirloin filet mignon, drumstick venison jowl beef ribs chuck cow brisket boudin strip steak pork loin corned beef meatloaf. Pancetta chicken corned beef, beef spare ribs ground round pork jowl t-bone jerky.</p>
<p>Capicola spare ribs kielbasa fatback, strip steak beef ribs shank bacon. Meatloaf sirloin flank jerky, turducken pork loin pork tenderloin kielbasa boudin. Ground round beef pork loin, capicola ribeye brisket frankfurter cow turducken. Corned beef biltong pancetta flank brisket pork chop tail beef ham tongue shankle beef ribs short loin t-bone. Pork chop short ribs fatback, leberkas beef ribs brisket jerky turducken meatloaf sirloin andouille. Chuck frankfurter pork, ham capicola pancetta shoulder andouille meatloaf ground round chicken prosciutto short loin venison ball tip.</p>
      </body>
</html>

## tile.js
i = 0;
while (i < 15) {
    i++;
$(document).ready(function() {
  var COLORS = [
    "rgb(231, 151, 131)",
    "rgb(245, 206, 197)",
    "rgb(194, 143, 135)",
    "rgb(153, 115, 108)",
    "rgb(125, 100, 72)",
    "rgb(114, 108, 78)",
    "rgb(190, 160, 135)",
    "rgb(190, 128, 97)",
    "rgb(232, 175, 57)",
    "rgb(231, 214, 90)",
    "rgb(207, 190, 90)",
    "rgb(138, 140, 74)",
    "rgb(211, 201, 160)",
    "rgb(187, 193, 140)",
    "rgb(185, 199, 109)",
    "rgb(87, 118, 69)",
    "rgb(73, 82, 97)",
    "rgb(94, 111, 91)",
    "rgb(162, 183, 174)",
    "rgb(150, 211, 194)",
    "rgb(163, 198, 157)",
    "rgb(157, 205, 219)",
    "rgb(164, 162, 155)",
    "rgb(168, 205, 131)",
    "rgb(96, 92, 106)",
    "rgb(156, 124, 120)",
    "rgb(125, 120, 158)",
    "rgb(190, 150, 158)",
    "rgb(210, 187, 172)",
    "rgb(127, 127, 127)",
    "rgb(195, 195, 195)",
    "rgb(114, 110, 102)",
    "rgb(142, 136, 133)",
    "rgb(217, 221, 219)",
    "rgb(170, 166, 154)",
    "rgb(148, 142, 139)",
    "rgb(138, 130, 128)",
    "rgb(198, 190, 180)",
    "rgb(225, 221, 206)",
    "rgb(181, 168, 150)",
    "rgb(194, 188, 180)",
    "rgb(187, 176, 169)",
    "rgb(199, 191, 181)",
    "rgb(255, 215, 206)",
    "rgb(152, 166, 142)",
    "rgb(99, 102, 97)",
    "rgb(186, 148, 139)",
    "rgb(164, 164, 164)",
    "rgb(139, 179, 167)",
    "rgb(151, 169, 145)",
    "rgb(75, 68, 62)",
    "rgb(105, 99, 87)",
    "rgb(91, 87, 102)",
  ];

  var MAX_BLOCK_WIDTH = 65;
  var MIN_BLOCK_WIDTH = 5;

  /**
   * Returns a random color formatted as a string.
   */
  function randomColor() {
    return COLORS[Math.floor(Math.random() * COLORS.length)];
  }

  /**
   * Returns a random integer between min and max
   * Using Math.round() will give you a non-uniform distribution!
   */
  function getRandomInt (min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }

  function draw(canvasContext, row, filledPixels) {
    var browserWidth = $(window).width();
    var browserHeight = $(window).height();
    if(row * 65 < browserHeight) {
      if(filledPixels >= browserWidth - MAX_BLOCK_WIDTH) {
        var remainingPixels = browserWidth - filledPixels;
        canvasContext.fillStyle = randomColor();
        canvasContext.fillRect(filledPixels, row * 65, remainingPixels, 65);
        draw(canvasContext, row+1, 0);
      } else {
        var blockWidth = getRandomInt(MIN_BLOCK_WIDTH, MAX_BLOCK_WIDTH);
        canvasContext.fillStyle = randomColor();
        canvasContext.fillRect(filledPixels, row * 65, blockWidth, 65);
        draw(canvasContext, row, filledPixels + blockWidth);
      }
    }
  }

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

  function init() {
    $("#canvas").attr("width", $(window).width() - 4);
    $("#canvas").attr("height", $(window).height() - 4);
    draw(ctx, 0, 0);
  }

  $(window).resize(function() {
    init();
  });

  init();
});
}
	<!DOCTYPE html>
	<html>
	<head>
	<script type="application/javascript"
	src="http://code.jquery.com/jquery-1.8.2.min.js">
	</script>
	<script type="application/javascript"
	src="tile.js">
	</script>
	<style type="text/css">
	html, body, canvas {
	padding: 0;
	margin: 0;
	}

	#main {
	font-family: Helvetica, Arial, sans-serif;
	background-color: rgba(255, 255, 255, .8);
	overflow-y: scroll;

	display: block;
	position:absolute;
	height:auto;
	bottom:0;
	top:0;
	left:0;
	right:0;
	margin-top:20px;
	margin-bottom:20px;
	margin-right:80px;
	margin-left:80px;
	padding: 20px;

	/*
	-webkit-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 2px 3px 5px 2px rgba(0, 0, 0, .6);
	box-shadow: 2px 3px 5px 2px rgba(0, 0, 0, .6);
	*/
	}
	</style>
	</head>
	<body>
	<canvas id="canvas" width="1" height="1"></canvas>
	<div id="main">
	<h1>Hannah Kilcoyne</h1>

	<p>Bacon ipsum dolor sit amet beef ribs sausage chuck t-bone short loin prosciutto pancetta beef biltong. Meatloaf rump shankle chicken, prosciutto capicola pork pork belly pork loin andouille ribeye. Pork loin leberkas t-bone capicola, fatback tri-tip frankfurter jowl jerky andouille strip steak pork turducken corned beef. Shoulder pastrami boudin meatball pork loin ham hock.</p>
	<p>Kielbasa meatball filet mignon flank leberkas spare ribs, pig ham hock corned beef ham. Pancetta sausage turkey meatloaf biltong bresaola. Sausage ham chicken tri-tip pig ground round salami ball tip strip steak hamburger capicola turducken short ribs tail. Shankle ground round boudin shank beef ribs andouille short ribs rump brisket turducken meatloaf. Jowl shoulder pork chop ham, venison strip steak biltong drumstick corned beef. Venison ribeye ball tip short loin, shank bacon shoulder filet mignon turkey. Leberkas short ribs jerky chuck.</p>
	<p>Kielbasa capicola prosciutto bresaola beef ribs andouille shankle venison shank. Beef drumstick pancetta jerky flank ham tenderloin shoulder boudin salami. Turkey jerky pork chop pork loin, leberkas pig andouille short ribs pork. Beef ribs bresaola venison, capicola tongue pork loin corned beef. Meatball cow corned beef, ham flank pork hamburger t-bone ribeye ground round tri-tip frankfurter. Tenderloin hamburger pancetta venison shankle frankfurter pork chop spare ribs chicken.</p>
	<p>Chicken tri-tip tongue frankfurter kielbasa cow beef, pancetta beef ribs sirloin prosciutto biltong andouille bacon drumstick. Shank jowl chuck, corned beef cow pork loin meatloaf. Ham hock pancetta tenderloin filet mignon sirloin boudin, pork ribeye kielbasa jerky. Pork belly sirloin filet mignon, drumstick venison jowl beef ribs chuck cow brisket boudin strip steak pork loin corned beef meatloaf. Pancetta chicken corned beef, beef spare ribs ground round pork jowl t-bone jerky.</p>
	<p>Capicola spare ribs kielbasa fatback, strip steak beef ribs shank bacon. Meatloaf sirloin flank jerky, turducken pork loin pork tenderloin kielbasa boudin. Ground round beef pork loin, capicola ribeye brisket frankfurter cow turducken. Corned beef biltong pancetta flank brisket pork chop tail beef ham tongue shankle beef ribs short loin t-bone. Pork chop short ribs fatback, leberkas beef ribs brisket jerky turducken meatloaf sirloin andouille. Chuck frankfurter pork, ham capicola pancetta shoulder andouille meatloaf ground round chicken prosciutto short loin venison ball tip.</p>
	</body>
	</html>
	i = 0;
	while (i < 15) {
	i++;
	$(document).ready(function() {
	var COLORS = [
	"rgb(231, 151, 131)",
	"rgb(245, 206, 197)",
	"rgb(194, 143, 135)",
	"rgb(153, 115, 108)",
	"rgb(125, 100, 72)",
	"rgb(114, 108, 78)",
	"rgb(190, 160, 135)",
	"rgb(190, 128, 97)",
	"rgb(232, 175, 57)",
	"rgb(231, 214, 90)",
	"rgb(207, 190, 90)",
	"rgb(138, 140, 74)",
	"rgb(211, 201, 160)",
	"rgb(187, 193, 140)",
	"rgb(185, 199, 109)",
	"rgb(87, 118, 69)",
	"rgb(73, 82, 97)",
	"rgb(94, 111, 91)",
	"rgb(162, 183, 174)",
	"rgb(150, 211, 194)",
	"rgb(163, 198, 157)",
	"rgb(157, 205, 219)",
	"rgb(164, 162, 155)",
	"rgb(168, 205, 131)",
	"rgb(96, 92, 106)",
	"rgb(156, 124, 120)",
	"rgb(125, 120, 158)",
	"rgb(190, 150, 158)",
	"rgb(210, 187, 172)",
	"rgb(127, 127, 127)",
	"rgb(195, 195, 195)",
	"rgb(114, 110, 102)",
	"rgb(142, 136, 133)",
	"rgb(217, 221, 219)",
	"rgb(170, 166, 154)",
	"rgb(148, 142, 139)",
	"rgb(138, 130, 128)",
	"rgb(198, 190, 180)",
	"rgb(225, 221, 206)",
	"rgb(181, 168, 150)",
	"rgb(194, 188, 180)",
	"rgb(187, 176, 169)",
	"rgb(199, 191, 181)",
	"rgb(255, 215, 206)",
	"rgb(152, 166, 142)",
	"rgb(99, 102, 97)",
	"rgb(186, 148, 139)",
	"rgb(164, 164, 164)",
	"rgb(139, 179, 167)",
	"rgb(151, 169, 145)",
	"rgb(75, 68, 62)",
	"rgb(105, 99, 87)",
	"rgb(91, 87, 102)",
	];

	var MAX_BLOCK_WIDTH = 65;
	var MIN_BLOCK_WIDTH = 5;

	/**
	* Returns a random color formatted as a string.
	*/
	function randomColor() {
	return COLORS[Math.floor(Math.random() * COLORS.length)];
	}

	/**
	* Returns a random integer between min and max
	* Using Math.round() will give you a non-uniform distribution!
	*/
	function getRandomInt (min, max) {
	return Math.floor(Math.random() * (max - min + 1)) + min;
	}

	function draw(canvasContext, row, filledPixels) {
	var browserWidth = $(window).width();
	var browserHeight = $(window).height();
	if(row * 65 < browserHeight) {
	if(filledPixels >= browserWidth - MAX_BLOCK_WIDTH) {
	var remainingPixels = browserWidth - filledPixels;
	canvasContext.fillStyle = randomColor();
	canvasContext.fillRect(filledPixels, row * 65, remainingPixels, 65);
	draw(canvasContext, row+1, 0);
	} else {
	var blockWidth = getRandomInt(MIN_BLOCK_WIDTH, MAX_BLOCK_WIDTH);
	canvasContext.fillStyle = randomColor();
	canvasContext.fillRect(filledPixels, row * 65, blockWidth, 65);
	draw(canvasContext, row, filledPixels + blockWidth);
	}
	}
	}

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

	function init() {
	$("#canvas").attr("width", $(window).width() - 4);
	$("#canvas").attr("height", $(window).height() - 4);
	draw(ctx, 0, 0);
	}

	$(window).resize(function() {
	init();
	});

	init();
	});
	}