Everything init

css/main.css

@@ -0,0 +1,493 @@
+/*****************************************************************************/
+/*
+/* Common
+/*
+/*****************************************************************************/
+
+/* Box sizing. Courtesy of Paul Irish
+ * (http://www.paulirish.com/2012/box-sizing-border-box-ftw/) */
+*, *:before, *:after {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+html {
+  width: 100%;
+  height: 100%;
+  background: whitesmoke;
+}
+
+body {
+  font-family: 'Open Sans', Arial, sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  color: #444;
+}
+
+h2 {
+  font-weight: 300;
+}
+
+hr {
+  width: 75%;
+}
+
+a {
+  color:FireBrick;
+  text-decoration: none;
+}
+
+p {
+  margin: 0 0 10px;
+}
+
+a:visited {
+  color:#855C85;
+}
+
+a:hover {
+  color:FireBrick;
+  text-decoration: underline;
+}
+
+canvas {
+  position: fixed;
+  top: 0;
+  left: 0;
+}
+
+blockquote {
+  margin-left: 20px;
+  margin-right: 20px;
+  padding-left: 1rem;
+  border-left: solid 3px #aaa;
+}
+
+blockquote p {
+  margin-bottom: 6px;
+}
+
+@font-face {
+    font-family: 'dejavu_sans_monobook';
+    src: url('DejaVuSansMono-webfont.eot');
+    src: url('DejaVuSansMono-webfont.eot?#iefix') format('embedded-opentype'),
+         url('DejaVuSansMono-webfont.woff') format('woff'),
+         url('DejaVuSansMono-webfont.ttf') format('truetype'),
+         url('DejaVuSansMono-webfont.svg#dejavu_sans_monobook') format('svg');
+    font-weight: normal;
+    font-style: normal;
+}
+
+/*****************************************************************************/
+/*
+/* Grid
+/*
+/*****************************************************************************/
+
+/* Grid. Courtesy of Adam Kaplan (http://www.adamkaplan.me/grid/) */
+.container {
+  margin: 0 auto;
+  max-width: 48rem;
+  width: 90%;
+}
+
+@media (min-width: 40rem) {
+  .column {
+    float: left;
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+  
+  .column.full { width: 100%; }
+  .column.two-thirds { width: 66.7%; }
+  .column.half { width: 50%; }
+  .column.third { width: 33.3%; }
+  .column.fourth { width: 25%; }
+  .column.three-fourths { width: 75%; }
+  .column.flow-opposite { float: right; }  
+}
+
+.clearfix:before,
+.clearfix:after {
+  content: " ";
+  display: table;
+}
+ 
+.clearfix:after {
+  clear: both;
+}
+ 
+.clearfix {
+  *zoom: 1;
+}
+
+@media (min-width: 40rem) {
+  .column.flow-opposite { float: right; }
+}
+
+/* More suggestions from Jorden Lev (http://jordanlev.github.io/grid/) */
+@-webkit-viewport {width: device-width;}
+@-moz-viewport {width: device-width;}
+@-ms-viewport {width: device-width;}
+@-o-viewport {width: device-width;}
+@viewport {width: device-width;}
+
+img { width: auto; max-width: 100%; height: auto; }
+
+/* Credit http://avexdesigns.com/responsive-youtube-embed/#sthash.Q9VzxV8M.dpuf
+ * for this responsive video embed css */
+.video-container {
+  position: relative;
+  padding-bottom: 56.25%;
+  padding-top: 30px; height: 0; overflow: hidden;
+}
+ 
+.video-container iframe,
+.video-container object,
+.video-container embed {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  padding-bottom: 5px;
+}
+
+/* By me */
+.hide-mobile {
+  display: none;
+}
+.hide-desktop-inline-block { display: inline-block }
+.hide-desktop-block { display: block }
+.hide-desktop-inline { display: inline }
+
+@media (min-width: 40rem) {
+  .hide-desktop { display: none }
+  .hide-mobile-inline-block { display: inline-block }
+  .hide-mobile-block { display: block }
+  .hide-mobile-inline { display: inline }
+}
+
+/*****************************************************************************/
+/*
+/* Blog
+/*
+/*****************************************************************************/
+
+h1.title {
+  display: inline-block;
+  padding-right: 10px;
+  font-size: 2rem;
+  font-weight: 200;
+  margin: 0;
+}
+
+div.header {
+  margin: 20px 0 20px;
+  text-align: center;
+}
+
+@media (min-width: 40rem) {
+  div.header {
+    text-align: start;
+  }
+}
+
+div.header a {
+  color: FireBrick;
+}
+
+span.timestamp {
+  font-size: 0.85rem;
+  margin-top: 7px;
+}
+
+@media (min-width: 40rem) {
+  span.timestamp {
+    float: right;
+  }
+}
+
+.post-header {
+  padding-bottom: 10px;
+}
+
+a.read-more {
+  float: right;
+  font-size: 0.85rem;
+}
+
+h2.post-title {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+@media (min-width: 40rem) {
+  p.contact-links {
+    float: right;
+  }
+}
+
+.contact {
+  text-align: center;
+  padding-bottom: 10px;
+}
+
+div.more-row {
+  padding-top: 5px;
+}
+
+div.pagination {
+  text-align: center;
+  margin-bottom: 10px;
+}
+
+div.rss {
+ text-align: center;
+}
+
+a.rss img {
+  max-width: 16px;
+  max-height: 16px;
+  margin: 0.5rem 0;
+}
+
+/*****************************************************************************/
+/*
+/* Posts
+/*
+/*****************************************************************************/
+
+/* standard */
+.post pre {
+  border: 1px solid #ddd;
+  background-color: #eef;
+  padding: 0 .4em;
+  white-space: pre;
+}
+
+@media (min-width: 40rem) {
+  .post pre {
+    white-space: pre-wrap;
+  }
+}
+
+.post ul, .post ol {
+  margin-left: 0;
+  padding-left: 20px;
+}
+
+@media (min-width: 40rem) {
+  .post ul, .post ol {
+    margin-left: 0.5em;
+    padding-left: 40px;
+  }
+}
+
+.post code {
+  border: 1px solid #ddd;
+  background-color: #eef;
+  padding: 0 .2em;
+  font-size: 8pt;
+  font-family: 'dejavu_sans_monobook', Courier, monospace;
+}
+
+@media (min-width: 40rem) {
+  .post code {
+    font-size: 10pt;
+  }
+}
+
+.post pre code {
+  border: none;
+  padding: 0;
+}
+
+/* terminal */
+.post pre.terminal {
+  border: 1px solid #000;
+  background-color: #333;
+  color: #FFF;
+}
+
+.post pre.terminal code {
+  background-color: #333;
+}
+
+.post img.half-left {
+  float: none;
+  width: 100%;
+}
+
+.post img.half-right {
+  float: none;
+  width: 100%;
+}
+
+@media (min-width: 40rem) {
+  .post img.half-left {
+    float: left;
+    width: 49%;
+    margin-bottom: 10px;
+  }
+  .post img.half-right {
+    float: right;
+    width: 49%;
+    margin-bottom: 10px;
+  }
+}
+
+/*****************************************************************************/
+/*
+/* Homepage
+/*
+/*****************************************************************************/
+
+#home {
+  display: block;
+  position: relative;
+  padding-top: 1.5rem;
+}
+
+/* credit to http://codepen.io/bennettfeely/pen/Ftczh for a lot of this css */
+
+.card {
+  position: relative;
+  z-index: 2;
+  padding: 1rem;
+  box-shadow: 0 1px 2px #aaa;
+  background: white;
+  margin: 0 0.5rem 1rem;
+  border-radius: 3px;
+  user-select: none;
+}
+
+h1.big-name {
+  font-size: 2rem;
+  font-weight: 200;
+  margin-top: 0;
+  text-align: center;
+}
+
+#front-quote , #front-quote, .profile-card-desc p {
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+.profile-card-portrait {
+  width: 100%;
+  margin-bottom: 1.5rem;
+}
+
+.profile-card-quote {
+  margin-top: 1.5rem;
+}
+
+.profile-card-portrait img {
+  margin: 0 auto;
+  display: block;
+}
+
+.profile-card-desc {
+    margin-top: 1.25rem;
+}
+
+@media (min-width: 40rem) {
+  .profile-card-portrait {
+    margin-bottom: 0;
+  }
+  .profile-card-links {
+    margin-top: 0;
+  }
+}
+
+.link-card {
+  text-align: center;
+  text-decoration: none;
+}
+
+.link-card img {
+  max-width: 64px;
+  max-height: 64px;
+}
+
+.mobile-half {
+  padding: 0;
+  float: left;
+  width: 50%;
+}
+
+@media (min-width: 40rem) {
+  .mobile-half {
+    padding: 0;
+  }
+}
+
+a.no-decoration {
+  color: #444;
+  display: block;
+}
+
+a.no-decoration:visited {
+  color: #444;
+}
+
+a.no-decoration:hover {
+  color: #444;
+  text-decoration: none;
+}
+
+/*****************************************************************************/
+/*
+/* Magic
+/*
+/*****************************************************************************/
+
+div.controls-tab button {
+  width: 28px;
+  height: 28px;
+}
+
+div.options-panel {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  padding: 10px;
+  width: 100%;
+  z-index: 10;
+  height: auto;
+  background-color: rgba(140,120,100,0.75);
+  color: white;
+}
+
+div.controls-tab {
+  position: relative;
+}
+
+div.controls {
+  position: absolute;
+  top: -2.6rem;
+  right: 1rem;
+  height: 2rem;
+  padding-right: 5px;
+  padding-left: 5px;
+  background-color: rgba(140,120,100,0.75);
+}
+
+div.controls button {
+  padding: 0.25rem;
+  margin-top: 0.25rem;
+  background-color: rgb(100, 100, 100);
+  border: 1px grey solid;
+  color: white;
+  font-size: small;
+}
+
+div.options-panel form {
+  text-align: center
+}
+
+div.options-panel form label {
+  display: block;
+}

css/normalize.css

@@ -0,0 +1,425 @@
+/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
+
+/**
+ * 1. Set default font family to sans-serif.
+ * 2. Prevent iOS text size adjust after orientation change, without disabling
+ *    user zoom.
+ */
+
+html {
+  font-family: sans-serif; /* 1 */
+  -ms-text-size-adjust: 100%; /* 2 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/**
+ * Remove default margin.
+ */
+
+body {
+  margin: 0;
+}
+
+/* HTML5 display definitions
+   ========================================================================== */
+
+/**
+ * Correct `block` display not defined for any HTML5 element in IE 8/9.
+ * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
+ * Correct `block` display not defined for `main` in IE 11.
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+nav,
+section,
+summary {
+  display: block;
+}
+
+/**
+ * 1. Correct `inline-block` display not defined in IE 8/9.
+ * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
+ */
+
+audio,
+canvas,
+progress,
+video {
+  display: inline-block; /* 1 */
+  vertical-align: baseline; /* 2 */
+}
+
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+/**
+ * Address `[hidden]` styling not present in IE 8/9/10.
+ * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
+ */
+
+[hidden],
+template {
+  display: none;
+}
+
+/* Links
+   ========================================================================== */
+
+/**
+ * Remove the gray background color from active links in IE 10.
+ */
+
+a {
+  background: transparent;
+}
+
+/**
+ * Improve readability when focused and also mouse hovered in all browsers.
+ */
+
+a:active,
+a:hover {
+  outline: 0;
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
+ */
+
+abbr[title] {
+  border-bottom: 1px dotted;
+}
+
+/**
+ * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
+ */
+
+b,
+strong {
+  font-weight: bold;
+}
+
+/**
+ * Address styling not present in Safari and Chrome.
+ */
+
+dfn {
+  font-style: italic;
+}
+
+/**
+ * Address variable `h1` font-size and margin within `section` and `article`
+ * contexts in Firefox 4+, Safari, and Chrome.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/**
+ * Address styling not present in IE 8/9.
+ */
+
+mark {
+  background: #ff0;
+  color: #000;
+}
+
+/**
+ * Address inconsistent and variable font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sup {
+  top: -0.5em;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove border when inside `a` element in IE 8/9/10.
+ */
+
+img {
+  border: 0;
+}
+
+/**
+ * Correct overflow not hidden in IE 9/10/11.
+ */
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * Address margin not present in IE 8/9 and Safari.
+ */
+
+figure {
+  margin: 1em 40px;
+}
+
+/**
+ * Address differences between Firefox and other browsers.
+ */
+
+hr {
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  height: 0;
+}
+
+/**
+ * Contain overflow in all browsers.
+ */
+
+pre {
+  overflow: auto;
+}
+
+/**
+ * Address odd `em`-unit font size rendering in all browsers.
+ */
+
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * Known limitation: by default, Chrome and Safari on OS X allow very limited
+ * styling of `select`, unless a `border` property is set.
+ */
+
+/**
+ * 1. Correct color not being inherited.
+ *    Known issue: affects color of disabled elements.
+ * 2. Correct font properties not being inherited.
+ * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  color: inherit; /* 1 */
+  font: inherit; /* 2 */
+  margin: 0; /* 3 */
+}
+
+/**
+ * Address `overflow` set to `hidden` in IE 8/9/10/11.
+ */
+
+button {
+  overflow: visible;
+}
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+ * Correct `select` style inheritance in Firefox.
+ */
+
+button,
+select {
+  text-transform: none;
+}
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ *    `input` and others.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+  -webkit-appearance: button; /* 2 */
+  cursor: pointer; /* 3 */
+}
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+html input[disabled] {
+  cursor: default;
+}
+
+/**
+ * Remove inner padding and border in Firefox 4+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+input {
+  line-height: normal;
+}
+
+/**
+ * It's recommended that you don't attempt to style these elements.
+ * Firefox's implementation doesn't respect box-sizing, padding, or width.
+ *
+ * 1. Address box sizing set to `content-box` in IE 8/9/10.
+ * 2. Remove excess padding in IE 8/9/10.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Fix the cursor style for Chrome's increment/decrement buttons. For certain
+ * `font-size` values of the `input`, it causes the cursor style of the
+ * decrement button to change from `default` to `text`.
+ */
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
+ *    (include `-moz` to future-proof).
+ */
+
+input[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box; /* 2 */
+  box-sizing: content-box;
+}
+
+/**
+ * Remove inner padding and search cancel button in Safari and Chrome on OS X.
+ * Safari (but not Chrome) clips the cancel button when the search input has
+ * padding (and `textfield` appearance).
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * Define consistent border, margin, and padding.
+ */
+
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct `color` not being inherited in IE 8/9/10/11.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ */
+
+legend {
+  border: 0; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Remove default vertical scrollbar in IE 8/9/10/11.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * Don't inherit the `font-weight` (applied by a rule above).
+ * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+ */
+
+optgroup {
+  font-weight: bold;
+}
+
+/* Tables
+   ========================================================================== */
+
+/**
+ * Remove most spacing between table cells.
+ */
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+td,
+th {
+  padding: 0;
+}

home.html

@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <title>UI Stuff</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, max-scale=1">
+
+    <!-- 3rd party CSS -->
+    <link rel="stylesheet" href="/css/normalize.css">
+    <!-- Fix IE -->
+    <!--[if lt IE 9]>
+      <script src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7/html5shiv.js"></script>
+      <script src="http://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js"></script>
+    <![endif]-->
+
+    <!-- syntax highlighting CSS -->
+    <link rel="stylesheet" href="/css/syntax.css">
+
+    <!-- Custom CSS -->
+    <link rel="stylesheet" href="/css/main.css">
+
+    <!-- RSS Feed -->
+    <link href='/feed.xml' rel='alternate' type='application/atom+xml'>
+
+    <!-- Web Fonts -->
+    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,400italics,300,300italics,200' rel='stylesheet' type='text/css'>
+
+    <!-- Icon Fonts -->
+    <link rel="stylesheet" href="/css/ionicons.min.css">
+
+    <!-- Favicon -->
+    <link rel="shortcut icon" href="/favicon.png" />
+
+    <!-- Scripts -->
+    <script src="/js/AnimationFrame.min.js"></script>
+    <script async src="/js/magic.js"></script>
+
+    <!-- Google Analytics -->
+    <script>
+    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+    ga('create', 'UA-39880341-1', 'auto');
+    ga('send', 'pageview');
+
+    </script>
+    <!-- End Google Analytics -->
+  </head>
+  <body>
+  <canvas id="magic"></canvas>
+  </body>
+  <script>
+    window.onload = function () {
+      new Stuff().draw();
+    }
+  </script>
+</html>

index.html

@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <title>Stuff</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, max-scale=1">
+
+    <!-- 3rd party CSS -->
+    <link rel="stylesheet" href="/css/normalize.css">
+    <!-- Fix IE -->
+    <!--[if lt IE 9]>
+      <script src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7/html5shiv.js"></script>
+      <script src="http://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js"></script>
+    <![endif]-->
+
+    <!-- Custom CSS -->
+    <link rel="stylesheet" href="/css/main.css">
+
+    <!-- RSS Feed -->
+    <link href='/feed.xml' rel='alternate' type='application/atom+xml'>
+
+    <!-- Web Fonts -->
+    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,400italics,300,300italics,200' rel='stylesheet' type='text/css'>
+
+    <!-- Favicon -->
+    <link rel="shortcut icon" href="/favicon.png" />
+
+    <!-- Scripts -->
+    <script src="/js/AnimationFrame.min.js"></script>
+    <script async src="/js/stuff.js"></script>
+
+    <!-- Google Analytics -->
+    <script>
+    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+    ga('create', 'UA-39880341-1', 'auto');
+    ga('send', 'pageview');
+
+    </script>
+    <!-- End Google Analytics -->
+  </head>
+  <body>
+  <canvas id="magic"></canvas>
+    <div class="container">
+    </div>
+  </body>
+  <script>
+    window.onload = function () {
+      new Stuff().draw();
+    }
+  </script>
+</html>

js/stuff.js

@@ -0,0 +1,217 @@
+var Stuff = function (options) {
+    options = options || {};
+    this.paused = false;
+
+    // Save this query here now that the page is loaded
+    this.canvas = document.getElementById("magic");
+
+    this.counter = 0;
+};
+
+
+/* Get the height and width of full document. To avoid browser
+ * incompatibility issues, choose the maximum of all height/width values.
+ *
+ * Method from http://stackoverflow.com/a/1147768 */
+Stuff.prototype.getDocumentDimensions = function () {
+    var body = document.body,
+        html = document.documentElement;
+
+    var height = Math.max(body.scrollHeight, body.offsetHeight, 
+                          html.clientHeight, html.scrollHeight,
+                          html.offsetHeight);
+
+    var width = Math.max(body.scrollWidth, body.offsetWidth, 
+                         html.clientWidth, html.scrollWidth,
+                         html.offsetWidth);
+    
+    return {"height": height, "width": width};
+};
+
+/* Choose a random RGB color to begin the color gradient with */
+Stuff.prototype.pickRandomColor = function() {
+    return {"r": Math.floor(Math.random() * (255 + 1)),
+            "g": Math.floor(Math.random() * (255 + 1)),
+            "b": Math.floor(Math.random() * (255 + 1))};
+};
+
+Stuff.prototype.clear = function() {
+    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+};
+
+Stuff.prototype.getRandomInRange = function(min, max, negative) {
+    rand = Math.floor(Math.random() * (max - min + 1)) + min;
+    if (negative) {
+        if (Math.random() < 0.5) {
+            rand = rand * -1;
+        }
+    }
+    return rand;
+};
+
+Stuff.prototype.sortedInsert = function(ordered_array, value, to_insert) {
+    for (i = 0; i < ordered_array.length; i++) {
+        if (ordered_array[i] >= value) {
+            ordered_array.splice(i, 0, to_insert);
+            return;
+        }
+    }
+    ordered_array.push(to_insert);
+};
+
+Stuff.prototype.lineToNearestPoints = function(context, ordered_array) {
+    for (i = 0; i < ordered_array.length; i++) {
+        point = ordered_array[i];
+        context.beginPath();
+        context.strokeStyle = 'black';
+        context.moveTo(point.x, point.y);
+        if (i !== 0) {
+            point_before = ordered_array[i-1];
+            context.lineTo(point_before.x, point_before.y);
+        }
+        context.moveTo(point.x, point.y);
+        if (i !== (ordered_array.length - 1)) {
+            point_after = ordered_array[i+1];
+            context.lineTo(point_after.x, point_after.y);
+        }
+        context.stroke();
+        context.closePath();
+    }
+};
+
+Stuff.prototype.initPoints = function(width, height, num_points) {
+    this.points = [];
+    for (i = 0; i < num_points; i++) {
+        random_x = Math.floor(Math.random() * (width + 1));
+        random_y = Math.floor(Math.random() * (height + 1));
+        point = {'x': random_x, 'y': random_y};
+        this.points.push(point);
+    }
+};
+
+Stuff.prototype.distance = function(point1, point2) {
+    return Math.sqrt(Math.pow((point1.x - point2.x), 2) + Math.pow((point1.y - point2.y), 2));
+};
+
+Stuff.prototype.drawPolygon = function(context) {
+    for (i = 0; i < this.points.length; i++) {
+        if (this.converge_point) {
+            if (this.points[i].x >= this.converge_point.x) {
+                this.points[i].x = this.points[i].x - 3;
+            } else {
+                this.points[i].x = this.points[i].x + 3;
+            }
+            if (this.points[i].y >= this.converge_point.y) {
+                this.points[i].y = this.points[i].y - 3;
+            } else {
+                this.points[i].y = this.points[i].y + 3;
+            }
+        } else if (this.counter % 10 === 0) {
+            if (Math.random() < 0.5) {
+                this.points[i].y = this.points[i].y - 10;
+            } else {
+                this.points[i].y = this.points[i].y + 10;
+            }
+        } else if ((this.mouse_position) && (this.distance(this.mouse_position, this.points[i]) < 50)) {
+            if (this.points[i].x >= this.mouse_position.x) {
+                this.points[i].x = this.points[i].x + 3;
+            } else {
+                this.points[i].x = this.points[i].x - 3;
+            }
+            if (this.points[i].y >= this.mouse_position.y) {
+                this.points[i].y = this.points[i].y + 3;
+            } else {
+                this.points[i].y = this.points[i].y - 3;
+            }
+        } else {
+            this.points[i].x = this.points[i].x + this.getRandomInRange(0, 2, true);
+            this.points[i].y = this.points[i].y + this.getRandomInRange(0, 2, true);
+        }
+        // this.x_sorted = [];
+        // this.y_sorted = [];
+        // this.sortedInsert(this.x_sorted, this.points[i].x, point);
+        // this.sortedInsert(this.y_sorted, this.points[i].y, point);
+
+        context.beginPath();
+        context.strokeStyle = 'black';
+        context.arc(this.points[i].x, this.points[i].y, 1, 0, 2*Math.PI);
+        context.stroke();
+        context.closePath();
+    }
+
+    this.converge_point = null;
+    // this.lineToNearestPoints(context, this.x_sorted);
+    // this.lineToNearestPoints(context, this.y_sorted);
+};
+
+/* Most of this funtion is provided by Maissan Inc. in their tutorial:
+   http://www.maissan.net/articles/simulating-vines */
+ Stuff.prototype.drawThing = function(context, sort, prune, chain) {
+    var AnimationFrame = window.AnimationFrame;
+    AnimationFrame.shim();
+    var animationFrame = new AnimationFrame(30),
+        timeCounter = 0,
+        color,
+        gradient;
+    context.lineWidth = 0.5;
+    
+    var self = this;
+    function animate(time) {
+        // resize canvas if document size changed
+        dimensions = self.getDocumentDimensions();
+        if ((dimensions.height !== self.canvas.height) ||
+            (dimensions.width !== self.canvas.width)) {
+            self.canvas.height = dimensions.height;
+            self.canvas.width = dimensions.width;
+        }
+        if (self.points === undefined) {
+            self.initPoints(self.canvas.width, self.canvas.height, 5000);
+        }
+
+        if (!self.paused) {
+            self.clear();
+            self.drawPolygon(context);
+            self.counter = self.counter + 1;
+        }
+        frameId = animationFrame.request(animate);
+    }
+
+    // Drawing interval
+    var frameId = animationFrame.request(animate);
+    return frameId;
+};
+
+Stuff.prototype.canvasClickHandler = function(event) {
+    var x = event.pageX;
+    var y = event.pageY;
+    this.converge_point = {'x': x, 'y': y};
+    color = this.pickRandomColor();
+    this.canvas.style.backgroundColor = "rgb(" + color.r + "," + color.g + "," + color.b + ")";
+};
+
+Stuff.prototype.canvasMouseMoveHandler = function(event) {
+    var x = event.pageX;
+    var y = event.pageY;
+    this.mouse_position = {'x': x, 'y': y};
+};
+
+Stuff.prototype.draw = function() {
+    var interval_time = 2000;
+
+    // Initialize canvas
+    var dimensions = this.getDocumentDimensions();
+    this.canvas.height = dimensions.height;
+    this.canvas.width = dimensions.width;
+
+    // Check for canvas support, bind click event, and get context
+    if (this.canvas.getContext){
+        var self = this;
+        this.canvas.addEventListener("click", function () { self.canvasClickHandler.apply(self, arguments); });
+        this.canvas.addEventListener("mousemove", function () { self.canvasMouseMoveHandler.apply(self, arguments); });
+
+        this.context = this.canvas.getContext("2d");
+
+        // Draw stuff
+        var frameId = this.drawThing(this.context, false, true, true);
+    }
+};