Comment image dye code and make it easy to grab test dye from playground.

2 files changed, 11 insertions, 2 deletions

diff --git a/public/js/mp/dye.js b/public/js/mp/dye.js
index c8c5fd5..138e332 100644
--- a/public/js/mp/dye.js
+++ b/public/js/mp/dye.js
@@ -105,21 +105,27 @@ var mp = function(mp) {
         for (var p = 0; p < imageData.length; p += 4) {
             var pixel = [imageData[p], imageData[p + 1], imageData[p + 2]];
             var alpha = imageData[p + 3];
+            
+            // Skip fully transparent pixels
             if (!alpha) {
                 continue;
             }
 
             var channel = getChannel(pixel);
             var channelId = channel.channel;
+            var intensity = channel.intensity;
 
-            if (!channelId || !(channelId in dyeData) || !dyeData[channelId].length) {
+            // If this is an unknown dye channel, an empty dye channel, not a pure color, or black, skip it
+            if (!channelId || !(channelId in dyeData) || !dyeData[channelId].length || intensity == 0) {
                 continue;
             }
 
-            var intensity = channel.intensity;
+            // Scale the intensity from 0-255 to the palette size (i is the palette index, t is the remainder)
             var val = intensity * dyeData[channelId].length
             var i = Math.floor(val / 255);
             var t = val - i * 255;
+            
+            // If we exactly hit one of the palette colors, just use it
             if (!t) {
                 --i;
                 imageData[p    ] = dyeData[channelId][i][0];
@@ -128,6 +134,7 @@ var mp = function(mp) {
                 continue;
             }
 
+            // If we're between two palette colors, interpolate between them (the first color in a palette is implicitly black)
             imageData[p    ] = ((255 - t) * (i && dyeData[channelId][i - 1][0]) + t * dyeData[channelId][i][0]) / 255;
             imageData[p + 1] = ((255 - t) * (i && dyeData[channelId][i - 1][1]) + t * dyeData[channelId][i][1]) / 255;
             imageData[p + 2] = ((255 - t) * (i && dyeData[channelId][i - 1][2]) + t * dyeData[channelId][i][2]) / 255;
diff --git a/public/playground.html b/public/playground.html
index 4e9e98c..0fd1b6f 100644
--- a/public/playground.html
+++ b/public/playground.html
@@ -10,6 +10,7 @@
 <canvas id="original" width="32" height="32"></canvas>
 <canvas id="dyed" width="32" height="32"></canvas>
 <span id="dyeOut"></span>
+<img id="out"/>
 <script>
 var dyeString = "R:#ede5b2,fff7bf|G:#cccccc,ffffff";
 var dyeData = mp.dye.parseDyeString(dyeString);
@@ -21,6 +22,7 @@ mp.resource.loadImage("images/bigcake.png", function(err, imageData) {
     oContext.putImageData(imageData, 0, 0);
     mp.dye.dyeImage(imageData.data, dyeData);
     dContext.putImageData(imageData, 0, 0);
+    document.getElementById("out").src = document.getElementById("dyed").toDataURL("image/png");
 });
 </script>
 </body>