draw brush stroke as concentric paths overlaid on top of each other...allows us to simulate softness for circular brushes

1 files changed, 98 insertions, 37 deletions

diff --git a/js/helper-classes/RDGE/GLBrushStroke.js b/js/helper-classes/RDGE/GLBrushStroke.js
index c1469977..26c922a3 100755
--- a/js/helper-classes/RDGE/GLBrushStroke.js
+++ b/js/helper-classes/RDGE/GLBrushStroke.js
@@ -81,7 +81,7 @@ function GLBrushStroke() {
         //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;
+            var threshold = 1;//this._WETNESS_FACTOR*this._strokeWidth;
             var prevPt = this._Points[numPoints-1];
             var diffPt = [prevPt[0]-pt[0], prevPt[1]-pt[1]];
             var diffPtMag = Math.sqrt(diffPt[0]*diffPt[0] + diffPt[1]*diffPt[1]);
@@ -375,46 +375,58 @@ function GLBrushStroke() {
         */
 
         /*
-        var R2 = this._strokeWidth;
-        var R = R2*0.5;
-        var hardness = 0; //for a pencil, this is always 1 //TODO get hardness parameter from user interface
-        var innerRadius = (hardness*R)-1;
-        if (innerRadius<1)
-            innerRadius=1;
-
-        var r = ctx.createRadialGradient(0,0,innerRadius, 0,0,R);
-        var midColor = "rgba("+parseInt(255*this._strokeColor[0])+","+parseInt(255*this._strokeColor[1])+","+parseInt(255*this._strokeColor[2])+",1)";
-        r.addColorStop(0, midColor);
-        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];
-            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);
-        }
-        */
-
+        //build the stamp for the brush stroke
+        //todo get this directly from the UI
+        var t=0;
         var numTraces = this._strokeWidth;
         var halfNumTraces = numTraces/2;
-        var deltaDisplacement = [1,0];//[this._strokeWidth/numTraces, 0]; //a horizontal line brush
         var startPos = [-this._strokeWidth/2,0];
-        for (var t=0;t<numTraces;t++){
-            var disp = [startPos[0]+t*deltaDisplacement[0], startPos[1]+t*deltaDisplacement[1]];
+        var brushStamp = [];
+
+        //build an angled (calligraphic) brush stamp
+        var deltaDisplacement = [1,1];//[this._strokeWidth/numTraces, 0]; //a horizontal line brush
+        for (t=0;t<numTraces;t++){
+            var brushPt = [startPos[0]+t*deltaDisplacement[0], startPos[1]+t*deltaDisplacement[1]];
+            brushStamp.push(brushPt);
+        }
+
+
+        //make a circular brush stamp
+        brushStamp=[];
+        numTraces = this._strokeWidth*Math.PI; //figure out how to
+        var radius = this._strokeWidth/2;
+        for (t=0;t<numTraces;t++)
+        {
+            var angle = Math.PI*(360*t/numTraces)/180;
+            var brushPt = [radius*Math.cos(angle), radius*Math.sin(angle)];
+            brushStamp.push(brushPt);
+        }
+        
+//        //make a square brush stamp
+//        STOPPED HERE
+//        brushStamp = [];
+//        numTraces = 4*strokeWidth;
+//        for (t=0;t<numTraces;t++){
+//            if (t<numTraces*0.25){
+//                var brushPt = [startPos[0]+t*deltaDisplacement[0], startPos[1]+t*deltaDisplacement[1]];
+//            } else if (t<numTraces*0.5){
+//
+//            } else if (t<numTraces*0.75){
+//
+//            } else {
+//
+//            }
+//            brushStamp.push(brushPt);
+//        }
+
+        for (t=0;t<numTraces;t++){
+            var disp = [brushStamp[t][0], brushStamp[t][1]];
             //ctx.globalCompositeOperation = 'source-over';
             var distFromMiddle = Math.abs(halfNumTraces-t);
             var alphaVal = 1.0 - (100-this._strokeHardness)*(distFromMiddle/halfNumTraces)/100;
+            alphaVal = 0.2;
             ctx.save();
-            ctx.lineWidth=this._strokeWidth/10;//4;
+            ctx.lineWidth=this._strokeWidth/10;//todo figure out the correct formula for the line width
             if (ctx.lineWidth<2)
                 ctx.lineWidth=2;
             if (t===numTraces-1){
@@ -422,10 +434,10 @@ function GLBrushStroke() {
             }
             ctx.lineJoin="bevel";
             ctx.lineCap="butt";
-            if (t<numTraces/2)
+            //if (t<numTraces/2)
                 ctx.strokeStyle="rgba("+parseInt(255*this._strokeColor[0])+","+parseInt(255*this._strokeColor[1])+","+parseInt(255*this._strokeColor[2])+","+alphaVal+")";
-            else
-                ctx.strokeStyle="rgba("+parseInt(255*this._secondStrokeColor[0])+","+parseInt(255*this._secondStrokeColor[1])+","+parseInt(255*this._secondStrokeColor[2])+","+alphaVal+")";
+            //else
+            //    ctx.strokeStyle="rgba("+parseInt(255*this._secondStrokeColor[0])+","+parseInt(255*this._secondStrokeColor[1])+","+parseInt(255*this._secondStrokeColor[2])+","+alphaVal+")";
             ctx.translate(disp[0],disp[1]);
             ctx.beginPath();
             ctx.moveTo(this._Points[0][0]-bboxMin[0], this._Points[0][1]-bboxMin[1]);
@@ -435,8 +447,10 @@ function GLBrushStroke() {
             ctx.stroke();
             ctx.restore();
         }
+        */
 
         /*
+        //debugging path
         ctx.beginPath();
         ctx.moveTo(this._Points[0][0]-bboxMin[0], this._Points[0][1]-bboxMin[1]);
         for (var i=1;i<numPoints;i++){
@@ -447,6 +461,53 @@ function GLBrushStroke() {
         ctx.stroke();
         */
 
+        var numlayers = this._strokeWidth/2;
+        var alphaVal = 1.0/(numlayers-1);
+        for (var l=0;l<numlayers;l++){
+            ctx.beginPath();
+            ctx.moveTo(this._Points[0][0]-bboxMin[0], this._Points[0][1]-bboxMin[1]);
+            for (var i=1;i<numPoints;i++){
+                ctx.lineTo(this._Points[i][0]-bboxMin[0], this._Points[i][1]-bboxMin[1]);
+            }
+            ctx.lineCap = "round";
+            ctx.lineJoin="round";
+            ctx.lineWidth=l+1;
+            ctx.strokeStyle="rgba("+parseInt(255*this._strokeColor[0])+","+parseInt(255*this._strokeColor[1])+","+parseInt(255*this._strokeColor[2])+","+alphaVal+")";
+            ctx.stroke();
+        }
+
+        /*
+        var R2 = this._strokeWidth;
+        var R = R2*0.5;
+        var hardness = 0; //for a pencil, this is always 1 //TODO get hardness parameter from user interface
+        var innerRadius = (hardness*R)-1;
+        if (innerRadius<1)
+            innerRadius=1;
+
+        var r = ctx.createRadialGradient(0,0,innerRadius, 0,0,R);
+        var midColor = "rgba("+parseInt(255*this._strokeColor[0])+","+parseInt(255*this._strokeColor[1])+","+parseInt(255*this._strokeColor[2])+",1)";
+        r.addColorStop(0, midColor);
+        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];
+            ctx.save();
+            ctx.translate(x,y);
+            ctx.arc(0, 0, R, 0, 2 * Math.PI, false);
+            ctx.fill();
+            ctx.restore();
+            break;
+            //ctx.globalCompositeOperation = 'source-in';
+            //ctx.rect(x-R, y-R, R2, R2);
+        }
+        */
+
+
         ctx.restore();
     } //render()