drawing stuff

6 files changed, 87 insertions, 146 deletions

diff --git a/public/css/chat.css b/public/css/chat.css
index 7657f6e..9805a86 100644
--- a/public/css/chat.css
+++ b/public/css/chat.css
@@ -5,7 +5,7 @@
 #chat {
   overflow-y: scroll;
   overflow-x: hidden;
-  max-height: 400px;
+  max-height: 320px;
   font-size: 13px;
   line-height: 18px;
   padding-left: 10px;
diff --git a/public/css/drawdrawdraw.css b/public/css/drawdrawdraw.css
index b4cc6cb..dc95b82 100644
--- a/public/css/drawdrawdraw.css
+++ b/public/css/drawdrawdraw.css
@@ -34,3 +34,11 @@ html,body { padding: 0; margin: 0; width: 100%; height: 100%;
 	background: #fff;
 	box-shadow: 0 1px 4px #888;
 }
+
+#drawing {
+	position: absolute;
+	left: 400px;
+	top: 50px;
+}
+#palette {
+}
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index 25aa681..c14aa37 100644
--- a/public/index.html
+++ b/public/index.html
@@ -8,6 +8,7 @@
 <script type="text/javascript" src="/socket.io/socket.io.js"></script>
 <script type="text/javascript" src="/js/util.js"></script>
 <script type="text/javascript" src="/js/auth.js"></script>
+<script type="text/javascript" src="/js/color.js"></script>
 <script type="text/javascript" src="/js/draw.js"></script>
 <script type="text/javascript" src="/js/chat.js"></script>
 <script type="text/javascript" src="/js/game.js"></script>
@@ -40,7 +41,7 @@
 	</div>
 	
 	<div id="drawing">
-		<canvas id="main_canvas">
+		<canvas id="workspace" width="400" height="200">
 		<div id="palette">
 		</div>
 	</div>
diff --git a/public/js/brush.js b/public/js/brush.js
deleted file mode 100644
index 8d3eaf8..0000000
--- a/public/js/brush.js
+++ /dev/null
@@ -1,80 +0,0 @@
-function Brush (b) {
-  this.opt = b;
-  var canvas = this.canvas = document.createElement("canvas");
-  var ctx = this.ctx = canvas.getContext('2d');
-  canvas.width = b.width;
-  canvas.height = b.height || b.width;
-  canvas.className = "brush";
-  this.width = b.width;
-  this.height = b.height || b.width;
-  this.color = b.color;
-
-  if (b.style == "soft") {
-    var hw = Math.floor(b.width / 2);
-    var r = clamp(b.width-1, 1, 1000);
-    ctx.beginPath();
-    var rad = ctx.createRadialGradient(hw, hw, 1, hw, hw, r);
-    rad.addColorStop(0, b.color.alpha(b.color.a).toString());
-    rad.addColorStop(0.5, b.color.alpha(0).toString());
-    ctx.fillStyle = rad;
-    ctx.arc(hw, hw, r, 0, Math.PI*2, false);
-    ctx.fill();
-  }
-  else if (b.style == "hard") {
-    var hw = Math.floor(b.width / 2);
-    var r = clamp(b.width-1, 1, 1000);
-    ctx.beginPath();
-    var rad = ctx.createRadialGradient(hw, hw, 1, hw, hw, r);
-    rad.addColorStop(0.5, b.color.toString() );
-    rad.addColorStop(0.5, b.color.toString() );
-    ctx.fillStyle = rad;
-    ctx.arc(hw, hw, r, 0, Math.PI*2, false);
-    ctx.fill();
-  }
-  else if (b.style == "pencil") {
-    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 = -hw; i <= hw; i++) {
-      for (var j = -hh; j <= hh; j++) {
-        var xx = Math.floor( i + hw );
-        var yy = Math.floor( j + hh );
-        var mag = Trig.magnitude({ x: i, y: j });
-        var offset = (yy * canvas.width + xx) * 4;
-        data[ offset ]     = color.r;
-        data[ offset + 1 ] = color.g;
-        data[ offset + 2 ] = color.b;
-        data[ offset + 3 ] = mag < r ? 1.0 : 0.0;
-      }
-    }
-  }
-}
-Brush.prototype.copy = function(opt){
-  return new Brush ( extend(opt, this.opt) )
-}
-
-function extend (h,a) {
-  h = h || {};
-  for (var i in a) {
-    if (a.hasOwnProperty(i) && ! h.hasOwnProperty(i)) {
-      h[i] = a[i];
-    }
-  }
-  return h;
-}
-
-var brush;
-function makeBrushes () {
-  document.getElementById('brushes').innerHTML = '';
-  fib(function(n){
-    var b = new Brush({ style: 'pencil', color: color, width: n })
-    b.canvas.onclick = function(){
-      brush = b;
-    }
-    document.getElementById('brushes').appendChild( b.canvas );
-    if (! brush) brush = b;
-  });
-}
-
-makeBrushes();
-
diff --git a/public/js/color.js b/public/js/color.js
index dff865c..5063423 100644
--- a/public/js/color.js
+++ b/public/js/color.js
@@ -31,19 +31,6 @@ Color.prototype.alpha = function(a){
   c.a = a;
   return c;
 }
-Color.prototype.swatch = function(){
-  var that = this;
-  var el = document.createElement("div");
-  el.className = "swatch";
-  el.style.backgroundColor = this.toString();
-  document.getElementById("palette").appendChild(el);
-  el.onclick = function(){
-    color = that;
-    makeBrushes();
-    brush = brush.copy({ color: color });
-  }
-}
-
 
 var colors = {
   red: new Color([ 255,0,0,0.1 ]),
@@ -54,12 +41,3 @@ var colors = {
   yellow: new Color([ 255,255,0 ]),
   peru: new Color([ 205,133,63 ]),
 }
-
-for (var c in colors) {
-  if (colors.hasOwnProperty(c)) {
-    colors[c].swatch();
-  }
-}
-
-var color = colors.black;
-
diff --git a/public/js/draw.js b/public/js/draw.js
index 5cc4163..1e11cbc 100644
--- a/public/js/draw.js
+++ b/public/js/draw.js
@@ -1,44 +1,78 @@
-var drawing = false;
-var workspace = document.getElementById("workspace");
-workspace.width = window.innerWidth * 0.9;
-workspace.height = window.innerHeight;
-workspace.id = "workspace";
-var workspaceCtx = workspace.getContext('2d');
-var lastpoint;
+$(function(){
+	var drawing = false;
+	var color = colors.black;
+  var brush = new Brush({ style: 'pencil', color: color, width: 10 });
+	var workspace = document.getElementById("workspace");
+	var workspaceCtx = workspace.getContext('2d');
+	var lastpoint;
+	
+	workspaceCtx.fillStyle = "#fff";
+	workspaceCtx.fillRect(0,0,workspace.width,workspace.height);
+	
+	var offset = $(workspace).offset();
+	
+	workspace.onmousedown = function(e){
+		drawing = true;
+	}
+	document.onmousemove = function(e){
+		if (drawing) {
+			newpoint = new Point(e, offset);
+			if (lastpoint) {
+				draw(lastpoint, newpoint);
+			}
+			lastpoint = newpoint;
+		}
+	}
+	window.onmouseup = function(){
+		if (drawing) {
+			drawing = false;
+			lastpoint = null;
+		}
+	}
+	function draw(start, end){
+		var halfBrushW = brush.width/2;
+		var halfBrushH = brush.height/2;
+	 console.log(start.x, end.x);
+		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, x, y);
+		}
+	}
+	
+	function Point(e, offset) {
+		this.x = e.pageX - offset.left;
+		this.y = e.pageY - offset.top;
+	}
+	
+});
 
-workspace.onmousedown = function(e){
-  drawing = true;
-}
-document.onmousemove = function(e){
-  if (drawing) {
-    newpoint = new Point(e);
-    if (lastpoint) {
-      draw(lastpoint, newpoint);
-    }
-    lastpoint = newpoint;
-  }
-}
-window.onmouseup = function(){
-  if (drawing) {
-    drawing = false;
-    lastpoint = null;
-  }
-}
-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, x, y);
-  }
-}
-
-function Point(e) {
-  this.x = e.pageX - workspace.offsetLeft;
-  this.y = e.pageY - workspace.offsetTop;
+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);
 }