resample the brush stroke so we don't have gaps if the path is drawn rapidly,

and,
allow to change the stroke color,
and,
more efficient stroke rendering by drawing translated radial gradients (instead of creating new gradients for each stroke sample)

1 files changed, 58 insertions, 16 deletions

diff --git a/js/helper-classes/RDGE/GLBrushStroke.js b/js/helper-classes/RDGE/GLBrushStroke.js
index 8fb6ab25..52ac79f5 100755
--- a/js/helper-classes/RDGE/GLBrushStroke.js
+++ b/js/helper-classes/RDGE/GLBrushStroke.js
@@ -34,6 +34,9 @@ function GLBrushStroke() {
     this._strokeMaterial;
     this._strokeStyle = "Solid";
 
+    //the wetness of the brush (currently this is multiplied to the square of the stroke width, but todo should be changed
+    this._WETNESS_FACTOR = 0.010625;//0.0625;
+
     //drawing context
     this._world = null;
 
@@ -69,21 +72,23 @@ function GLBrushStroke() {
     this.getPoint = function (index) { return this._Points[index]; }
     this.addPoint = function (pt)
     {
-        //add the point if it is some epsilon away from the previous point
-        var doAddPoint=true;
+        //add the point only if it is some epsilon away from the previous point
         var numPoints = this._Points.length;
         if (numPoints>0) {
+            var threshold = this._WETNESS_FACTOR*this._strokeWidth*this._strokeWidth;
             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<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) {
+            if (diffPtMag>threshold){
+                this._Points.push(pt);
+                this._dirty=true;
+            }
+        }else{
             this._Points.push(pt);
             this._dirty=true;
         }
     }
+    
     this.insertPoint = function(pt, index){ this._Points.splice(index, 0, pt); this._dirty=true;}
     this.isDirty = function(){return this._dirty;}
     this.makeDirty = function(){this._dirty=true;}
@@ -127,10 +132,39 @@ function GLBrushStroke() {
 
     this.computeMetaGeometry = function(){
         if (this._dirty){
+            var numPoints = this._Points.length;
+
+            //**** add samples to the path if needed...linear interpolation for now
+            if (numPoints>1) {
+                var threshold = this._WETNESS_FACTOR*this._strokeWidth*this._strokeWidth;
+                var prevPt = this._Points[0];
+                var prevIndex = 0;
+                for (var i=1;i<numPoints;i++){
+                    var pt = this._Points[i];
+                    var diff = [pt[0]-prevPt[0], pt[1]-prevPt[1]];
+                    var distance = Math.sqrt(diff[0]*diff[0]+diff[1]*diff[1]);
+                    if (distance>threshold){
+                        //insert points along the prev. to current point
+                        var numNewPoints = Math.floor(distance/threshold);
+                        for (var j=0;j<numNewPoints;j++){
+                            var param = (j+1)/(numNewPoints+1);
+                            var newpt = [prevPt[0]+ diff[0]*param, prevPt[1]+ diff[1]*param];
+                            //insert new point before point i
+                            this._Points.splice(i, 0, [newpt[0], newpt[1], 0]);
+                            i++;
+                        }
+                        this._dirty=true;
+                    }
+                    prevPt=pt;
+                    //update numPoints to match the new length
+                    numPoints = this._Points.length;
+                }
+            }
+
             // *** compute the bounding box *********
             this._BBoxMin = [Infinity, Infinity, Infinity];
             this._BBoxMax = [-Infinity, -Infinity, -Infinity];
-            var numPoints = this._Points.length;
+            numPoints = this._Points.length;
             if (numPoints === 0) {
                 this._BBoxMin = [0, 0, 0];
                 this._BBoxMax = [0, 0, 0];
@@ -204,6 +238,7 @@ function GLBrushStroke() {
         ctx.stroke();
         */
 
+        /*
         var isDebug = false;
         var prevPt = this._Points[0];
         var prevX = prevPt[0]-bboxMin[0];
@@ -284,9 +319,9 @@ function GLBrushStroke() {
             }
             ctx.stroke();
         }
+        */
 
 
-        /*
         var R2 = this._strokeWidth;
         var R = R2*0.5;
         var hardness = 0.25; //for a pencil, this is always 1 //TODO get hardness parameter from user interface
@@ -294,23 +329,30 @@ function GLBrushStroke() {
         if (innerRadius<1)
             innerRadius=1;
 
+        var r = ctx.createRadialGradient(0,0,innerRadius, 0,0,R);
+        //r.addColorStop(0, 'rgba(255,0,0,0.5)');
+        var midColor = "rgba("+parseInt(255*this._strokeColor[0])+","+parseInt(255*this._strokeColor[1])+","+parseInt(255*this._strokeColor[2])+",0.5)";
+        r.addColorStop(0, midColor);
+        //r.addColorStop(0.5, 'rgba(255,0,0,0.5)'); // prevent aggregation of semi-opaque pixels
+        //r.addColorStop(1, 'rgba(255,0,0,0.0)');
+        var endColor = "rgba("+parseInt(255*this._strokeColor[0])+","+parseInt(255*this._strokeColor[1])+","+parseInt(255*this._strokeColor[2])+",0.0)";
+        r.addColorStop(1, endColor);
+        ctx.fillStyle = r;
+
         for (var i = 0; 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.createRadialGradient(x, y, innerRadius, x, y, R);
-            r.addColorStop(0, 'rgba(255,0,0,0.5)');
-            //r.addColorStop(0.5, 'rgba(255,0,0,0.5)'); // prevent aggregation of semi-opaque pixels
-            r.addColorStop(1, 'rgba(255,0,0,0.0)');
-            ctx.fillStyle = r;
-            //ctx.fillRect(x-R, y-R, R2, R2);
-            ctx.arc(x, y, R, 0, 2 * Math.PI, false);
+            ctx.save();
+            ctx.translate(x,y);
+            ctx.arc(0, 0, R, 0, 2 * Math.PI, false);
             ctx.fill();
+            ctx.restore();
             //ctx.globalCompositeOperation = 'source-in';
             //ctx.rect(x-R, y-R, R2, R2);
         }
-        */
+
         ctx.restore();
     } //render()