mask and colorize superpaint patterns

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>