Basic pen placeholder with ink

css/main.css

@@ -81,6 +81,36 @@ body.brushy {
 
 /* Brushes */
 
+/* Pen */
+
+#pen {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 284px;
+  height: 830px;
+}
+#pen .brush {
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: transparent url(images/pen.png) top right no-repeat;
+  width: 284px;
+  height: 830px;
+}
+#pen .shadow {
+  position: absolute;
+  left: 55px;
+  top: 300px;
+  width: 160px;
+  height: 266px;
+  background: transparent url(images/shadow.png) top right no-repeat;
+}
+#pen.down .brush {
+  background-image: url(images/pen_down.png);
+}
+
+
 /* Kanji Brush */
 
 #brush {

js/main.js

@@ -4,14 +4,19 @@
 
   var mouse         = new Mouse(),
       activebrush   = ko.observable(null),
-      inkbrush      = new Brush(mouse, 'inkbrush_holder', activebrush, 'wrap', 'waterRenderer'),
+      pen           = new Brush(mouse, 'pen_holder', activebrush, 'wrap', 'inkRenderer')
+      inkbrush      = new Brush(mouse, 'inkbrush_holder', activebrush, 'wrap', 'inkRenderer'),
       waterbrush    = new Brush(mouse, 'waterbrush_holder', activebrush, 'wrap', 'waterRenderer'),
-      canvas        = new Canvas('artboard'),
-      waterRenderer = new WaterRenderer(canvas);
+      canvas        = new Canvas('artboard');
+
+  // Create Renderers
+
+  var waterRenderer = new WaterRenderer(canvas),
+      inkRenderer   = new InkRenderer(canvas);
 
   // Init ViewModels
 
-  activebrush(inkbrush);
+  activebrush(pen);
   mouse.monitor();
 
   activebrush.subscribe(function (brush) {
@@ -26,6 +31,7 @@
   // Define global ViewModel
 
   window.ViewModel = {
+    pen: pen,
     inkbrush: inkbrush,
     waterbrush: waterbrush,
     mouse: mouse,

js/renderers/ink.js

@@ -0,0 +1,70 @@
+(function($, ko) {
+
+  var ns = 'inkRenderer';
+
+  function InkRenderer(canvas, options) {
+    var self = this;
+
+    this.settings = {
+      blot: 3,
+      stroke: 6,
+      color: [0,0,0]
+    };
+
+    $.extend(this.settings, options || {})
+
+    this.ctx = canvas.ctx;
+    this.position = [null, null];                                 // [from, to]
+    this.width = 2;
+
+    this.debug = $('#debugboard')[0].getContext('2d');
+
+    $(document).bind(ns + '.down', function(event, position) {
+      self.position = [{x: position.x, y: position.y}, {x: position.x, y: position.y}];
+      //self.blot(self.settings.blot);
+    });
+
+    $(document).bind(ns + '.move', function(event, position) {
+      self.position.shift();
+      self.position.push({x: position.x, y: position.y});
+      self.stroke();
+    });
+
+    $(document).bind(ns + '.up', function(event, position) {
+    });  
+  }
+
+  InkRenderer.prototype = {
+
+    blot: function(radius) {
+      this.ctx.save();
+        this.ctx.translate(this.position[1].x, this.position[1].y);
+        this.ctx.fillStyle = 'rgba(' + this.settings.color.join(',') + ', 1)';
+        this.ctx.beginPath();
+        this.ctx.arc(0, 0, radius, 0, Math.PI * 2, false);
+        this.ctx.closePath();
+        this.ctx.fill();
+      this.ctx.restore();
+    },
+
+    stroke: function() {
+      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 = Math.min(15, Math.max(1, this.width));
+      this.ctx.save();
+        this.ctx.strokeStyle = '#000';
+        this.ctx.lineWidth = this.width;
+        this.ctx.beginPath();
+        this.ctx.moveTo(this.position[0].x, this.position[0].y);
+        this.ctx.lineTo(this.position[1].x, this.position[1].y);
+        this.ctx.stroke();
+      this.ctx.restore();
+    }
+
+  }
+
+  window.InkRenderer = InkRenderer;
+
+})(jQuery, ko);

js/renderers/water.js

@@ -10,11 +10,11 @@
       scatter: 10,
       fps: 25,
       momentum: 0.05,
-      radius: 10,
-      spread: 5,
+      radius: 20,
+      spread: 2,
       gravity: 3,
       opacity: 0.02,
-      fade: 0.001,
+      fade: 0.004,
       color: [0,0,0]
     };
 

scene1.html

@@ -13,11 +13,17 @@
     <div id="toolbox_shader"></div>
     <div id="toolbox">
       <ul>
+        <li id="pen_holder" data-bind="click: function() { ViewModel.activebrush(ViewModel.pen); }"></li>
         <li id="inkbrush_holder" data-bind="click: function() { ViewModel.activebrush(ViewModel.inkbrush); }"></li>
         <li id="waterbrush_holder" data-bind="click: function() { ViewModel.activebrush(ViewModel.waterbrush); }"></li>
       </ul>
     </div>
 
+    <div id="pen" data-bind="css: {down: pen.down}, style: {left: pen.left, top: pen.top, zIndex: pen.zIndex}">
+      <div class="shadow" data-bind="style: {webkitTransform: pen.shadowTransform, MozTransform: pen.shadowTransform, msTransform: pen.shadowTransform, transform: pen.shadowTransform}"></div>
+      <div class="brush" data-bind="style: {webkitTransform: pen.transform, MozTransform: pen.transform, msTransform: pen.transform, transform: pen.transform}"></div>
+    </div>
+
     <div id="brush" data-bind="css: {down: inkbrush.down}, style: {left: inkbrush.left, top: inkbrush.top, zIndex: inkbrush.zIndex}">
       <div class="shadow" data-bind="style: {webkitTransform: inkbrush.shadowTransform, MozTransform: inkbrush.shadowTransform, msTransform: inkbrush.shadowTransform, transform: inkbrush.shadowTransform}"></div>
       <div class="brush" data-bind="style: {webkitTransform: inkbrush.transform, MozTransform: inkbrush.transform, msTransform: inkbrush.transform, transform: inkbrush.transform}"></div>
@@ -42,6 +48,7 @@
   <!-- Brush Renderers -->
 
   <script src="js/renderers/water.js"></script>
+  <script src="js/renderers/ink.js"></script>
 
   <!-- Main -->