summaryrefslogtreecommitdiff
path: root/public
diff options
context:
space:
mode:
Diffstat (limited to 'public')
-rw-r--r--public/js/mp/dye.js11
-rw-r--r--public/playground.html2
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>