diff options
Diffstat (limited to 'public/palette.html')
| -rw-r--r-- | public/palette.html | 23 |
1 files changed, 19 insertions, 4 deletions
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> |