render the brush stroke as a sequence of rectangles, with each rectangle having its own linear gradient

1 files changed, 66 insertions, 12 deletions

diff --git a/js/helper-classes/RDGE/GLBrushStroke.js b/js/helper-classes/RDGE/GLBrushStroke.js
index 59017a0c..8fb6ab25 100644
--- a/js/helper-classes/RDGE/GLBrushStroke.js
+++ b/js/helper-classes/RDGE/GLBrushStroke.js
@@ -76,7 +76,7 @@ function GLBrushStroke() {
             var prevPt = this._Points[numPoints-1];
             var diffPt = [prevPt[0]-pt[0], prevPt[1]-pt[1]];
             var diffPtMag = diffPt[0]*diffPt[0] + diffPt[1]*diffPt[1];
-            if (diffPtMag<4)
+            if (diffPtMag<16)//TODO hook this up to the variable that measures flow/wetness of the paint brush...a smaller number-> more samples
                 doAddPoint=false;
         }
         if (doAddPoint) {
@@ -184,7 +184,6 @@ function GLBrushStroke() {
         var bboxHeight = bboxMax[1] - bboxMin[1];
         ctx.clearRect(0, 0, bboxWidth, bboxHeight);
 
-
         /*
         ctx.lineWidth = this._strokeWidth;
         ctx.strokeStyle = "black";
@@ -205,31 +204,87 @@ function GLBrushStroke() {
         ctx.stroke();
         */
 
-        var firstPt = this._Points[0];
-        var prevX = firstPt[0]-bboxMin[0];
-        var prevY = firstPt[1]-bboxMin[1];
+        var isDebug = false;
+        var prevPt = this._Points[0];
+        var prevX = prevPt[0]-bboxMin[0];
+        var prevY = prevPt[1]-bboxMin[1];
+        prevPt = [prevX,prevY];
         for (var i = 1; i < numPoints; i++) {
             var pt = this._Points[i];
             ctx.globalCompositeOperation = 'source-over';
             var x = pt[0]-bboxMin[0];
             var y = pt[1]-bboxMin[1];
-            var r = ctx.createLinearGradient(prevX, prevY, x, y);
-            r.addColorStop(1, 'rgba(0,0,0,0.01)');
-            r.addColorStop(0.5,'rgba(255,0,0,1.0)');
-            r.addColorStop(0, 'rgba(0,0,0,0.01)');
+            pt = [x,y];
 
-            ctx.fillStyle = r;
-            //ctx.fillStyle = "rgba(0,128,0,0.15)";
+            //vector from prev to current pt
+            var seg = VecUtils.vecSubtract(2, pt, prevPt);
+            var segDir = VecUtils.vecNormalize(2, seg, 1.0);
+
+            var segMidPt = VecUtils.vecInterpolate(2, pt, prevPt, 0.5);
             var w2 = this._strokeWidth*0.5;
+            var segDirOrtho = [w2*segDir[1], -w2*segDir[0]];
+            
+            //add half the strokewidth to the segMidPt
+            var lgStart = VecUtils.vecAdd(2, segMidPt, segDirOrtho);
+            var lgEnd = VecUtils.vecSubtract(2, segMidPt, segDirOrtho);
+
+            ctx.save();
+            ctx.beginPath();
+
+            if (isDebug) {
+                ctx.strokeStyle="black";
+                ctx.lineWidth = 1;
+
+                ctx.moveTo(lgStart[0], lgStart[1]);
+                ctx.lineTo(lgEnd[0], lgEnd[1]);
+                ctx.stroke();
+            }
+
+            var lg = ctx.createLinearGradient(lgStart[0], lgStart[1], lgEnd[0], lgEnd[1]);
+            lg.addColorStop(1, 'rgba(0,0,0,0.0)');
+            lg.addColorStop(0.5,'rgba(255,0,0,1.0)');
+            lg.addColorStop(0, 'rgba(0,0,0,0.0)');
+            ctx.fillStyle = lg;
+
+            if (isDebug){
+                ctx.strokeStyle="blue";
+                ctx.lineWidth=0.5;
+            }
             ctx.moveTo(prevX-w2, prevY);
             ctx.lineTo(prevX+w2, prevY);
             ctx.lineTo(x+w2, y);
             ctx.lineTo(x-w2, y);
+            ctx.lineTo(prevX-w2, prevY);
             ctx.fill();
+            ctx.closePath();
 
+            ctx.restore();
+
+            prevPt = pt;
             prevX = x;
             prevY = y;
         }
+        
+
+        if (isDebug)
+            ctx.stroke();
+
+        if (isDebug){
+            //draw the skeleton of this stroke
+            ctx.lineWidth = 1;
+            ctx.strokeStyle = "black";
+            var pt = this._Points[0];
+            ctx.beginPath();
+            ctx.moveTo(pt[0]-bboxMin[0],pt[1]-bboxMin[1]);
+            for (var i = 1; i < numPoints; i++) {
+                pt = this._Points[i];
+                var x = pt[0]-bboxMin[0];
+                var y = pt[1]-bboxMin[1];
+                ctx.lineTo(x,y);
+            }
+            ctx.stroke();
+        }
+
 
         /*
         var R2 = this._strokeWidth;
@@ -256,7 +311,6 @@ function GLBrushStroke() {
             //ctx.rect(x-R, y-R, R2, R2);
         }
         */
-
         ctx.restore();
     } //render()