diff options
| -rw-r--r-- | public/js/color.js | 9 | ||||
| -rw-r--r-- | public/palette.html | 23 |
2 files changed, 28 insertions, 4 deletions
diff --git a/public/js/color.js b/public/js/color.js index 85fe95d..579ed5e 100644 --- a/public/js/color.js +++ b/public/js/color.js @@ -31,6 +31,15 @@ Color.prototype.alpha = function(a){ c.a = a; return c; } +Color.prototype.swatch = function(){ + var el = document.createElement("div"); + el.style.className = "swatch"; + el.style.width = 16 + "px"; + el.style.height = 16 + "px"; + el.style.backgroundColor = this.toString(); + $(el).data("color", this); + return el; +} var colors = { red: new Color([ 255,0,0 ]), diff --git a/public/palette.html b/public/palette.html index 56d113a..fa37455 100644 --- a/public/palette.html +++ b/public/palette.html @@ -17,8 +17,10 @@ $("#palette").load(function(){ var offset = $("#palette").offset(); var paletteImg = $("#palette")[0]; var palette = cq(paletteImg); + var pattern, mask; + var color = new Color( 0, 0, 0 ); -$("body").append(palette.canvas); + $("body").append(palette.canvas); $("#palette").click(function(e){ // they are all 8x8 @@ -29,10 +31,23 @@ $("body").append(palette.canvas); point.quantize( 18, 16 ); point.add({ x: 15, y: 5 }); - var swatch = palette.clone().crop( point.x, point.y, 8, 8 ); - var swatchURI = swatch.canvas.toDataURL("image/png"); - document.body.style.backgroundImage = 'url(' + swatchURI + ')'; + pattern = palette.clone().crop( point.x, point.y, 8, 8 ); + mask = pattern.colorToMask("#fff"); + pattern.applyMask(mask); + patternURI = pattern.clone().blend( color.toString(), "screen", 1.0 ).canvas.toDataURL("image/png"); + document.body.style.backgroundImage = 'url(' + patternURI + ')'; }); + + for (var i in colors) { + var swatch = colors[i].swatch(); + document.body.appendChild(swatch); + swatch.onclick = function(){ + color = $(this).data("color"); + p = cq(paletteImg); + patternURI = pattern.clone().blend( color.toString(), "screen", 1.0 ).canvas.toDataURL("image/png"); + document.body.style.backgroundImage = 'url(' + patternURI + ')'; + } + } }); </script> </html> |