pull in drawing stuff

5 files changed, 216 insertions, 0 deletions

diff --git a/public/index.html b/public/index.html
index f5f087f..25aa681 100644
--- a/public/index.html
+++ b/public/index.html
@@ -38,6 +38,13 @@
 			<button id="login-go">GO</button>
 		</div>
 	</div>
+	
+	<div id="drawing">
+		<canvas id="main_canvas">
+		<div id="palette">
+		</div>
+	</div>
+	
 </body>
 </html>
 
diff --git a/public/js/brush.js b/public/js/brush.js
new file mode 100644
index 0000000..8d3eaf8
--- /dev/null
+++ b/public/js/brush.js
@@ -0,0 +1,80 @@
+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
new file mode 100644
index 0000000..dff865c
--- /dev/null
+++ b/public/js/color.js
@@ -0,0 +1,65 @@
+function Color (opt) {
+  if (opt.length == 3) {
+    this.r = opt[0];
+    this.g = opt[1];
+    this.b = opt[2];
+    this.a = 1;
+  }
+  else if (opt.length == 4) {
+    this.r = opt[0];
+    this.g = opt[1];
+    this.b = opt[2];
+    this.a = opt[3];
+  }
+}
+Color.prototype.toString = function(){
+  return "rgba(" + this.r + "," + this.g + "," + this.b + "," + this.a + ")";
+}
+Color.prototype.rgb = function(){
+  return [ this.r, this.g, this.b ];
+}
+Color.prototype.rgba = function(){
+  return [ this.r, this.g, this.b, this.a ];
+}
+Color.prototype.hsl = function(){
+}
+Color.prototype.copy = function(){
+  return new Color( this.rgba() );
+}
+Color.prototype.alpha = function(a){
+  var c = this.copy()
+  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 ]),
+  blue: new Color([ 0,0,255 ]),
+  black: new Color([ 0,0,0 ]),
+  green: new Color([ 0,128,0 ]),
+  cyan: new Color([ 0,255,255 ]),
+  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 e69de29..5cc4163 100644
--- a/public/js/draw.js
+++ b/public/js/draw.js
@@ -0,0 +1,44 @@
+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;
+
+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;
+}
diff --git a/public/js/util.js b/public/js/util.js
index e51b844..dbb37a7 100644
--- a/public/js/util.js
+++ b/public/js/util.js
@@ -11,3 +11,23 @@ function scrollToBottom (el) {
 	try { $(el).scrollTop( $(el)[0].scrollHeight ) }
 	catch (err) { }
 }
+var Trig = {
+  distanceBetween2Points: function ( point1, point2 ) {
+    var dx = point2.x - point1.x;
+    var dy = point2.y - point1.y;
+    return Math.sqrt( Math.pow( dx, 2 ) + Math.pow( dy, 2 ) );
+  },
+  angleBetween2Points: function ( point1, point2 ) {
+    var dx = point2.x - point1.x;
+    var dy = point2.y - point1.y;
+    return Math.atan2( dx, dy );
+  },
+  magnitude: function (point) {
+    return Math.sqrt( Math.pow( point.x, 2 ) + Math.pow( point.y, 2 ) );
+  }
+}
+
+function fib (f) { for (var i = 1, n = 1; n < 200; i++, n += i) f(n); }
+function rand(x) { return Math.random() * x; }
+function randInt(x) { return Math.floor(Math.random() * x); }
+function clamp(x,a,b) { return Math.min(Math.max(x,a),b); }