alpha channel support

demo/css/demo.css

@@ -91,4 +91,23 @@ input[type="text"] {
 
 pre {
 	margin: 10px 0 0  0;
-}
+}
+
+#orig, #redu {
+	background-image:
+	-moz-linear-gradient(45deg, #000 25%, transparent 25%),
+	-moz-linear-gradient(-45deg, #000 25%, transparent 25%),
+	-moz-linear-gradient(45deg, transparent 75%, #000 75%),
+	-moz-linear-gradient(-45deg, transparent 75%, #000 75%);
+	background-image:
+	-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #000), color-stop(.25, transparent)),
+	-webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #000), color-stop(.25, transparent)),
+	-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #000)),
+	-webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #000));
+
+	-moz-background-size:20px 20px;
+	background-size:20px 20px;
+	-webkit-background-size:20px 21px; /* override value for shitty webkit */
+
+	background-position:0 0, 10px 0, 10px -10px, 0px 10px;
+}

demo/index.html

@@ -7,7 +7,7 @@
 	<link rel="stylesheet" href="css/demo.css">
 
 	<script src="js/jquery-2.0.3.min.js"></script>
-	<script src="../src/rgbquant.js"></script>
+	<script src="../ts/colorQuant.js"></script>
 	<script src="js/helpers.js"></script>
 	<script src="js/preCode.js"></script>
 	<script src="js/timer.js"></script>
@@ -94,6 +94,43 @@ <h2>RgbQuant.js</h2>
 				<div style="display: inline-block; vertical-align: top; width: 270px;">A single, optimal palette is progressivley generated for a set of images. Each is then reduced using it.</div>
 			</td>
 		</tr>
+		<tr>
+			<th>Alpha</th>
+			<td>
+				<img class="th" src="png/agnes-overjoyed-icon.png">
+				<img class="th" src="png/agnes-sleeping-icon.png">
+				<img class="th" src="png/Angry-Minion-icon.png">
+				<img class="th" src="png/Curious-Minion-Icon.png">
+				<img class="th" src="png/Curious-Minion-Icon-2.png">
+				<img class="th" src="png/Dancing-minion-icon.png">
+				<img class="th" src="png/despicable-me-2-Minion-icon-1.png">
+				<img class="th" src="png/despicable-me-2-Minion-icon-2.png">
+				<img class="th" src="png/despicable-me-2-Minion-icon-3.png">
+				<img class="th" src="png/despicable-me-2-Minion-icon-4.png">
+				<img class="th" src="png/despicable-me-2-Minion-icon-5.png">
+				<img class="th" src="png/despicable-me-2-Minion-icon-6.png">
+				<img class="th" src="png/despicable-me-2-Minion-icon-7.png">
+				<img class="th" src="png/despicable-me-2-Minion-icon-8.png">
+				<img class="th" src="png/Edith-despicable-me-2-icon.png">
+				<img class="th" src="png/evil-minion-icon.png">
+				<img class="th" src="png/evil-minion-icon-2.png">
+				<img class="th" src="png/Evil-Minion-Icon-3.png">
+				<img class="th" src="png/Evil-Minion-Icon-4.png">
+				<img class="th" src="png/girl-minion-icon.png">
+				<img class="th" src="png/gru-icon.png">
+				<img class="th" src="png/gru-icon-2.png">
+				<img class="th" src="png/happy-agnes-icon.png">
+				<img class="th" src="png/Happy-Minion-Icon.png">
+				<img class="th" src="png/kungfu-Minion.png">
+				<img class="th" src="png/Margo-dispicable-me-2-icon.png">
+				<img class="th" src="png/Minion-playing-golf-icon.png">
+				<img class="th" src="png/Minion-reading-icon.png">
+				<img class="th" src="png/Minion icon.png">
+				<img class="th" src="png/Sad-Agnes-Icon.png">
+				<img class="th" src="png/Shy-Minion-icon.png">
+				<img class="th" src="png/superman-minion-icon.png">
+			</td>
+		</tr>
 	<!--<tr>
 			<th>Animation<br>real-time</th>
 			<td></td>
@@ -106,9 +143,9 @@ <h4>Config</h4>
 		<pre id="config" style="padding-left: 5px;">
             var opts = {
                 colors: <input id="colors" type="text" value="256" class="autosize">,
-                minHueCols: <input id="minHueCols" type="text" value="0" class="autosize">,
-                dithKern: <select id="dithKern"><option value=""></option><option value="FloydSteinberg">FloydSteinberg</option><option value="Stucki">Stucki</option><option value="Atkinson">Atkinson</option><option value="Jarvis">Jarvis</option><option value="Burkes">Burkes</option><option value="Sierra">Sierra</option><option value="TwoSierra">TwoSierra</option><option value="SierraLite">SierraLite</option><option value="FalseFloydSteinberg">FalseFloyd</option></select>,
-                <label>dithSerp: <input id="dithSerp" type="checkbox"></label>,
+                <!--minHueCols: <input id="minHueCols" type="text" value="0" class="autosize">,-->
+                dithKern: <select id="dithKern"><option value=""></option><option value="FloydSteinberg">FloydSteinberg</option><option value="Stucki">Stucki</option><option value="Atkinson">Atkinson</option><option value="Jarvis">Jarvis</option><option value="Burkes">Burkes</option><option value="Sierra">Sierra</option><option value="TwoSierra">TwoSierra</option><option value="SierraLite">SierraLite</option><option value="FalseFloydSteinberg">FalseFloyd</option></select>
+                <!--<label>dithSerp: <input id="dithSerp" type="checkbox"></label>,-->
             };
 		</pre>
 		<label class="custom_cfg"><input id="custom_cfg" type="checkbox"> <span>lock config</span></label>
@@ -130,4 +167,4 @@ <h4>Reduced</h4>
 		</div>
 	</div>
 </body>
-</html>
+</html>

demo/js/demo.js

@@ -1,12 +1,9 @@
 var cfg_edited = false;
 
 var dflt_opts = {
-	colors: 256,
+	colors: 1024,
 	method: 2,
-	initColors: 4096,
-	minHueCols: 0,
-	dithKern: null,
-	dithSerp: false,
+	dithKern: "SierraLite"
 };
 
 var cfgs = {
@@ -80,7 +77,8 @@ function process(srcs) {
 	ti.start();
 
 	$.getImgs(srcs, function() {
-		var imgs = arguments;
+		var imgs = [];
+		for(var i = 0, l = arguments.length; i < l; i++) imgs[i] = arguments[i];
 
 		ti.mark("image(s) loaded");
 
@@ -93,32 +91,65 @@ function process(srcs) {
 		});
 
 		var opts = (srcs.length == 1) ? getOpts(baseName(srcs[0])[0]) : dflt_opts,
-			quant = new RgbQuant(opts);
+			quant = new ColorQuantization.RgbQuant(opts),
+			pointBuffers = [];
 
-		$.each(imgs, function() {
-			var img = this, id = baseName(img.src)[0];
+
+		ti.mark("create pointBuffers", function() {
+			imgs.forEach(function (img, index) {
+				pointBuffers[index] = new ColorQuantization.PointBuffer();
+				pointBuffers[index].importHTMLImageElement(img);
+			});
+		});
+
+		imgs.forEach(function (img, index) {
+			var id = baseName(img.src)[0];
 
 			ti.mark("sample '" + id + "'", function(){
-				quant.sample(img);
+				quant.sample(pointBuffers[index]);
 			});
 		});
 
 		var pal8;
 		ti.mark("build palette", function() {
 			pal8 = quant.palette();
+			//pal8 = quant.paletteMedianCut();
 		});
 
-		var pcan = drawPixels(pal8, 16, 128);
+		// TODO: temporary solution. see Palette class todo
+		var uint32Array = pal8._paletteArray.map(function(point) { return point.uint32 });
+		var uint8array = new Uint8Array((new Uint32Array(uint32Array)).buffer);
+
+		var pcan = drawPixels(uint8array, 16, 128);
 
 		$palt.empty().append(pcan);
 
 		$redu.empty();
-		$(imgs).each(function() {
-			var img = this, id = baseName(img.src)[0];
+		imgs.forEach(function (img, index) {
+			var id = baseName(img.src)[0];
 
 			var img8;
 			ti.mark("reduce '" + id + "'", function() {
-				img8 = quant.reduce(img);
+/*
+				pal8 = new ColorQuantization.Palette();
+				pal8._paletteArray.push(ColorQuantization.Point.createByRGBA(10,49,4,255));
+				pal8._paletteArray.push(ColorQuantization.Point.createByRGBA(80,148,15,255));
+				pal8._paletteArray.push(ColorQuantization.Point.createByRGBA(149,172,45,255));
+				pal8._paletteArray.push(ColorQuantization.Point.createByRGBA(173,209,79,255));
+				pal8._paletteArray.push(ColorQuantization.Point.createByRGBA(181,215,166,255));
+				pal8._paletteArray.push(ColorQuantization.Point.createByRGBA(161,176,175,255));
+				pal8._paletteArray.push(ColorQuantization.Point.createByRGBA(219,231,196,255));
+				pal8._paletteArray.push(ColorQuantization.Point.createByRGBA(56,236,56,255));
+				pal8._paletteArray.push(ColorQuantization.Point.createByRGBA(116,167,148,255));
+				pal8._paletteArray.push(ColorQuantization.Point.createByRGBA(200,20,128,255));
+				pal8._paletteArray.push(ColorQuantization.Point.createByRGBA(54,101,7,255));
+				pal8._paletteArray.push(ColorQuantization.Point.createByRGBA(196,94,54,255));
+				pal8._paletteArray.push(ColorQuantization.Point.createByRGBA(56,92,200,255));
+				pal8._paletteArray.push(ColorQuantization.Point.createByRGBA(58,235,200,255));
+				pal8._paletteArray.push(ColorQuantization.Point.createByRGBA(200,92,200,255));
+				pal8._paletteArray.push(ColorQuantization.Point.createByRGBA(56,20,200,255));
+*/
+				img8 = quant.reduce(pointBuffers[index], pal8).exportUint8Array();
 			});
 
 			ti.mark("reduced -> DOM", function() {
@@ -157,4 +188,4 @@ $(document).on("click", "img.th", function() {
 //	process(["img/grad_default.png"]);
 }).on("change", "input, textarea, select", function() {
 	cfg_edited = true;
-});
+});