2 files changed, 142 insertions, 0 deletions
diff --git a/public/js/draw2.js b/public/js/draw2.js
new file mode 100644
index 0000000..7d7ff34
--- /dev/null
+++ b/public/js/draw2.js
@@ -0,0 +1,96 @@
+$(function(){
+	if ($("#workspace").length == 0) return;
+	var drawing = false;
+	var color = colors.black;
+  var brush = new Brush({ style: 'pencil', color: color, width: 10 });
+	var workspace = cw("#workspace");
+	var lastpoint;
+	
+	clearWorkspace();
+	
+	var offset;
+
+	$(workspace).mousedown(function(e){
+		drawing = true;
+	});
+	$(window).mousemove(function(e){
+		if (drawing) {
+			newpoint = new Point(e, offset);
+			if (lastpoint) {
+				draw(lastpoint, newpoint);
+			}
+			lastpoint = newpoint;
+		}
+	});
+	$(window).mouseup(function(){
+		if (drawing) {
+			drawing = false;
+			lastpoint = null;
+		}
+		$("#chat-message").focus();
+	});
+	$(window).on("drawing:start", function(){
+		offset = $(workspace).offset();
+	});
+	function clearWorkspace(){
+		workspaceCtx.fillStyle = "#fff";
+		workspaceCtx.fillRect(0,0,workspace.width,workspace.height);
+	}
+	$("#save-drawing").click(function(){
+		var uri = workspace.toDataURL("image/png").replace("data:image/png;base64,","");
+		console.log(uri.length);
+		console.log(atob(uri).length);
+
+		var params = {
+			image: uri,
+			nick: Game.nick
+		};
+		$.post("/upload", params, function(){
+			console.log("saved");
+		});
+		clearWorkspace();
+		$("#drawing").hide();
+	});
+	
+	function draw(start, end){
+		var halfBrushW = brush.width/2;
+		var halfBrushH = brush.height/2;
+		var distance = parseInt( Trig.distanceBetween2Points( start, end ) );
+		var angle = Trig.angleBetween2Points( start, end );
+		for ( var z=0; (z<=distance || z==0); z += 2 ) {
+			var x = start.x + (Math.sin(angle) * z) - halfBrushW;
+			var y = start.y + (Math.cos(angle) * z) - halfBrushH;
+			workspaceCtx.drawImage(brush.canvas, Math.floor(x), Math.floor(y));
+		}
+	}
+	
+});
+
+function Brush (b) {
+  this.opt = b;
+  b.height = b.height || b.width;
+  var canvas = this.canvas = document.createElement("canvas");
+  var ctx = this.ctx = canvas.getContext('2d');
+  this.width = canvas.width = b.width;
+  this.height = canvas.height = b.height;
+  this.color = b.color;
+  canvas.className = "brush";
+	
+	var hw = canvas.width / 2, hh = canvas.height / 2;
+	var id = ctx.getImageData( 0, 0, canvas.width, canvas.height );
+	var data = id.data;
+	for (var i = 0; i < canvas.width; i++) {
+		for (var j = 0; j < canvas.height; j++) {
+			var mag = Trig.magnitude({ x: i - hw, y: j - hh });
+			var offset = (j * canvas.width + i) * 4;
+			if (offset > data.length) continue;
+			data[ offset ]     = b.color.r;
+			data[ offset + 1 ] = b.color.g;
+			data[ offset + 2 ] = b.color.b;
+			data[ offset + 3 ] = mag < hw ? 255 : 0;
+		}
+	}
+	ctx.putImageData(id, 0, 0);
+	$("#drawing").append(canvas);
+}
+
diff --git a/public/js/palette.js b/public/js/palette.js
new file mode 100644
index 0000000..a2db196
--- /dev/null
+++ b/public/js/palette.js
@@ -0,0 +1,46 @@
+$("#palette").load(function(){
+	console.log("hello");
+	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);
+
+	$("#palette").click(function(e){
+		// they are all 8x8
+		// the first one starts at (15, 5), next one is 16 pixels down or to the right
+		// there are 16 rows and 6 columns, so 92 patterns total
+		var point = new Point(e, offset);
+		click(point);
+	});
+	var click = function(point) {
+		point.subtract({ x: 15, y: 5 });
+		point.quantize( 18, 16 );
+		point.add({ x: 15, y: 5 });
+
+		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 + ')';
+	}
+
+	var random = function(){
+		var point = new Point(paletteImg.width, paletteImg.height).scale( Math.random(), Math.random() ).floor();
+		click(point);
+	}
+	random();
+
+	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 + ')';
+		}
+	}
+});
+\ No newline at end of file