initial commit

assets/css/reset.css

@@ -0,0 +1,141 @@
+/*
+	HTML5 Reset :: style.css
+	----------------------------------------------------------
+	We have learned much from/been inspired by/taken code where offered from:
+
+	Eric Meyer					:: http://meyerweb.com
+	HTML5 Doctor				:: http://html5doctor.com
+	and the HTML5 Boilerplate	:: http://html5boilerplate.com
+
+-------------------------------------------------------------------------------*/
+
+/* Let's default this puppy out
+-------------------------------------------------------------------------------*/
+
+html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font-weight: normal;
+	vertical-align: baseline;
+	background: transparent;
+}
+
+article, aside, figure, footer, header, nav, section, details, summary {display: block;}
+
+/* Handle box-sizing while better addressing child elements:
+   http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
+html {
+	box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+	box-sizing: inherit;
+}
+
+/* consider resetting the default cursor: https://gist.github.com/murtaugh/5247154 */
+
+/* Responsive images and other embedded objects */
+/* if you don't have full control over `img` tags (if you have to overcome attributes), consider adding height: auto */
+img,
+object,
+embed {max-width: 100%;}
+
+/*
+   Note: keeping IMG here will cause problems if you're using foreground images as sprites.
+	In fact, it *will* cause problems with Google Maps' controls at small size.
+	If this is the case for you, try uncommenting the following:
+
+#map img {
+		max-width: none;
+}
+*/
+
+/* force a vertical scrollbar to prevent a jumpy page */
+html {overflow-y: scroll;}
+
+/* we use a lot of ULs that aren't bulleted.
+	you'll have to restore the bullets within content,
+	which is fine because they're probably customized anyway */
+ul {list-style: none;}
+
+blockquote, q {quotes: none;}
+
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {content: ''; content: none;}
+
+a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;}
+
+del {text-decoration: line-through;}
+
+abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}
+
+/* tables still need cellspacing="0" in the markup */
+table {border-collapse: separate; border-spacing: 0;}
+th {font-weight: bold; vertical-align: bottom;}
+td {font-weight: normal; vertical-align: top;}
+
+hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;}
+
+input, select {vertical-align: middle;}
+
+pre {
+    white-space: pre; /* CSS2 */
+    white-space: pre-wrap; /* CSS 2.1 */
+    white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
+    word-wrap: break-word; /* IE */
+}
+
+input[type="radio"] {vertical-align: text-bottom;}
+input[type="checkbox"] {vertical-align: bottom;}
+.ie7 input[type="checkbox"] {vertical-align: baseline;}
+.ie6 input {vertical-align: text-bottom;}
+
+select, input, textarea {font: 99% sans-serif;}
+
+table {font-size: inherit; font: 100%;}
+
+small {font-size: 85%;}
+
+strong {font-weight: bold;}
+
+td, td img {vertical-align: top;}
+
+/* Make sure sup and sub don't mess with your line-heights http://gist.github.com/413930 */
+sub, sup {font-size: 75%; line-height: 0; position: relative;}
+sup {top: -0.5em;}
+sub {bottom: -0.25em;}
+
+/* standardize any monospaced elements */
+pre, code, kbd, samp {font-family: monospace, sans-serif;}
+
+/* hand cursor on clickable elements */
+.clickable,
+label,
+input[type=button],
+input[type=submit],
+input[type=file],
+button {cursor: pointer;}
+
+/* Webkit browsers add a 2px margin outside the chrome of form elements */
+button, input, select, textarea {margin: 0;}
+
+/* make buttons play nice in IE */
+button,
+input[type=button] {width: auto; overflow: visible;}
+
+/* scale images in IE7 more attractively */
+.ie7 img {-ms-interpolation-mode: bicubic;}
+
+/* prevent BG image flicker upon hover
+   (commented out as usage is rare, and the filter syntax messes with some pre-processors)
+.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}
+*/
+
+/* let's clear some floats */
+.clearfix:after { content: " "; display: block; clear: both; }

assets/css/style.css

@@ -0,0 +1,102 @@
+/* A Linux- and Windows-friendly sans-serif font stack: http://prospects.mhurrell.co.uk/post/updating-the-helvetica-font-stack */
+body {font: 13px Helmet, Freesans, sans-serif;}
+
+/* Using local fonts? Check out Font Squirrel's webfont generator: http://www.fontsquirrel.com/tools/webfont-generator */
+
+/* We like off-black for text. */
+body, select, input, textarea {color: #333;}
+
+a {color: #03f;}
+a:hover {color: #69f;}
+
+/* Custom text-selection colors (remove any text shadows: http://twitter.com/miketaylr/status/12228805301) */
+::-moz-selection{background: #fcd700; color: #fff; text-shadow: none;}
+::selection {background: #fcd700; color: #fff; text-shadow: none;}
+
+/*	j.mp/webkit-tap-highlight-color */
+a:link {-webkit-tap-highlight-color: #fcd700;}
+
+ins {background-color: #fcd700; color: #000; text-decoration: none;}
+mark {background-color: #fcd700; color: #000; font-style: italic; font-weight: bold;}
+
+/* Mozilla dosen't style placeholders by default */
+input:-moz-placeholder { color:#a9a9a9; }
+textarea:-moz-placeholder { color:#a9a9a9; }
+
+/* let's give blockquotes *some* default styling, because unstyled blockquotes are dangerous */
+blockquote {padding: 16px; background: #eee;}
+
+h1, h2 {
+    font-size: 1.3em;
+    margin-bottom: 20px;
+}
+
+img, canvas {
+    margin: 0 20px 20px 0;
+    border: 1px solid #ccc;
+    position: relative;
+    display: inline-block;
+}
+
+.imglabel {
+    display: block;
+    position: relative;
+}
+.imglabel span {
+    position: absolute;
+    bottom: 24px;
+    left: 1px;
+    background-color: rgba(40,40,40,0.4);
+    color: white;
+    padding: 2px 6px;
+}
+
+.wrapper {
+    padding: 20px;
+}
+
+#canvas {
+    display: none;
+}
+img {
+    zoom: 50%;
+    width: 1402px;
+    height: auto;
+    max-width: 100%;
+    min-height: 100px;
+}
+
+.textureselect, .calcgrading {
+    display: inline-block;
+    color: white;
+    background-color: #666;
+    border-radius: 4px;
+    padding: 6px 14px;
+    text-decoration: none;
+    margin-right: 8px;
+    margin-bottom: 8px;
+    font-size: 1.1em;
+}
+.textureselect:hover, .textureselect.active, .calcgrading:hover {
+    background-color: #999;
+    color: white;
+}
+
+
+/* Media queries
+-------------------------------------------------------------------------------*/
+
+@media screen and (max-width: 480px) {
+
+
+}
+
+
+
+/* Print styles
+-------------------------------------------------------------------------------*/
+@media print {
+
+
+
+}

assets/js/functions.js

@@ -0,0 +1,205 @@
+function initPage(){
+	
+    var canvas = document.getElementById('canvas');
+    var context = canvas.getContext('2d');
+	
+	var surface = new Image();
+    var source = new Image();
+    var shadow = new Image();
+    var spec = new Image();
+    
+    var result = context.getImageData(0, 0, canvas.width, canvas.height);
+    
+    surface.onload = function() {
+        source.onload = function() {
+            shadow.onload = function() {
+                spec.onload = function() {
+                    makeImage(context, surface, source, shadow, spec);
+                }
+                spec.src = 'specular0000.jpg';
+            }
+            shadow.src = 'shadows0000.jpg';
+        }
+        source.src = 'source1.png';
+    };
+    surface.src = 'surface0000.png';
+    
+    var imageLoader = document.getElementById('imageLoader');
+    imageLoader.addEventListener('change', handleImage, false);
+    
+    function handleImage(e){
+        var reader = new FileReader();
+        reader.onload = function(event){
+            var img = new Image();
+            img.onload = function(){
+                makeImage(context, surface, img, shadow, spec);
+            }
+            img.src = event.target.result;
+        }
+        reader.readAsDataURL(e.target.files[0]);     
+    }
+    
+    function drawImageScaled(img, context, keepaspect) {
+        var canvas = context.canvas;
+        context.clearRect(0, 0, canvas.width, canvas.height);
+        context.fillStyle = "#ffffff";
+        context.fillRect(0, 0, canvas.width, canvas.height);
+        if (keepaspect) {
+            var hRatio = canvas.width / img.width;
+            var vRatio = canvas.height / img.height;
+            var ratio = Math.min(hRatio, vRatio);
+            var centerShift_x = (canvas.width - img.width*ratio) / 2;
+            var centerShift_y = (canvas.height - img.height*ratio) / 2;
+            context.drawImage(img, 0, 0, img.width, img.height, centerShift_x, centerShift_y, img.width*ratio, img.height*ratio);
+        } else {
+            context.drawImage(img, 0, 0, canvas.width, canvas.height);
+        }
+    }
+    
+    function applyColorGrading(context, colorLUTObj) {
+        var canvas = context.canvas;
+        
+        var lut = {};
+        lut.width = 4096;
+        lut.height = 4096;
+        
+        var img = context.getImageData(0, 0, canvas.width, canvas.height);
+        var imgdata = img.data;
+        
+        canvas.width = lut.width;
+        canvas.height = lut.height;
+        drawImageScaled(colorLUTObj, context);
+        var color = context.getImageData(0, 0, canvas.width, canvas.height);
+        var colordata = color.data;
+        
+        canvas.width = img.width;
+        canvas.height = img.height;
+        
+        for(var i = 0; i < imgdata.length; i += 4) {
+            var pixelcoords = pixelcoordsFromLUT(imgdata[i], imgdata[i+1], imgdata[i+2], lut.width);
+            var pixelpos = (pixelcoords.x+(pixelcoords.y*lut.width))*4;
+            imgdata[i] = colordata[pixelpos];
+            imgdata[i+1] = colordata[pixelpos+1];
+            imgdata[i+2] = colordata[pixelpos+2];
+        }
+        
+        context.putImageData(img, 0, 0);
+    }
+    
+    function pixelcoordsFromLUT(r, g, b, lutsize) {
+        var square = {};
+        square.width = square.height = lutsize/16;
+        var pixelpos = {};
+        pixelpos.x = ((r/256)*square.width)+((b*square.width)%lutsize);
+        pixelpos.y = (255-((g/256))*square.height)+(Math.floor(b/(lutsize/square.height))*square.height);
+        return pixelpos;
+    }
+    
+    function makeImage(context, surfaceObj, imageObj, shadowObj, specObj) {
+        var canvas = context.canvas;
+        
+        var lut = {};
+        lut.width = 4096;
+        lut.height = 4096;
+        
+        canvas.width = shadowObj.width;
+        canvas.height = shadowObj.height;
+        context.drawImage(shadowObj, 0, 0);
+        var shadow = context.getImageData(0, 0, canvas.width, canvas.height);
+        var shadowdata = shadow.data;
+        
+        canvas.width = specObj.width;
+        canvas.height = specObj.height;
+        context.drawImage(specObj, 0, 0);
+        var specular = context.getImageData(0, 0, canvas.width, canvas.height);
+        var speculardata = specular.data;
+        
+        canvas.width = lut.width;
+        canvas.height = lut.height;
+        drawImageScaled(imageObj, context);
+        var image = context.getImageData(0, 0, canvas.width, canvas.height);
+        var imagedata = image.data;
+        
+        canvas.width = surfaceObj.width;
+        canvas.height = surfaceObj.height;
+        drawImageScaled(surfaceObj, context);
+        var surface = context.getImageData(0, 0, canvas.width, canvas.height);
+        var surfacedata = surface.data;
+        
+        result = context.getImageData(0, 0, canvas.width, canvas.height);
+        var resultdata = result.data;
+
+        for(var i = 0; i < surfacedata.length; i += 4) {
+            resultdata[i] = 255;
+            resultdata[i+1] = 255;
+            resultdata[i+2] = 255;
+            
+            if (surfacedata[i]+surfacedata[i+1]+surfacedata[i+2] > 0 && surfacedata[i]+surfacedata[i+1]+surfacedata[i+2]<(3*255)) {
+                var pixelcoords = pixelcoordsFromLUT(surfacedata[i], surfacedata[i+1], surfacedata[i+2], lut.width);
+                var pixelpos = (pixelcoords.x+(pixelcoords.y*lut.width))*4;
+                resultdata[i] = imagedata[pixelpos];
+                resultdata[i+1] = imagedata[pixelpos+1];
+                resultdata[i+2] = imagedata[pixelpos+2];
+            }
+            
+            resultdata[i] -= 255-shadowdata[i];
+            resultdata[i+1] -= 255-shadowdata[i+1];
+            resultdata[i+2] -= 255-shadowdata[i+2];
+            
+            resultdata[i] += speculardata[i];
+            resultdata[i+1] += speculardata[i+1];
+            resultdata[i+2] += speculardata[i+2];
+            
+            var imagenoise = Math.round(Math.random()*5);
+            
+            resultdata[i] += imagenoise;
+            resultdata[i+1] += imagenoise;
+            resultdata[i+2] += imagenoise;
+        }
+        
+        context.putImageData(result, 0, 0);
+        $('#result, #result2, #result3, #result4').attr('src', canvas.toDataURL());
+    }
+    
+    $('img').wrap('<span class="imglabel"></span>');
+    $('.imglabel').each(function() {
+        $(this).append('<span>'+$(this).find('img').attr('id')+'</span>');
+    });
+    
+    $('.textureselect').click(function(e) {
+        e.preventDefault();
+        $('.textureselect').removeClass('active');
+        $(this).addClass('active');
+        var img = new Image();
+        img.onload = function(){
+            makeImage(context, surface, img, shadow, spec);
+        }
+        img.src = $(this).attr('href');
+    });
+    
+    $('.calcgrading').click(function(e) {
+        e.preventDefault();
+        var color = new Image();
+        var color2 = new Image();
+        var color3 = new Image();
+        color.onload = function() {
+            context.putImageData(result, 0, 0);
+            applyColorGrading(context, color);
+            $('#result2').attr('src', canvas.toDataURL());
+        }
+        color.src = 'colors0000.png';
+        color2.onload = function() {
+            context.putImageData(result, 0, 0);
+            applyColorGrading(context, color2);
+            $('#result3').attr('src', canvas.toDataURL());
+        }
+        color2.src = 'colors0001.png';
+        color3.onload = function() {
+            context.putImageData(result, 0, 0);
+            applyColorGrading(context, color3);
+            $('#result4').attr('src', canvas.toDataURL());
+        }
+        color3.src = 'colors0002.png';
+    });
+
+};

index.html

@@ -0,0 +1,53 @@
+<!doctype html>
+
+<!--[if lt IE 7 ]> <html class="ie ie6 ie-lt10 ie-lt9 ie-lt8 ie-lt7 no-js" lang="en"> <![endif]-->
+<!--[if IE 7 ]>    <html class="ie ie7 ie-lt10 ie-lt9 ie-lt8 no-js" lang="en"> <![endif]-->
+<!--[if IE 8 ]>    <html class="ie ie8 ie-lt10 ie-lt9 no-js" lang="en"> <![endif]-->
+<!--[if IE 9 ]>    <html class="ie ie9 ie-lt10 no-js" lang="en"> <![endif]-->
+<!--[if gt IE 9]><!--><html class="no-js" lang="en"><!--<![endif]-->
+
+<head>
+
+	<meta charset="utf-8">
+
+	<!--
+		HTML5 Reset: https://github.com/murtaugh/HTML5-Reset
+		Free to use
+	-->
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+
+	<title>LUT image transform proof of concept</title>
+	<meta name="author" content="Peter Marquardt" />
+	<meta name="description" content="Proof of concept" />
+
+	<meta name="Copyright" content="Peter Marquardt" />
+
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+
+	<link rel="stylesheet" href="assets/css/reset.css" />
+	<link rel="stylesheet" href="assets/css/style.css" />
+
+</head>
+
+<body>
+
+<div class="wrapper">
+    <h1>In-Browser texturing of precalculated 3D geometry and color grading demo</h1>
+    <canvas id="canvas" width="256" height="256"></canvas><img id="result" /><br />
+    <h2>texture select</h2>
+    <a class="textureselect active" href="source1.png">test pattern</a> <a class="textureselect" href="source2.jpg">floral</a> <a class="textureselect" href="source3.png">wood</a> <a class="textureselect" href="source4.jpg">abstract</a> <a class="textureselect" href="source5.jpg">visualization</a> <a class="textureselect" href="source6.jpg">product</a><br /><br />
+    <h2>bring your own texture</h2>
+    <label>Texture: <input type="file" id="imageLoader" name="imageLoader"/></label><br /><br />
+    <h2>parts used (precalculated using 3D software)</h2>
+    <img src="shadows0000.jpg" id="shadows" /><img src="specular0000.jpg" id="specular" /><img src="surface0000.png" id="surface map" /><br />
+    <h2>color grading tests</h2>
+    <a class="calcgrading" href="#">apply color grading</a><br /><br />
+    <img id="result2" /><img id="result3" /><img id="result4" />
+</div>
+
+<script src="assets/js/libs/jquery-1.11.3.min.js"></script>
+<script src="assets/js/functions.js"></script>
+<script>$(document).ready(initPage);</script>
+
+</body>
+</html>

source/makelut.html

@@ -0,0 +1,79 @@
+<!doctype html>
+
+<!--[if lt IE 7 ]> <html class="ie ie6 ie-lt10 ie-lt9 ie-lt8 ie-lt7 no-js" lang="en"> <![endif]-->
+<!--[if IE 7 ]>    <html class="ie ie7 ie-lt10 ie-lt9 ie-lt8 no-js" lang="en"> <![endif]-->
+<!--[if IE 8 ]>    <html class="ie ie8 ie-lt10 ie-lt9 no-js" lang="en"> <![endif]-->
+<!--[if IE 9 ]>    <html class="ie ie9 ie-lt10 no-js" lang="en"> <![endif]-->
+<!--[if gt IE 9]><!--><html class="no-js" lang="en"><!--<![endif]-->
+
+<head>
+
+	<meta charset="utf-8">
+
+	<!--
+		HTML5 Reset: https://github.com/murtaugh/HTML5-Reset
+		Free to use
+	-->
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+
+	<title>LUT image transform proof of concept</title>
+	<meta name="author" content="Peter Marquardt" />
+	<meta name="description" content="Proof of concept" />
+
+	<meta name="Copyright" content="Peter Marquardt" />
+
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+
+	<link rel="stylesheet" href="assets/css/reset.css" />
+	<link rel="stylesheet" href="assets/css/style.css" />
+
+</head>
+
+<body>
+
+<div class="wrapper">
+    <img id="LUT"><canvas id="result" width="4096" height="4096"></canvas><br />
+</div>
+
+<script src="assets/js/libs/jquery-1.11.3.min.js"></script>
+<script>
+function initPage(){
+        
+    var canvas = document.getElementById('result');
+    var context = canvas.getContext('2d');
+    
+    var lutsegment = context.getImageData(0, 0, 256, 256);
+    var lutsegmentdata = lutsegment.data;
+    
+    for (r = 0; r < 256; r += 1) {
+        for (g = 0; g < 256; g += 1) {
+            var lutx = r;
+            var luty = 256 - g - 1;
+            lutsegmentdata[(lutx + luty * 256)*4    ] = 255 * r / 255;
+            lutsegmentdata[(lutx + luty * 256)*4 + 1] = 255 * g / 255;
+            lutsegmentdata[(lutx + luty * 256)*4 + 2] = 0;
+            lutsegmentdata[(lutx + luty * 256)*4 + 3] = 255; // Alpha Channel
+        }
+    }
+    
+    for (b = 0; b < 256; b += 1) {
+        for(i=0; i < lutsegmentdata.length; i += 4) {
+            lutsegmentdata[i+2] = b;
+        }
+        context.putImageData(lutsegment, (b*256)%4096, Math.floor(b/16)*256);
+    }
+    
+    $('#LUT').attr('src', canvas.toDataURL());
+    
+    
+    $('img, canvas').wrap('<span class="imglabel"></span>');
+    $('.imglabel').each(function() {
+    $(this).append('<span>'+$(this).find('img, canvas').attr('id')+'</span>');
+    });
+
+};
+</script>
+<script>$(document).ready(initPage);</script>
+
+</body>
+</html>

source/makewfmap.html

@@ -0,0 +1,219 @@
+<!doctype html>
+
+<!--[if lt IE 7 ]> <html class="ie ie6 ie-lt10 ie-lt9 ie-lt8 ie-lt7 no-js" lang="en"> <![endif]-->
+<!--[if IE 7 ]>    <html class="ie ie7 ie-lt10 ie-lt9 ie-lt8 no-js" lang="en"> <![endif]-->
+<!--[if IE 8 ]>    <html class="ie ie8 ie-lt10 ie-lt9 no-js" lang="en"> <![endif]-->
+<!--[if IE 9 ]>    <html class="ie ie9 ie-lt10 no-js" lang="en"> <![endif]-->
+<!--[if gt IE 9]><!--><html class="no-js" lang="en"><!--<![endif]-->
+
+<head>
+
+	<meta charset="utf-8">
+
+	<!--
+		HTML5 Reset: https://github.com/murtaugh/HTML5-Reset
+		Free to use
+	-->
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+
+	<title>LUT image transform proof of concept</title>
+	<meta name="author" content="Peter Marquardt" />
+	<meta name="description" content="Proof of concept" />
+
+	<meta name="Copyright" content="Peter Marquardt" />
+
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+
+	<link rel="stylesheet" href="assets/css/reset.css" />
+	
+	<style>
+    	img {
+        	border: 1px solid orange;
+    	}
+    	canvas {
+        	display: none;
+    	}
+    	pre {
+        	border: 1px solid green;
+    	}
+	</style>
+
+</head>
+
+<body>
+
+<div class="wrapper">
+    <img id="surf" />
+    <img id="shad" />
+    <img id="spec" />
+    <canvas id="result" width="1" height="1"></canvas>
+    <pre id="surfpre"></pre>
+    <pre id="shadpre"></pre>
+    <pre id="specpre"></pre>
+</div>
+
+<script src="assets/js/libs/jquery-1.11.3.min.js"></script>
+<script>
+function initPage(){
+        
+    var canvas = document.getElementById('result');
+    var context = canvas.getContext('2d');
+    
+    var surface = new Image();
+    var shadow = new Image();
+    var spec = new Image();
+    
+    surface.onload = function() {
+        shadow.onload = function() {
+            spec.onload = function() {
+                makeMaps(context, surface , shadow, spec);
+            }
+            spec.src = 'wfspec.png';
+        }
+        shadow.src = 'wfshad.png';
+    };
+    surface.src = 'wfsurf.png';
+    
+    function dec2bin(dec){
+        return (dec >>> 0).toString(2);
+    }
+    
+    function makeMaps(context, surfaceObj, shadowObj, specObj) {
+        var canvas = context.canvas;
+        
+        var lut = {};
+        lut.width = 256;
+        lut.height = 256;
+        
+        canvas.width = shadowObj.width;
+        canvas.height = shadowObj.height;
+        context.drawImage(shadowObj, 0, 0);
+        var shadow = context.getImageData(0, 0, canvas.width, canvas.height);
+        var shadowdata = shadow.data;
+        $('#shad').attr('src', canvas.toDataURL());
+        
+        var bitcount = 0;
+        var resulttext = "// black and white image data wrapped in bitmaps<br />";
+        resulttext += "static uint8_t donutshadow[] = {<br />"
+        for(var i = 0; i < shadowdata.length; i += 4) {
+            if (i%(4*8) == 0) {
+                resulttext += "0b";
+                bitcount++;
+            }
+            if (shadowdata[i]<127) {
+                resulttext += 1;
+            } else {
+                resulttext += 0;
+            }
+            if (i%(4*8) == (4*7)) {
+                resulttext += ",";
+            }
+            if ((i-(4*8))%(4*8*12) == (4*8*12)-(4*9)) {
+                resulttext += "<br />";
+            }
+        }
+        while(i%(4*8) != 0) {
+            resulttext += "0";
+            i += 4;
+        }
+        resulttext += ",<br/>};";
+        $('#shadpre').html('// '+Math.ceil(bitcount/8)+' bytes<br />'+resulttext);
+        
+        bitcount = 0;
+        canvas.width = specObj.width;
+        canvas.height = specObj.height;
+        context.drawImage(specObj, 0, 0);
+        var specular = context.getImageData(0, 0, canvas.width, canvas.height);
+        var speculardata = specular.data;
+        $('#spec').attr('src', canvas.toDataURL());
+        
+        resulttext = "// black and white image data wrapped in bitmaps<br />";
+        resulttext += "static uint8_t donutspecular[] = {<br />";
+        for(var i = 0; i < speculardata.length; i += 4) {
+            if (i%(4*8) == 0) {
+                resulttext += "0b";
+                bitcount++;
+            }
+            if (speculardata[i]>127) {
+                resulttext += 1;
+            } else {
+                resulttext += 0;
+            }
+            if (i%(4*8) == (4*7)) {
+                resulttext += ",";
+            }
+            if ((i-(4*8))%(4*8*12) == (4*8*12)-(4*9)) {
+                resulttext += "<br />";
+            }
+        }
+        while(i%(4*8) != 0) {
+            resulttext += "0";
+            i += 4;
+        }
+        resulttext += ",<br/>};";
+        $('#specpre').html('// '+Math.ceil(bitcount/8)+' bytes<br />'+resulttext);
+        
+        bitcount = 0;
+        canvas.width = surfaceObj.width;
+        canvas.height = surfaceObj.height;
+        context.drawImage(surfaceObj, 0, 0);
+        var surface = context.getImageData(0, 0, canvas.width, canvas.height);
+        var surfacedata = surface.data;
+        $('#surf').attr('src', canvas.toDataURL());
+        
+        var resultarray = new Array();
+        var counter = 0;
+        resulttext = "// heptets wrapped in octets like 0b00000007,0b11111117,0b22222227,0b33333337,0b44444447,0b55555557,0b66666667<br />";
+        resulttext += "static uint8_t donutsurfacemap[] = {<br/>";
+        for(var i = 0; i < surfacedata.length; i += 4) {
+            counter++;
+            if (surfacedata[i+2] > 0) {
+                resultarray.push("0000000");
+            } else {
+                var str = dec2bin(Math.floor(surfacedata[i+1]/2));
+                var padded = Array(8-str.length).join('0')+str;
+                resultarray.push(padded);
+            }
+            if (counter%7 == 0) {
+                if (surfacedata[i+2] > 0) {
+                    resultarray[0] += "0";
+                    resultarray[1] += "0";
+                    resultarray[2] += "0";
+                    resultarray[3] += "0";
+                    resultarray[4] += "0";
+                    resultarray[5] += "0";
+                    resultarray[6] += "0";
+                } else {
+                    var str = dec2bin(Math.floor(surfacedata[i+1]/2));
+                    var padded = Array(8-str.length).join('0')+str;
+                    resultarray[0] += padded[0];
+                    resultarray[1] += padded[1];
+                    resultarray[2] += padded[2];
+                    resultarray[3] += padded[3];
+                    resultarray[4] += padded[4];
+                    resultarray[5] += padded[5];
+                    resultarray[6] += padded[6];
+                }
+                resulttext += "0b";
+                resulttext += resultarray.join(',0b');
+                resultarray = new Array();
+                resulttext += ",<br />";
+                bitcount += 7*8;
+            }
+        }
+        if (resultarray.length > 0) {
+            for (var i = 0; i < resultarray.length; i++) {
+                resulttext += "0b"+resultarray[i]+"0,";
+                bitcount += 8;
+            }
+        }
+        resulttext += "<br />};";
+        $('#surfpre').html('// '+Math.ceil(bitcount/8)+' bytes<br />'+resulttext);
+    }
+
+};
+</script>
+<script>$(document).ready(initPage);</script>
+
+</body>
+</html>