starting rewrite with two-canvas editor

author: Jules Laplace <jules@okfoc.us> 2013-03-06 13:04:57 -0500
committer: Jules Laplace <jules@okfoc.us> 2013-03-06 13:04:57 -0500
commit: 87ce8c3d94aa9f9178818735f75c981a7bc462d3 (patch)
tree: b5d5317398bef4fc0f50ce9c02affca5f8cb42cc /public
parent: c44715ddb22eba13d697355722292eb926681dbe (diff)
3 files changed, 161 insertions, 50 deletions
diff --git a/public/drawing.html b/public/drawing.html
index 8c377b0..4fa7a10 100644
--- a/public/drawing.html
+++ b/public/drawing.html
@@ -4,62 +4,31 @@
 <title>Palette Test</title>
 <script type="text/javascript" src="/js/jquery-1.9.1.min.js"></script>
 <script type="text/javascript" src="/js/canvasquery.js"></script>
-<script type="text/javascript" src="/js/point.js"></script>
-<script type="text/javascript" src="/js/color.js"></script>
 <script type="text/javascript" src="/js/util.js"></script>
+<script type="text/javascript" src="/js/color.js"></script>
+<script type="text/javascript" src="/js/point.js"></script>
+<script type="text/javascript" src="/js/palette.js"></script>
+<script type="text/javascript" src="/js/draw2.js"></script>
+<style type="text/css">
+#drawing {
+	position: relative;
+}
+#drawing canvas {
+	position: absolute;
+	top: 0;
+	left: 0;
+}
+</style>
 </head>
 <body>
 <img src="/img/palette.gif" id="palette">
+<div id="color_picker"></div>
+<div id="drawing">
+	<canvas id="surface"></canvas>
+	<canvas id="workspace"></canvas>
+</div>
 </body>
 <script type="text/javascript">
-
-$("#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 + ')';
-		}
-	}
-
-});
 </script>
 </html>
 
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
author	Jules Laplace <jules@okfoc.us>	2013-03-06 13:04:57 -0500
committer	Jules Laplace <jules@okfoc.us>	2013-03-06 13:04:57 -0500
commit	87ce8c3d94aa9f9178818735f75c981a7bc462d3 (patch)
tree	b5d5317398bef4fc0f50ce9c02affca5f8cb42cc /public
parent	c44715ddb22eba13d697355722292eb926681dbe (diff)