diff --git a/custom.css b/custom.css index 4fd517b..647ab2d 100644 --- a/custom.css +++ b/custom.css @@ -1,46 +1,22 @@ -/*--------------------- Typography ----------------------------*/ - -@font-face { - font-family: 'aller-light'; - src: url('public/fonts/aller-light.eot'); - src: url('public/fonts/aller-light.eot?#iefix') format('embedded-opentype'), - url('public/fonts/aller-light.woff') format('woff'), - url('public/fonts/aller-light.ttf') format('truetype'); - font-weight: normal; - font-style: normal; -} - -@font-face { - font-family: 'aller-bold'; - src: url('public/fonts/aller-bold.eot'); - src: url('public/fonts/aller-bold.eot?#iefix') format('embedded-opentype'), - url('public/fonts/aller-bold.woff') format('woff'), - url('public/fonts/aller-bold.ttf') format('truetype'); - font-weight: normal; - font-style: normal; -} - -@font-face { - font-family: 'novecento-bold'; - src: url('public/fonts/novecento-bold.eot'); - src: url('public/fonts/novecento-bold.eot?#iefix') format('embedded-opentype'), - url('public/fonts/novecento-bold.woff') format('woff'), - url('public/fonts/novecento-bold.ttf') format('truetype'); - font-weight: normal; - font-style: normal; -} - /*--------------------- Layout ----------------------------*/ html { height: 100%; } body { - font-family: "aller-light"; + font-family: "Helvetica Neue", "Helvetica"; font-size: 14px; line-height: 18px; color: #30404f; margin: 0; padding: 0; height:100%; } -#container { min-height: 100%; } +#container { + min-height: 100%; + margin:0 auto; + width:640px; +} + +img { + max-width:100%; +} a { color: #000; @@ -48,19 +24,16 @@ a { b, strong { font-weight: normal; - font-family: "aller-bold"; } p, ul, ol { - margin: 15px 0 0px; + margin: 15px 0 15px 0; } h1, h2, h3, h4, h5, h6 { color: #112233; line-height: 1em; font-weight: normal; - font-family: "novecento-bold"; - text-transform: uppercase; margin: 30px 0 15px 0; } @@ -85,9 +58,6 @@ pre, tt, code { margin: 0; padding: 7px 10px; background: #fcfcfc; - -moz-box-shadow: inset 0 0 10px rgba(0,0,0,0.1); - -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.1); - box-shadow: inset 0 0 10px rgba(0,0,0,0.1); overflow-x: auto; } .annotation pre code { @@ -204,11 +174,10 @@ ul.sections > li > div { } ul.sections > li > div.content { - background: #f5f5ff; + background: #f5f5f5; + border-top:2px solid #ccc; + border-bottom:2px solid #ccc; overflow-x:auto; - -webkit-box-shadow: inset 0 0 5px #e5e5ee; - box-shadow: inset 0 0 5px #e5e5ee; - border: 1px solid #dedede; margin:5px 10px 5px 10px; padding-bottom: 5px; } @@ -363,3 +332,4 @@ pre .chunk { pre .tex .formula { opacity: 0.5; } + diff --git a/custom.jst b/custom.jst new file mode 100644 index 0000000..295cb61 --- /dev/null +++ b/custom.jst @@ -0,0 +1,62 @@ + + + + + <%= title %> + + + + + +
+
+ an open source project by tom macwright +
+ +
+ <% if (sources.length > 1) { %> + + <% } %> + +
+ + + + diff --git a/docs/custom.css b/docs/custom.css deleted file mode 100644 index 4fd517b..0000000 --- a/docs/custom.css +++ /dev/null @@ -1,365 +0,0 @@ -/*--------------------- Typography ----------------------------*/ - -@font-face { - font-family: 'aller-light'; - src: url('public/fonts/aller-light.eot'); - src: url('public/fonts/aller-light.eot?#iefix') format('embedded-opentype'), - url('public/fonts/aller-light.woff') format('woff'), - url('public/fonts/aller-light.ttf') format('truetype'); - font-weight: normal; - font-style: normal; -} - -@font-face { - font-family: 'aller-bold'; - src: url('public/fonts/aller-bold.eot'); - src: url('public/fonts/aller-bold.eot?#iefix') format('embedded-opentype'), - url('public/fonts/aller-bold.woff') format('woff'), - url('public/fonts/aller-bold.ttf') format('truetype'); - font-weight: normal; - font-style: normal; -} - -@font-face { - font-family: 'novecento-bold'; - src: url('public/fonts/novecento-bold.eot'); - src: url('public/fonts/novecento-bold.eot?#iefix') format('embedded-opentype'), - url('public/fonts/novecento-bold.woff') format('woff'), - url('public/fonts/novecento-bold.ttf') format('truetype'); - font-weight: normal; - font-style: normal; -} - -/*--------------------- Layout ----------------------------*/ -html { height: 100%; } -body { - font-family: "aller-light"; - font-size: 14px; - line-height: 18px; - color: #30404f; - margin: 0; padding: 0; - height:100%; -} -#container { min-height: 100%; } - -a { - color: #000; -} - -b, strong { - font-weight: normal; - font-family: "aller-bold"; -} - -p, ul, ol { - margin: 15px 0 0px; -} - -h1, h2, h3, h4, h5, h6 { - color: #112233; - line-height: 1em; - font-weight: normal; - font-family: "novecento-bold"; - text-transform: uppercase; - margin: 30px 0 15px 0; -} - -h1 { - margin-top: 40px; -} - -hr { - border: 0; - background: 1px solid #ddd; - height: 1px; - margin: 20px 0; -} - -pre, tt, code { - font-size: 12px; line-height: 16px; - font-family: Menlo, Monaco, Consolas, "Lucida Console", monospace; - margin: 0; padding: 0; -} - .annotation pre { - display: block; - margin: 0; - padding: 7px 10px; - background: #fcfcfc; - -moz-box-shadow: inset 0 0 10px rgba(0,0,0,0.1); - -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.1); - box-shadow: inset 0 0 10px rgba(0,0,0,0.1); - overflow-x: auto; - } - .annotation pre code { - border: 0; - padding: 0; - background: transparent; - } - - -blockquote { - border-left: 5px solid #ccc; - margin: 0; - padding: 1px 0 1px 1em; -} - .sections blockquote p { - font-family: Menlo, Consolas, Monaco, monospace; - font-size: 12px; line-height: 16px; - color: #999; - margin: 10px 0 0; - white-space: pre-wrap; - } - -ul.sections { - list-style: none; - padding:0 0 5px 0;; - margin:0; -} - -/* - Force border-box so that % widths fit the parent - container without overlap because of margin/padding. - - More Info : http://www.quirksmode.org/css/box.html -*/ -ul.sections > li > div { - -moz-box-sizing: border-box; /* firefox */ - -ms-box-sizing: border-box; /* ie */ - -webkit-box-sizing: border-box; /* webkit */ - -khtml-box-sizing: border-box; /* konqueror */ - box-sizing: border-box; /* css3 */ -} - - -/*---------------------- Jump Page -----------------------------*/ -#jump_to, #jump_page { - margin: 0; - background: white; - -webkit-box-shadow: 0 0 25px #777; -moz-box-shadow: 0 0 25px #777; - -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomleft: 5px; - font: 16px Arial; - cursor: pointer; - text-align: right; - list-style: none; -} - -#jump_to a { - text-decoration: none; -} - -#jump_to a.large { - display: none; -} -#jump_to a.small { - font-size: 22px; - font-weight: bold; - color: #676767; -} - -#jump_to, #jump_wrapper { - position: fixed; - right: 0; top: 0; - padding: 10px 15px; - margin:0; -} - -#jump_wrapper { - display: none; - padding:0; -} - -#jump_to:hover #jump_wrapper { - display: block; -} - -#jump_page { - padding: 5px 0 3px; - margin: 0 0 25px 25px; -} - -#jump_page .source { - display: block; - padding: 15px; - text-decoration: none; - border-top: 1px solid #eee; -} - -#jump_page .source:hover { - background: #f5f5ff; -} - -#jump_page .source:first-child { -} - -/*---------------------- Low resolutions (> 320px) ---------------------*/ - .pilwrap { display: none; } - - ul.sections > li > div { - display: block; - padding:5px 10px 0 10px; - } - - ul.sections > li > div.annotation ul, ul.sections > li > div.annotation ol { - padding-left: 30px; - } - - ul.sections > li > div.content { - background: #f5f5ff; - overflow-x:auto; - -webkit-box-shadow: inset 0 0 5px #e5e5ee; - box-shadow: inset 0 0 5px #e5e5ee; - border: 1px solid #dedede; - margin:5px 10px 5px 10px; - padding-bottom: 5px; - } - - ul.sections > li > div.annotation pre { - margin: 7px 0 7px; - padding-left: 15px; - } - - ul.sections > li > div.annotation p tt, .annotation code { - background: #f8f8ff; - border: 1px solid #dedede; - font-size: 12px; - padding: 0 0.2em; - } - -/*---------------------- Syntax Highlighting -----------------------------*/ - -td.linenos { background-color: #f0f0f0; padding-right: 10px; } -span.lineno { background-color: #f0f0f0; padding: 0 5px 0 5px; } -/* - -github.com style (c) Vasily Polovnyov - -*/ - -pre code { - display: block; padding: 0.5em; - color: #000; - background: #f8f8ff -} - -pre .comment, -pre .template_comment, -pre .diff .header, -pre .javadoc { - color: #408080; - font-style: italic -} - -pre .keyword, -pre .assignment, -pre .literal, -pre .css .rule .keyword, -pre .winutils, -pre .javascript .title, -pre .lisp .title, -pre .subst { - color: #954121; - /*font-weight: bold*/ -} - -pre .number, -pre .hexcolor { - color: #40a070 -} - -pre .string, -pre .tag .value, -pre .phpdoc, -pre .tex .formula { - color: #219161; -} - -pre .title, -pre .id { - color: #19469D; -} -pre .params { - color: #00F; -} - -pre .javascript .title, -pre .lisp .title, -pre .subst { - font-weight: normal -} - -pre .class .title, -pre .haskell .label, -pre .tex .command { - color: #458; - font-weight: bold -} - -pre .tag, -pre .tag .title, -pre .rules .property, -pre .django .tag .keyword { - color: #000080; - font-weight: normal -} - -pre .attribute, -pre .variable, -pre .instancevar, -pre .lisp .body { - color: #008080 -} - -pre .regexp { - color: #B68 -} - -pre .class { - color: #458; - font-weight: bold -} - -pre .symbol, -pre .ruby .symbol .string, -pre .ruby .symbol .keyword, -pre .ruby .symbol .keymethods, -pre .lisp .keyword, -pre .tex .special, -pre .input_number { - color: #990073 -} - -pre .builtin, -pre .constructor, -pre .built_in, -pre .lisp .title { - color: #0086b3 -} - -pre .preprocessor, -pre .pi, -pre .doctype, -pre .shebang, -pre .cdata { - color: #999; - font-weight: bold -} - -pre .deletion { - background: #fdd -} - -pre .addition { - background: #dfd -} - -pre .diff .change { - background: #0086b3 -} - -pre .chunk { - color: #aaa -} - -pre .tex .formula { - opacity: 0.5; -} diff --git a/docs/docco.css b/docs/docco.css deleted file mode 100644 index f690a07..0000000 --- a/docs/docco.css +++ /dev/null @@ -1,500 +0,0 @@ -/*--------------------- Typography ----------------------------*/ - -@font-face { - font-family: 'aller-light'; - src: url('public/fonts/aller-light.eot'); - src: url('public/fonts/aller-light.eot?#iefix') format('embedded-opentype'), - url('public/fonts/aller-light.woff') format('woff'), - url('public/fonts/aller-light.ttf') format('truetype'); - font-weight: normal; - font-style: normal; -} - -@font-face { - font-family: 'aller-bold'; - src: url('public/fonts/aller-bold.eot'); - src: url('public/fonts/aller-bold.eot?#iefix') format('embedded-opentype'), - url('public/fonts/aller-bold.woff') format('woff'), - url('public/fonts/aller-bold.ttf') format('truetype'); - font-weight: normal; - font-style: normal; -} - -@font-face { - font-family: 'novecento-bold'; - src: url('public/fonts/novecento-bold.eot'); - src: url('public/fonts/novecento-bold.eot?#iefix') format('embedded-opentype'), - url('public/fonts/novecento-bold.woff') format('woff'), - url('public/fonts/novecento-bold.ttf') format('truetype'); - font-weight: normal; - font-style: normal; -} - -/*--------------------- Layout ----------------------------*/ -html { height: 100%; } -body { - font-family: "aller-light"; - font-size: 14px; - line-height: 18px; - color: #30404f; - margin: 0; padding: 0; - height:100%; -} -#container { min-height: 100%; } - -a { - color: #000; -} - -b, strong { - font-weight: normal; - font-family: "aller-bold"; -} - -p, ul, ol { - margin: 15px 0 0px; -} - -h1, h2, h3, h4, h5, h6 { - color: #112233; - line-height: 1em; - font-weight: normal; - font-family: "novecento-bold"; - text-transform: uppercase; - margin: 30px 0 15px 0; -} - -h1 { - margin-top: 40px; -} - -hr { - border: 0; - background: 1px solid #ddd; - height: 1px; - margin: 20px 0; -} - -pre, tt, code { - font-size: 12px; line-height: 16px; - font-family: Menlo, Monaco, Consolas, "Lucida Console", monospace; - margin: 0; padding: 0; -} - .annotation pre { - display: block; - margin: 0; - padding: 7px 10px; - background: #fcfcfc; - -moz-box-shadow: inset 0 0 10px rgba(0,0,0,0.1); - -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.1); - box-shadow: inset 0 0 10px rgba(0,0,0,0.1); - overflow-x: auto; - } - .annotation pre code { - border: 0; - padding: 0; - background: transparent; - } - - -blockquote { - border-left: 5px solid #ccc; - margin: 0; - padding: 1px 0 1px 1em; -} - .sections blockquote p { - font-family: Menlo, Consolas, Monaco, monospace; - font-size: 12px; line-height: 16px; - color: #999; - margin: 10px 0 0; - white-space: pre-wrap; - } - -ul.sections { - list-style: none; - padding:0 0 5px 0;; - margin:0; -} - -/* - Force border-box so that % widths fit the parent - container without overlap because of margin/padding. - - More Info : http://www.quirksmode.org/css/box.html -*/ -ul.sections > li > div { - -moz-box-sizing: border-box; /* firefox */ - -ms-box-sizing: border-box; /* ie */ - -webkit-box-sizing: border-box; /* webkit */ - -khtml-box-sizing: border-box; /* konqueror */ - box-sizing: border-box; /* css3 */ -} - - -/*---------------------- Jump Page -----------------------------*/ -#jump_to, #jump_page { - margin: 0; - background: white; - -webkit-box-shadow: 0 0 25px #777; -moz-box-shadow: 0 0 25px #777; - -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomleft: 5px; - font: 16px Arial; - cursor: pointer; - text-align: right; - list-style: none; -} - -#jump_to a { - text-decoration: none; -} - -#jump_to a.large { - display: none; -} -#jump_to a.small { - font-size: 22px; - font-weight: bold; - color: #676767; -} - -#jump_to, #jump_wrapper { - position: fixed; - right: 0; top: 0; - padding: 10px 15px; - margin:0; -} - -#jump_wrapper { - display: none; - padding:0; -} - -#jump_to:hover #jump_wrapper { - display: block; -} - -#jump_page { - padding: 5px 0 3px; - margin: 0 0 25px 25px; -} - -#jump_page .source { - display: block; - padding: 15px; - text-decoration: none; - border-top: 1px solid #eee; -} - -#jump_page .source:hover { - background: #f5f5ff; -} - -#jump_page .source:first-child { -} - -/*---------------------- Low resolutions (> 320px) ---------------------*/ -@media only screen and (min-width: 320px) { - .pilwrap { display: none; } - - ul.sections > li > div { - display: block; - padding:5px 10px 0 10px; - } - - ul.sections > li > div.annotation ul, ul.sections > li > div.annotation ol { - padding-left: 30px; - } - - ul.sections > li > div.content { - background: #f5f5ff; - overflow-x:auto; - -webkit-box-shadow: inset 0 0 5px #e5e5ee; - box-shadow: inset 0 0 5px #e5e5ee; - border: 1px solid #dedede; - margin:5px 10px 5px 10px; - padding-bottom: 5px; - } - - ul.sections > li > div.annotation pre { - margin: 7px 0 7px; - padding-left: 15px; - } - - ul.sections > li > div.annotation p tt, .annotation code { - background: #f8f8ff; - border: 1px solid #dedede; - font-size: 12px; - padding: 0 0.2em; - } -} - -/*---------------------- (> 481px) ---------------------*/ -@media only screen and (min-width: 481px) { - #container { - position: relative; - } - body { - background-color: #F5F5FF; - font-size: 15px; - line-height: 21px; - } - pre, tt, code { - line-height: 18px; - } - p, ul, ol { - margin: 0 0 15px; - } - - - #jump_to { - padding: 5px 10px; - } - #jump_wrapper { - padding: 0; - } - #jump_to, #jump_page { - font: 10px Arial; - text-transform: uppercase; - } - #jump_page .source { - padding: 5px 10px; - } - #jump_to a.large { - display: inline-block; - } - #jump_to a.small { - display: none; - } - - - - #background { - position: absolute; - top: 0; bottom: 0; - width: 350px; - background: #fff; - border-right: 1px solid #e5e5ee; - z-index: -1; - } - - ul.sections > li > div.annotation ul, ul.sections > li > div.annotation ol { - padding-left: 40px; - } - - ul.sections > li { - white-space: nowrap; - } - - ul.sections > li > div { - display: inline-block; - } - - ul.sections > li > div.annotation { - max-width: 350px; - min-width: 350px; - min-height: 5px; - padding: 13px; - overflow-x: hidden; - white-space: normal; - vertical-align: top; - text-align: left; - } - ul.sections > li > div.annotation pre { - margin: 15px 0 15px; - padding-left: 15px; - } - - ul.sections > li > div.content { - padding: 13px; - vertical-align: top; - background: #f5f5ff; - border: none; - -webkit-box-shadow: none; - box-shadow: none; - } - - .pilwrap { - position: relative; - display: inline; - } - - .pilcrow { - font: 12px Arial; - text-decoration: none; - color: #454545; - position: absolute; - top: 3px; left: -20px; - padding: 1px 2px; - opacity: 0; - -webkit-transition: opacity 0.2s linear; - } - .for-h1 .pilcrow { - top: 47px; - } - .for-h2 .pilcrow, .for-h3 .pilcrow, .for-h4 .pilcrow { - top: 35px; - } - - ul.sections > li > div.annotation:hover .pilcrow { - opacity: 1; - } -} - -/*---------------------- (> 1025px) ---------------------*/ -@media only screen and (min-width: 1025px) { - - body { - font-size: 16px; - line-height: 24px; - } - - #background { - width: 525px; - } - ul.sections > li > div.annotation { - max-width: 525px; - min-width: 525px; - padding: 10px 25px 1px 50px; - } - ul.sections > li > div.content { - padding: 9px 15px 16px 25px; - } -} - -/*---------------------- Syntax Highlighting -----------------------------*/ - -td.linenos { background-color: #f0f0f0; padding-right: 10px; } -span.lineno { background-color: #f0f0f0; padding: 0 5px 0 5px; } -/* - -github.com style (c) Vasily Polovnyov - -*/ - -pre code { - display: block; padding: 0.5em; - color: #000; - background: #f8f8ff -} - -pre .comment, -pre .template_comment, -pre .diff .header, -pre .javadoc { - color: #408080; - font-style: italic -} - -pre .keyword, -pre .assignment, -pre .literal, -pre .css .rule .keyword, -pre .winutils, -pre .javascript .title, -pre .lisp .title, -pre .subst { - color: #954121; - /*font-weight: bold*/ -} - -pre .number, -pre .hexcolor { - color: #40a070 -} - -pre .string, -pre .tag .value, -pre .phpdoc, -pre .tex .formula { - color: #219161; -} - -pre .title, -pre .id { - color: #19469D; -} -pre .params { - color: #00F; -} - -pre .javascript .title, -pre .lisp .title, -pre .subst { - font-weight: normal -} - -pre .class .title, -pre .haskell .label, -pre .tex .command { - color: #458; - font-weight: bold -} - -pre .tag, -pre .tag .title, -pre .rules .property, -pre .django .tag .keyword { - color: #000080; - font-weight: normal -} - -pre .attribute, -pre .variable, -pre .instancevar, -pre .lisp .body { - color: #008080 -} - -pre .regexp { - color: #B68 -} - -pre .class { - color: #458; - font-weight: bold -} - -pre .symbol, -pre .ruby .symbol .string, -pre .ruby .symbol .keyword, -pre .ruby .symbol .keymethods, -pre .lisp .keyword, -pre .tex .special, -pre .input_number { - color: #990073 -} - -pre .builtin, -pre .constructor, -pre .built_in, -pre .lisp .title { - color: #0086b3 -} - -pre .preprocessor, -pre .pi, -pre .doctype, -pre .shebang, -pre .cdata { - color: #999; - font-weight: bold -} - -pre .deletion { - background: #fdd -} - -pre .addition { - background: #dfd -} - -pre .diff .change { - background: #0086b3 -} - -pre .chunk { - color: #aaa -} - -pre .tex .formula { - opacity: 0.5; -} diff --git a/docs/public/fonts/aller-bold.eot b/docs/public/fonts/aller-bold.eot deleted file mode 100755 index 1b32532..0000000 Binary files a/docs/public/fonts/aller-bold.eot and /dev/null differ diff --git a/docs/public/fonts/aller-bold.ttf b/docs/public/fonts/aller-bold.ttf deleted file mode 100755 index dc4cc9c..0000000 Binary files a/docs/public/fonts/aller-bold.ttf and /dev/null differ diff --git a/docs/public/fonts/aller-bold.woff b/docs/public/fonts/aller-bold.woff deleted file mode 100755 index fa16fd0..0000000 Binary files a/docs/public/fonts/aller-bold.woff and /dev/null differ diff --git a/docs/public/fonts/aller-light.eot b/docs/public/fonts/aller-light.eot deleted file mode 100755 index 40bd654..0000000 Binary files a/docs/public/fonts/aller-light.eot and /dev/null differ diff --git a/docs/public/fonts/aller-light.ttf b/docs/public/fonts/aller-light.ttf deleted file mode 100755 index c2c7290..0000000 Binary files a/docs/public/fonts/aller-light.ttf and /dev/null differ diff --git a/docs/public/fonts/aller-light.woff b/docs/public/fonts/aller-light.woff deleted file mode 100755 index 81a09d1..0000000 Binary files a/docs/public/fonts/aller-light.woff and /dev/null differ diff --git a/docs/public/fonts/novecento-bold.eot b/docs/public/fonts/novecento-bold.eot deleted file mode 100755 index 98a9a7f..0000000 Binary files a/docs/public/fonts/novecento-bold.eot and /dev/null differ diff --git a/docs/public/fonts/novecento-bold.ttf b/docs/public/fonts/novecento-bold.ttf deleted file mode 100755 index 2af39b0..0000000 Binary files a/docs/public/fonts/novecento-bold.ttf and /dev/null differ diff --git a/docs/public/fonts/novecento-bold.woff b/docs/public/fonts/novecento-bold.woff deleted file mode 100755 index de558b5..0000000 Binary files a/docs/public/fonts/novecento-bold.woff and /dev/null differ diff --git a/docs/public/stylesheets/normalize.css b/docs/public/stylesheets/normalize.css deleted file mode 100644 index 73abb76..0000000 --- a/docs/public/stylesheets/normalize.css +++ /dev/null @@ -1,375 +0,0 @@ -/*! normalize.css v2.0.1 | MIT License | git.io/normalize */ - -/* ========================================================================== - HTML5 display definitions - ========================================================================== */ - -/* - * Corrects `block` display not defined in IE 8/9. - */ - -article, -aside, -details, -figcaption, -figure, -footer, -header, -hgroup, -nav, -section, -summary { - display: block; -} - -/* - * Corrects `inline-block` display not defined in IE 8/9. - */ - -audio, -canvas, -video { - display: inline-block; -} - -/* - * Prevents modern browsers from displaying `audio` without controls. - * Remove excess height in iOS 5 devices. - */ - -audio:not([controls]) { - display: none; - height: 0; -} - -/* - * Addresses styling for `hidden` attribute not present in IE 8/9. - */ - -[hidden] { - display: none; -} - -/* ========================================================================== - Base - ========================================================================== */ - -/* - * 1. Sets default font family to sans-serif. - * 2. Prevents iOS text size adjust after orientation change, without disabling - * user zoom. - */ - -html { - font-family: sans-serif; /* 1 */ - -webkit-text-size-adjust: 100%; /* 2 */ - -ms-text-size-adjust: 100%; /* 2 */ -} - -/* - * Removes default margin. - */ - -body { - margin: 0; -} - -/* ========================================================================== - Links - ========================================================================== */ - -/* - * Addresses `outline` inconsistency between Chrome and other browsers. - */ - -a:focus { - outline: thin dotted; -} - -/* - * Improves readability when focused and also mouse hovered in all browsers. - */ - -a:active, -a:hover { - outline: 0; -} - -/* ========================================================================== - Typography - ========================================================================== */ - -/* - * Addresses `h1` font sizes within `section` and `article` in Firefox 4+, - * Safari 5, and Chrome. - */ - -h1 { - font-size: 2em; -} - -/* - * Addresses styling not present in IE 8/9, Safari 5, and Chrome. - */ - -abbr[title] { - border-bottom: 1px dotted; -} - -/* - * Addresses style set to `bolder` in Firefox 4+, Safari 5, and Chrome. - */ - -b, -strong { - font-weight: bold; -} - -/* - * Addresses styling not present in Safari 5 and Chrome. - */ - -dfn { - font-style: italic; -} - -/* - * Addresses styling not present in IE 8/9. - */ - -mark { - background: #ff0; - color: #000; -} - - -/* - * Corrects font family set oddly in Safari 5 and Chrome. - */ - -code, -kbd, -pre, -samp { - font-family: monospace, serif; - font-size: 1em; -} - -/* - * Improves readability of pre-formatted text in all browsers. - */ - -pre { - white-space: pre; - white-space: pre-wrap; - word-wrap: break-word; -} - -/* - * Sets consistent quote types. - */ - -q { - quotes: "\201C" "\201D" "\2018" "\2019"; -} - -/* - * Addresses inconsistent and variable font size in all browsers. - */ - -small { - font-size: 80%; -} - -/* - * Prevents `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 - ========================================================================== */ - -/* - * Removes border when inside `a` element in IE 8/9. - */ - -img { - border: 0; -} - -/* - * Corrects overflow displayed oddly in IE 9. - */ - -svg:not(:root) { - overflow: hidden; -} - -/* ========================================================================== - Figures - ========================================================================== */ - -/* - * Addresses margin not present in IE 8/9 and Safari 5. - */ - -figure { - margin: 0; -} - -/* ========================================================================== - Forms - ========================================================================== */ - -/* - * Define consistent border, margin, and padding. - */ - -fieldset { - border: 1px solid #c0c0c0; - margin: 0 2px; - padding: 0.35em 0.625em 0.75em; -} - -/* - * 1. Corrects color not being inherited in IE 8/9. - * 2. Remove padding so people aren't caught out if they zero out fieldsets. - */ - -legend { - border: 0; /* 1 */ - padding: 0; /* 2 */ -} - -/* - * 1. Corrects font family not being inherited in all browsers. - * 2. Corrects font size not being inherited in all browsers. - * 3. Addresses margins set differently in Firefox 4+, Safari 5, and Chrome - */ - -button, -input, -select, -textarea { - font-family: inherit; /* 1 */ - font-size: 100%; /* 2 */ - margin: 0; /* 3 */ -} - -/* - * Addresses Firefox 4+ setting `line-height` on `input` using `!important` in - * the UA stylesheet. - */ - -button, -input { - line-height: normal; -} - -/* - * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` - * and `video` controls. - * 2. Corrects inability to style clickable `input` types in iOS. - * 3. Improves 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], -input[disabled] { - cursor: default; -} - -/* - * 1. Addresses box sizing set to `content-box` in IE 8/9. - * 2. Removes excess padding in IE 8/9. - */ - -input[type="checkbox"], -input[type="radio"] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ -} - -/* - * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome. - * 2. Addresses `box-sizing` set to `border-box` in Safari 5 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; -} - -/* - * Removes inner padding and search cancel button in Safari 5 and Chrome - * on OS X. - */ - -input[type="search"]::-webkit-search-cancel-button, -input[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} - -/* - * Removes inner padding and border in Firefox 4+. - */ - -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; -} - -/* - * 1. Removes default vertical scrollbar in IE 8/9. - * 2. Improves readability and alignment in all browsers. - */ - -textarea { - overflow: auto; /* 1 */ - vertical-align: top; /* 2 */ -} - -/* ========================================================================== - Tables - ========================================================================== */ - -/* - * Remove most spacing between table cells. - */ - -table { - border-collapse: collapse; - border-spacing: 0; -} \ No newline at end of file diff --git a/graphics/.DS_Store b/graphics/.DS_Store new file mode 100644 index 0000000..ab20520 Binary files /dev/null and b/graphics/.DS_Store differ diff --git a/graphics/sphereintersection.png b/graphics/sphereintersection.png new file mode 100644 index 0000000..ce976bb Binary files /dev/null and b/graphics/sphereintersection.png differ diff --git a/graphics/sphereintersection.sketch/Data b/graphics/sphereintersection.sketch/Data new file mode 100644 index 0000000..aad2c47 Binary files /dev/null and b/graphics/sphereintersection.sketch/Data differ diff --git a/graphics/sphereintersection.sketch/QuickLook/Preview.png b/graphics/sphereintersection.sketch/QuickLook/Preview.png new file mode 100644 index 0000000..3b8405d Binary files /dev/null and b/graphics/sphereintersection.sketch/QuickLook/Preview.png differ diff --git a/graphics/sphereintersection.sketch/QuickLook/Thumbnail.png b/graphics/sphereintersection.sketch/QuickLook/Thumbnail.png new file mode 100644 index 0000000..93bcf06 Binary files /dev/null and b/graphics/sphereintersection.sketch/QuickLook/Thumbnail.png differ diff --git a/graphics/sphereintersection.sketch/fonts b/graphics/sphereintersection.sketch/fonts new file mode 100644 index 0000000..ca6cb8f --- /dev/null +++ b/graphics/sphereintersection.sketch/fonts @@ -0,0 +1,5 @@ +Helvetica +Helvetica +Helvetica +Helvetica +Helvetica \ No newline at end of file diff --git a/graphics/sphereintersection.sketch/version b/graphics/sphereintersection.sketch/version new file mode 100644 index 0000000..da2d398 --- /dev/null +++ b/graphics/sphereintersection.sketch/version @@ -0,0 +1 @@ +14 \ No newline at end of file diff --git a/index.html b/index.html index 5b11157..0e7e986 100644 --- a/index.html +++ b/index.html @@ -1,34 +1,532 @@ + + - - literate raytracer - - - - -
- an open source project by tom macwright -
-
- -
- - - - + } + + lambertAmount = Math.min(1, lambertAmount); + + + + +
  • +
    + +
    + +
    +

    Ambient colors shine bright regardless of whether there's a light visible - +a circle with a totally ambient blue color will always just be a flat blue +circle.

    + +
    + + 
        return Vector.add3(c,
+        Vector.scale(b, lambertCoefficient * lambertAmount),
+        Vector.scale(b, ambient));
+}
    + +
    • + + + + + + diff --git a/raytracer.js b/index.js similarity index 82% rename from raytracer.js rename to index.js index 2127825..a88dedc 100644 --- a/raytracer.js +++ b/index.js @@ -3,22 +3,55 @@ var c = document.getElementById('c'), width = 640, height = 480; -c.width = width; -c.height = height; - // Get a context in order to generate a proper data array. We aren't going to // use traditional Canvas drawing functions like `fillRect` - instead this // raytracer will directly compute pixel data and then put it into an image. +c.width = width; +c.height = height; var ctx = c.getContext('2d'), data = ctx.getImageData(0, 0, width, height); -// # Lights +// # The Scene +// +// We need to define three different kinds of things in 3D space: +// a **camera** from which we cast rays into the scene, **objects** +// that can be hit by those rays and are drawn into the scene, and +// **lights** that change the color of rays, by extension coloring objects. +// +// In this case, we define these objects as simple objects with vectors +// defined as `{x, y, z}` objects. + +// ## The Camera +// +// Our camera is pretty simple: it's a point in space, where you can imagine +// that the camera 'sits', a `fieldOfView`, which is the angle from the right +// to the left side of its frame, and a `vector` which determines what +// angle it points in. +var camera = { + point: { + x: 0, + y: 1.8, + z: 10 + }, + fieldOfView: 45, + vector: { + x: 0, + y: 3, + z: 0 + } +}; + +// ## Lights // // Lights are defined only as points in space - surfaces that have lambert // shading will be affected by any visible lights. -var lights = [{ x: -30, y: -10, z: 20 }]; +var lights = [{ + x: -30, + y: -10, + z: 20 +}]; -// # Objects +// ## Objects // // This raytracer handles sphere objects, with any color, position, radius, // and surface properties. @@ -38,25 +71,6 @@ var objects = [{ radius: 3 }]; -// # The Camera -// -// Our camera is pretty simple: it's a point in space, where you can imagine -// that the camera 'sits', a `fieldOfView`, which is the angle from the right -// to the left side of its frame, and a `vector` which determines what -// angle it points in. -var camera = { - point: { - x: 0, - y: 1.8, - z: 10 - }, - fieldOfView: 45, - vector: { - x: 0, - y: 3, - z: 0 - } -}; // # Throwing Rays // @@ -107,11 +121,12 @@ ctx.putImageData(data, 0, 0); // ## Sphere Intersection // +// ![](../graphics/sphereintersection.png) +// // Spheres are one of the simplest objects for rays to interact with, since // the geometrical math for finding intersections and reflections with them // is pretty straightforward. function sphereIntersection(sphere, ray) { - var eye_to_center = Vector.subtract(sphere.point, ray.point), // the length of a // hypoteneuse of a right triangle with points @@ -120,7 +135,6 @@ function sphereIntersection(sphere, ray) { v = Vector.dotProduct(eye_to_center, ray.vector), eoDot = Vector.dotProduct(eye_to_center, eye_to_center), discriminant = (sphere.radius * sphere.radius) - eoDot + (v * v); - if (discriminant < 0) { return; } else { @@ -128,6 +142,10 @@ function sphereIntersection(sphere, ray) { } } +// A normal is, at each point on the surface of a sphere or some other object, +// a vector that's perpendicular to the surface and radiates outward. We need +// to know this so that we can calculate the way that a ray reflects off of +// a sphere. function sphereNormal(sphere, pos) { return Vector.unitVector( Vector.subtract(pos, sphere.point)); @@ -165,6 +183,8 @@ function trace(ray, depth) { var distObject = intersectScene(ray); + // If we don't hit anything, fill this pixel with the background color - + // in this case, white. if (distObject[0] === Infinity) { return Vector.WHITE; } @@ -189,20 +209,6 @@ function isLightVisible(pt, light) { // The `trace()` function has figured out that something is hit by an ray, // and we're going to figure out what surface that thing has - what color // it'll send back to the camera. -// -// Objects have different sorts of surfaces: -// -// **Ambient** colors shine bright regardless of whether there's a light visible - -// a circle with a totally ambient blue color will always just be a flat blue -// circle. -// -// **[Lambert shading](http://en.wikipedia.org/wiki/Lambertian_reflectance)** -// is our pretty shading, which shows gradations from the most lit point on -// the object to the least. -// -// **[Specular](https://en.wikipedia.org/wiki/Specular_reflection)** is a fancy word for 'reflective': rays that hit objects -// with specular surfaces bounce off and acquire the colors of other objects -// they bounce into. function surface(ray, object, pointAtTime, normal, depth) { var b = object.color, c = Vector.ZERO, @@ -211,6 +217,9 @@ function surface(ray, object, pointAtTime, normal, depth) { ambient = Math.max(1 - reflectance - lambertCoefficient, 0), lambertAmount = 0; + // **[Lambert shading](http://en.wikipedia.org/wiki/Lambertian_reflectance)** + // is our pretty shading, which shows gradations from the most lit point on + // the object to the least. for (var i = 0; i < lights.length; i++) { var lightPoint = lights[0]; if (!isLightVisible(pointAtTime, lightPoint)) continue; @@ -219,6 +228,9 @@ function surface(ray, object, pointAtTime, normal, depth) { if (contribution > 0) lambertAmount += contribution; } + // **[Specular](https://en.wikipedia.org/wiki/Specular_reflection)** is a fancy word for 'reflective': rays that hit objects + // with specular surfaces bounce off and acquire the colors of other objects + // they bounce into. if (object.specular) { var reflectedRay = { point: pointAtTime, @@ -232,6 +244,9 @@ function surface(ray, object, pointAtTime, normal, depth) { lambertAmount = Math.min(1, lambertAmount); + // **Ambient** colors shine bright regardless of whether there's a light visible - + // a circle with a totally ambient blue color will always just be a flat blue + // circle. return Vector.add3(c, Vector.scale(b, lambertCoefficient * lambertAmount), Vector.scale(b, ambient)); diff --git a/package.json b/package.json index f50fb60..205bf0b 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "description": "a literate raytracer implementation", "main": "raytracer.js", "scripts": { - "doc": "docco --css=custom.css *.js" + "doc": "docco -t custom.jst --css=custom.css *.js --output=./" }, "keywords": [ "raytracer", diff --git a/docs/raytracer.html b/raytracer.html similarity index 92% rename from docs/raytracer.html rename to raytracer.html index 4ad3bb8..a1a4dff 100644 --- a/docs/raytracer.html +++ b/raytracer.html @@ -9,6 +9,10 @@
    +
    + an open source project by tom macwright +
    +
      @@ -48,10 +52,7 @@

      Setup

      var c = document.getElementById('c'),
     width = 640,
-    height = 480;
-
-c.width = width;
-c.height = height;
      + height = 480;
    @@ -68,7 +69,9 @@

    Setup

    - 
    var ctx = c.getContext('2d'),
+            
    c.width = width;
+c.height = height;
+var ctx = c.getContext('2d'),
     data = ctx.getImageData(0, 0, width, height);
    
             
         
@@ -80,13 +83,34 @@ 
    Setup
    
               
    
                 
               
    
-              
    Lights
    
-
    Lights are defined only as points in space - surfaces that have lambert
-shading will be affected by any visible lights.
    
+              
    The Scene
    
+
    We need to define three different kinds of things in 3D space:
+a camera from which we cast rays into the scene, objects
+that can be hit by those rays and are drawn into the scene, and
+lights that change the color of rays, by extension coloring objects.
    
+
    In this case, we define these objects as simple objects with vectors
+defined as {x, y, z} objects.
    
+
    The Camera
    
+
    Our camera is pretty simple: it's a point in space, where you can imagine
+that the camera 'sits', a fieldOfView, which is the angle from the right
+to the left side of its frame, and a vector which determines what
+angle it points in.
    - 
    var lights = [{ x: -30, y: -10, z: 20 }];
    + 
    var camera = {
+    point: {
+        x: 0,
+        y: 1.8,
+        z: 10
+    },
+    fieldOfView: 45,
+    vector: {
+        x: 0,
+        y: 3,
+        z: 0
+    }
+};
    @@ -94,10 +118,31 @@

    Lights

  • -
    +
    -

    Objects

    +

    Lights

    +

    Lights are defined only as points in space - surfaces that have lambert +shading will be affected by any visible lights.

    + +
    + + 
    var lights = [{
+    x: -30,
+    y: -10,
+    z: 20
+}];
    + +
    • + + +
  • +
    + +
    + +
    +

    Objects

    This raytracer handles sphere objects, with any color, position, radius, and surface properties.

    @@ -122,37 +167,6 @@

    Objects

    • -
  • -
    - -
    - -
    -

    The Camera

    -

    Our camera is pretty simple: it's a point in space, where you can imagine -that the camera 'sits', a fieldOfView, which is the angle from the right -to the left side of its frame, and a vector which determines what -angle it points in.

    - -
    - - 
    var camera = {
-    point: {
-        x: 0,
-        y: 1.8,
-        z: 10
-    },
-    fieldOfView: 45,
-    vector: {
-        x: 0,
-        y: 3,
-        z: 0
-    }
-};
    - -
    • - -
  • @@ -229,6 +243,7 @@

    Throwing Rays

    Sphere Intersection

    +

    Spheres are one of the simplest objects for rays to interact with, since the geometrical math for finding intersections and reflections with them is pretty straightforward.

    @@ -236,7 +251,6 @@

    Sphere Intersection

    • function sphereIntersection(sphere, ray) {
-
     var eye_to_center = Vector.subtract(sphere.point, ray.point),
    @@ -258,7 +272,6 @@

    Sphere Intersection

            v = Vector.dotProduct(eye_to_center, ray.vector),
         eoDot = Vector.dotProduct(eye_to_center, eye_to_center),
         discriminant = (sphere.radius * sphere.radius) - eoDot + (v * v);
-
     if (discriminant < 0) {
         return;
     } else {
@@ -448,5 +461,7 @@ 
    Surface
    + + diff --git a/docs/vector.html b/vector.html similarity index 96% rename from docs/vector.html rename to vector.html index 2d3b50e..7eeae25 100644 --- a/docs/vector.html +++ b/vector.html @@ -9,6 +9,10 @@ + +