Updated playback with procrastinate, improved pen rendering system by…

… starting at 90 degree vertical

css/main.css

@@ -1,7 +1,7 @@
 body {
   background: #333;
   overflow: hidden;
-  background: url(images/wood2_glow.jpg) top left no-repeat, url(images/wood2.jpg) top left;
+  background: url(images/wood2.jpg) top left;
   width: 100%;
   height: 100%;
   padding: 0;
@@ -44,6 +44,7 @@ ul {
   height: 500px;
   background: #eee url(images/canvas2.jpg);
   box-shadow: 1px 1px 5px #000;
+  cursor: url(images/chrome_cursor.png), url(images/blank.cur), none !important;
 }
 
 #artboard, #workboard {
@@ -52,7 +53,6 @@ ul {
   left: 0;
   width: 750px;
   height: 500px;
-  opacity: 0.85;
 }
 
 .brushy #artboard {
@@ -66,7 +66,7 @@ ul {
   top: 0;
   left: -9820px;
   width: 10000px;
-  height: 500px;
+  height: 3000px;
   z-index: 10000;
   cursor: default !important;
 }
@@ -75,7 +75,7 @@ ul {
 
 #controls {
   position: absolute;
-  bottom: 80px;
+  top: 300px;
   right: 0;
   border: solid 1px red;
 }
@@ -87,9 +87,10 @@ ul {
 /* Drawing tools */
 
 #toolbox {
+  z-index: 8000;
   position: absolute;
   top: 0;
-  right: 0px;
+  right: -80px;
 }
 #toolbox ul {
   list-style: none;
@@ -118,7 +119,7 @@ ul {
 
 #palette {
   position: absolute;
-  right: 80px;
+  right: 0px;
   top: 0;
   z-index: 10000;
 }
@@ -170,57 +171,64 @@ ul {
   position: absolute;
   top: 0;
   left: 0;
-  width: 284px;
-  height: 830px;
+  width: 30px;
+  height: 766px;
 }
 #pen .brush {
   position: absolute;
-  top: 0;
+  top: -3px;
   left: 0;
-  background: transparent url(images/pen.png) top right no-repeat;
-  width: 284px;
-  height: 830px;
+  background: transparent url(images/pen_straight.png) top right no-repeat;
+  width: 30px;
+  height: 766px;
 }
 #pen .shadow {
   position: absolute;
-  left: 55px;
-  top: 300px;
-  width: 160px;
+  left: -25px;
+  top: 250px;
+  width: 80px;
   height: 266px;
-  background: transparent url(images/shadow.png) top right no-repeat;
+  background: transparent url(images/shadow.png) bottom left no-repeat;
 }
 #pen.down .brush {
-  background-image: url(images/pen_down.png);
+  top: 0px;
+}
+#pen.down .shadow {
+  left: -30px;
 }
 
 
-/* Kanji Brush */
+/* Brush */
 
 #brush {
   position: absolute;
   top: 0;
   left: 0;
-  width: 284px;
-  height: 830px;
+  width: 29px;
+  height: 928px;
 }
 #brush .brush {
   position: absolute;
-  top: 0;
+  top: -5px;
   left: 0;
   background: transparent url(images/paintbrush.png) top right no-repeat;
-  width: 284px;
-  height: 830px;
+  width: 29px;
+  height: 928px;
 }
 #brush .shadow {
   position: absolute;
-  left: 55px;
-  top: 300px;
-  width: 160px;
+  left: -24px;
+  top: 327px;
+  width: 80px;
   height: 266px;
-  background: transparent url(images/shadow.png) top right no-repeat;
+  background: transparent url(images/shadow.png) bottom left no-repeat;
 }
 #brush.down .brush {
   background-image: url(images/paintbrush_down.png);
+  top: 5px;
+}
+#brush.down .shadow {
+  left: -28px;
 }
 
 /* Watercolor Brush */

index.html

@@ -28,13 +28,6 @@
     </div>
 
     <div id="sidebar">
-      <div id="toolbox">
-        <ul>
-          <li id="inkbrush_holder" data-bind="css: {invisible: ViewModel.inkbrush.active}, click: function() { ViewModel.activebrush(ViewModel.inkbrush); }"></li>
-          <li id="waterbrush_holder" data-bind="css: {invisible: ViewModel.waterbrush.active}, click: function() { ViewModel.activebrush(ViewModel.waterbrush); }"></li>
-          <li id="pen_holder" data-bind="css: {invisible: ViewModel.pen.active}, click: function() { ViewModel.activebrush(ViewModel.pen); }"></li>
-        </ul>
-      </div>
 
       <div id="palette">
         <ul class="colors">
@@ -53,13 +46,28 @@
         </ul>
       </div>
     </div>
+
+    <div id="toolbox">
+      <ul>
+        <li id="inkbrush_holder" data-bind="css: {invisible: ViewModel.inkbrush.active}, click: function() { ViewModel.activebrush(ViewModel.inkbrush); }"></li>
+        <li id="waterbrush_holder" data-bind="css: {invisible: ViewModel.waterbrush.active}, click: function() { ViewModel.activebrush(ViewModel.waterbrush); }"></li>
+        <li id="pen_holder" data-bind="css: {invisible: ViewModel.pen.active}, click: function() { ViewModel.activebrush(ViewModel.pen); }"></li>
+      </ul>
+    </div>
+
+    <div id="footer">
+      <p>
+        &copy; Skookum, Inc. 2011
+      </p>
+    </div>
   </div>
 
   <!-- JS Libraries -->
 
   <script src="js/lib/jquery-1.5.1.min.js"></script>
   <script src="js/lib/knockout-1.1.2.debug.js"></script>
   <script src="js/lib/amplify.min.js"></script>
+  <script src="js/lib/procrastinate.js"></script>
 
   <!-- ViewModels -->
 

js/lib/procrastinate.js

@@ -0,0 +1,69 @@
+/**
+ * Procrastinate - to delay execution of a function (server or browser)
+ *
+ * - node.js
+ *     eg: DrawProject updates project thumbnail when pages are added. CPU intensive.
+ *     With sequential adds (multi-upload form), DrawProject runs each time, wasting the last thumbnail.
+ *     We delay DrawProject for 5 seconds after each 'add' to see if another 'add' will happen soon.
+ *     To avoid starving DrawProject, we set an upper limit of 30 seconds.
+ *     
+ *      var Procratinate = require('procrastinate');
+ *      Procrastinate.start('projectname', 5000, 30000, function() { DrawProject('projectname'); });
+ *
+ * - Browser
+ *
+ *      <script src='procrastinate.js'></script>
+ *      Procrastinate.start('someUniqueTag', 1000, 8000, function() { ... });
+ *
+ *      Procrastinate.start('anotherTag', 500, 5000, this.method(), this); // "method" called using "this" context
+*/
+
+(function() {
+
+  var pending = {},
+      exporter = {};
+
+  function queue(fn, context, tag, start, min, max) {
+    pending[tag] = {
+      fn: fn,
+      context: context,
+      start: start,
+      max: max,
+      timeout: setTimeout(run, min, fn, context, tag)
+    };
+  }
+
+  function run(fn, context, tag) {
+    fn.call(context);
+    delete pending[tag];
+  }
+
+  function start(tag, min, max, fn, context) {
+    var queued = pending[tag],
+        now = new Date().getTime();
+
+    context = context || this;
+
+    if (typeof queued !== 'undefined') {
+      clearTimeout(queued.timeout);
+      if (now - queued.start > queued.max) run(fn, context, tag);
+      else queue(fn, context, tag, queued.start, min, max);
+    }
+    else queue(fn, context, tag, now, min, max);
+  }
+
+  // commonJS export
+
+  if (typeof module !== 'undefined' && ('exports' in module)) {
+    exporter = module.exports;
+  }
+
+  // browser export
+
+  else if (typeof window !== 'undefined') {
+    exporter = window.Procrastinate = {};
+  }
+
+  exporter.start = start;
+
+})();

js/main.js

@@ -8,9 +8,9 @@
 
   var mouse         = new Mouse(),
       activebrush   = ko.observable(null),
-      pen           = new Brush(mouse, 'pen_holder', activebrush, 'drawing', 'inkRenderer', drawing)
-      inkbrush      = new Brush(mouse, 'inkbrush_holder', activebrush, 'drawing', 'markerRenderer', drawing),
-      waterbrush    = new Brush(mouse, 'waterbrush_holder', activebrush, 'drawing', 'waterRenderer', drawing),
+      pen           = new Brush(mouse, 'pen', 'pen_holder', activebrush, 'drawing', 'inkRenderer', drawing)
+      inkbrush      = new Brush(mouse, 'brush', 'inkbrush_holder', activebrush, 'drawing', 'markerRenderer', drawing),
+      waterbrush    = new Brush(mouse, 'waterbrush', 'waterbrush_holder', activebrush, 'drawing', 'waterRenderer', drawing),
       palette       = new Palette(drawing),
       canvas        = new Canvas('artboard', 'workboard'),
       controls      = new Controls(drawing);

js/renderers/ink.js

@@ -7,7 +7,8 @@
 
     this.settings = {
       blot: 3,
-      stroke: 6
+      stroke: 6,
+      thinDistance: 4
     };
 
     $.extend(this.settings, options || {})
@@ -54,10 +55,10 @@
       var dx = this.position[1].x - this.position[0].x,
           dy = this.position[1].y - this.position[0].y,
           dist = Math.sqrt(dx * dx + dy * dy) || 1;
-      this.width += ((this.settings.stroke * (1 - (dist / 15))) - this.width) * .25;
+      this.width += ((this.settings.stroke * (1 - (dist / this.settings.thinDistance))) - this.width) * .25;
       this.width = Math.min(15, Math.max(1, this.width));
       this.ctx.save();
-        this.ctx.strokeStyle = 'rgba(' + this.color.join(',') + ', 1)';
+        this.ctx.strokeStyle = 'rgba(' + this.color.join(',') + ', .7)';
         this.ctx.lineWidth = this.width;
         this.ctx.beginPath();
         this.ctx.moveTo(this.position[0].x, this.position[0].y);

js/renderers/marker.js

@@ -40,24 +40,39 @@
 
   MarkerRenderer.prototype = {
 
-    stroke: function() {
-      this.work.clearRect(0, 0, 750, 500);
-      this.work.save();
-        this.work.strokeStyle = 'rgba(' + this.color.join(',') + ', .5)';
-        this.work.lineWidth = 10;
-        this.work.beginPath();
-        this.work.moveTo(this.currentStroke[0].x, this.currentStroke[0].y);
+    _drawLine: function(ctx, points, width, color) {
+      if (points.length === 0) return;
+      ctx.save();
+        if (color === null) {
+          ctx.globalCompositeOperation = 'destination-out';
+          ctx.strokeStyle = '#000';
+        }
+        else {
+          ctx.strokeStyle = color;
+        }
+        ctx.lineWidth = 10;
+        ctx.lineCap = 'round';
+        ctx.lineJoin = 'round';
+        ctx.beginPath();
+        ctx.moveTo(this.currentStroke[0].x, this.currentStroke[0].y);
         for (var i = 1; i < this.currentStroke.length; i++) {
-          this.work.lineTo(this.currentStroke[i].x, this.currentStroke[i].y);
+          ctx.lineTo(this.currentStroke[i].x, this.currentStroke[i].y);
         }
-        this.work.stroke();
-      this.work.restore();
+        ctx.stroke();
+      ctx.restore();
+    },
+
+    stroke: function() {
+      this._drawLine(this.work, this.currentStroke, 12, null);
+      this._drawLine(this.work, this.currentStroke, 10, 'rgba(' + this.color.join(',') + ', .33)');
     },
 
     imprint: function() {
-      //this.ctx.globalCompositeOperation = 'darker';
-      this.ctx.drawImage(this.canvas.work, 0, 0);
-      this.canvas.workCtx.clearRect(0, 0, 750, 500);
+      //this.ctx.drawImage(this.canvas.work, 0, 0);
+      //this.canvas.workCtx.clearRect(0, 0, 750, 500);
+      this._drawLine(this.work, this.currentStroke, 12, null);
+      this._drawLine(this.ctx, this.currentStroke, 10, 'rgba(' + this.color.join(',') + ', .33)');
+      this.currentStroke = [];
     }
 
   }