diff options
| -rw-r--r-- | public/dye.html | 3 | ||||
| -rw-r--r-- | public/images/bigcake.png | bin | 0 -> 957 bytes | |||
| -rw-r--r-- | public/js/mp/dye.js | 34 | ||||
| -rw-r--r-- | public/playground.html | 16 |
4 files changed, 45 insertions, 8 deletions
diff --git a/public/dye.html b/public/dye.html index f7ca177..6e8026d 100644 --- a/public/dye.html +++ b/public/dye.html @@ -1,6 +1,7 @@ <!DOCTYPE html> -<html> +<html lang="en"> <head> + <meta charset="utf-8"/> <title>Dyer</title> <style type="text/css"> .viewport { diff --git a/public/images/bigcake.png b/public/images/bigcake.png Binary files differnew file mode 100644 index 0000000..7cc92b5 --- /dev/null +++ b/public/images/bigcake.png diff --git a/public/js/mp/dye.js b/public/js/mp/dye.js index e7af938..c8c5fd5 100644 --- a/public/js/mp/dye.js +++ b/public/js/mp/dye.js @@ -3,6 +3,7 @@ var mp = function(mp) { mp.dye = { getChannel: getChannel, parseDyeString: parseDyeString, + asDyeString: asDyeString, dyeImage: dyeImage }; @@ -63,6 +64,39 @@ var mp = function(mp) { } /* + * Return a dye string matching the given dye specification. + */ + function asDyeString(dye) { + var dyeString = ""; + + // skip null channel + for (var i = 1; i < channel.length; i++) { + var dyeChannel = channel[i]; + var dyeParts = dye[dyeChannel]; + if (!dyeParts || dyeParts.length == 0) { + continue; + } + + dyeString += dyeChannel + ":#"; + + for (var j = 0; j < dyeParts.length; j++) { + var color = dyeParts[j]; + dyeString += color[0].toString(16) + color[1].toString(16) + color[2].toString(16) + ","; + } + + dyeString = dyeString.slice(0, -1); + + dyeString += "|"; + } + + if (dyeString.length > 0) { + dyeString = dyeString.slice(0, -1); + } + + return dyeString; + } + + /* * Dye the internal image data based on the specification provided by dyeData. * The specification can be generated from a dyeString by parseDyeString. * The array passed in will be modified. diff --git a/public/playground.html b/public/playground.html index 10ac6c2..4e9e98c 100644 --- a/public/playground.html +++ b/public/playground.html @@ -1,20 +1,21 @@ <!DOCTYPE html> -<meta charset="utf-8"> -<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> <canvas id="dyed" width="32" height="32"></canvas> -</body> - -<script src="js/mp/dye.js"></script> -<script src="js/mp/resource.js"></script> +<span id="dyeOut"></span> <script> var dyeString = "R:#ede5b2,fff7bf|G:#cccccc,ffffff"; var dyeData = mp.dye.parseDyeString(dyeString); +document.getElementById("dyeOut").innerText = mp.dye.asDyeString(dyeData); -mp.resource.loadImage("bigcake.png", function(err, imageData) { +mp.resource.loadImage("images/bigcake.png", function(err, imageData) { var oContext = document.getElementById("original").getContext("2d"); var dContext = document.getElementById("dyed").getContext("2d"); oContext.putImageData(imageData, 0, 0); @@ -22,4 +23,5 @@ mp.resource.loadImage("bigcake.png", function(err, imageData) { dContext.putImageData(imageData, 0, 0); }); </script> +</body> </html> |
