diff options
Diffstat (limited to 'public')
-rw-r--r-- | public/js/mp/dye.js | 11 | ||||
-rw-r--r-- | public/playground.html | 2 |
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> |