summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--public/dye_channels.html37
-rw-r--r--public/images/channels.pngbin0 -> 2949 bytes
-rw-r--r--public/js/mp/dye.js59
3 files changed, 69 insertions, 27 deletions
diff --git a/public/dye_channels.html b/public/dye_channels.html
new file mode 100644
index 0000000..bdb74cb
--- /dev/null
+++ b/public/dye_channels.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Mana Portal Playground</title>
+<script src="js/mp/dye.js"></script>
+<script src="js/mp/resource.js"></script>
+</head>
+<body>
+<canvas id="original" width="32" height="32"></canvas>
+<script>
+function checkPixel( imageData, x, y, r, g, b) {
+ var index = (x + y * imageData.width) * 4;
+ var dR = imageData.data[index++] - r;
+ var dG = imageData.data[index++] - g;
+ var dB = imageData.data[index++] - b;
+
+ if (dR != 0 || dG != 0 || dB != 0) {
+ console.log("(" + x + ", " + y + "): " + dR + ", " + dG + "," + dB);
+ }
+}
+
+mp.resource.loadImage("images/channels.png", function(err, image) {
+ var oContext = document.getElementById("original").getContext("2d");
+ oContext.putImageData(image, 0, 0);
+
+ console.log("Size: " + image.width + " x " + image.height);
+
+ for (var x = 0; x != image.width; ++x) {
+ for (var y = 0; y != image.height; ++y) {
+ checkPixel(image, x, y, (~x & 1) && y, (~x & 2) && y, (~x & 4) && y);
+ }
+ }
+});
+</script>
+</body>
+</html>
diff --git a/public/images/channels.png b/public/images/channels.png
new file mode 100644
index 0000000..d7a1fab
--- /dev/null
+++ b/public/images/channels.png
Binary files differ
diff --git a/public/js/mp/dye.js b/public/js/mp/dye.js
index 65aa429..b9955f1 100644
--- a/public/js/mp/dye.js
+++ b/public/js/mp/dye.js
@@ -4,6 +4,7 @@ var mp = function(mp) {
getChannel: getChannel,
parseDyeString: parseDyeString,
asDyeString: asDyeString,
+ updateColor: updateColor,
dyeImage: dyeImage
};
@@ -97,6 +98,36 @@ var mp = function(mp) {
return dyeString;
}
+ function updateColor(color, p) {
+ var channel = getChannel(color);
+ var channelId = channel.channel;
+ var intensity = channel.intensity;
+
+ // 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) {
+ return;
+ }
+
+ // 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;
+ color[p ] = dyeData[channelId][i][0];
+ color[p + 1] = dyeData[channelId][i][1];
+ color[p + 2] = dyeData[channelId][i][2];
+ return;
+ }
+
+ // If we're between two palette colors, interpolate between them (the first color in a palette is implicitly black)
+ color[p ] = Math.floor(((255 - t) * (i && dyeData[channelId][i - 1][0]) + t * dyeData[channelId][i][0]) / 255);
+ color[p + 1] = Math.floor(((255 - t) * (i && dyeData[channelId][i - 1][1]) + t * dyeData[channelId][i][1]) / 255);
+ color[p + 2] = Math.floor(((255 - t) * (i && dyeData[channelId][i - 1][2]) + t * dyeData[channelId][i][2]) / 255);
+ }
+
/*
* Dye the internal image data based on the specification provided by dyeData.
* The specification can be generated from a dyeString by parseDyeString.
@@ -112,33 +143,7 @@ var mp = function(mp) {
continue;
}
- var channel = getChannel(pixel);
- var channelId = channel.channel;
- var intensity = channel.intensity;
-
- // 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;
- }
-
- // 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];
- imageData[p + 1] = dyeData[channelId][i][1];
- imageData[p + 2] = dyeData[channelId][i][2];
- 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;
+ updateColor(imageData, p);
}
/* TODO */
return imageData;