diff options
| -rw-r--r-- | public/dye_channels.html | 37 | ||||
| -rw-r--r-- | public/images/channels.png | bin | 0 -> 2949 bytes | |||
| -rw-r--r-- | public/js/mp/dye.js | 59 |
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 Binary files differnew file mode 100644 index 0000000..d7a1fab --- /dev/null +++ b/public/images/channels.png 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; |
