Merge pull request #108 from pushkarjoshi/brushtool

Brushtool

2 files changed, 293 insertions, 28 deletions

diff --git a/js/helper-classes/backup-delete/GLBrushStroke.js b/js/helper-classes/backup-delete/GLBrushStroke.js
index 5d773c2d..26c922a3 100755
--- a/js/helper-classes/backup-delete/GLBrushStroke.js
+++ b/js/helper-classes/backup-delete/GLBrushStroke.js
@@ -31,6 +31,8 @@ function GLBrushStroke() {
     //stroke information
     this._strokeWidth = 0.0;
     this._strokeColor = [0.4, 0.4, 0.4, 1.0];
+    this._secondStrokeColor = this._strokeColor;
+    this._strokeHardness = 100;
     this._strokeMaterial;
     this._strokeStyle = "Solid";
 
@@ -39,7 +41,7 @@ function GLBrushStroke() {
     this._WETNESS_FACTOR = 0.25;
 
     //prevent extremely long paths that can take a long time to render
-    this._MAX_ALLOWED_SAMPLES = 500;
+    this._MAX_ALLOWED_SAMPLES = 5000;
 
     //drawing context
     this._world = null;
@@ -79,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]);
@@ -106,6 +108,8 @@ function GLBrushStroke() {
     this.setStrokeMaterial = function (m) { this._strokeMaterial = m; }
     this.getStrokeColor = function () { return this._strokeColor; }
     this.setStrokeColor = function (c) { this._strokeColor = c; }
+    this.setSecondStrokeColor = function(c){this._secondStrokeColor=c;}
+    this.setStrokeHardness = function(h){this._strokeHardness=h;}
     this.getStrokeStyle = function () { return this._strokeStyle; }
     this.setStrokeStyle = function (s) { this._strokeStyle = s; }
 
@@ -133,13 +137,14 @@ function GLBrushStroke() {
             this._Points[i][2]+=tz;
         }
     }
-
+    
     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) {
+            //if (numPoints>1) {
+            if (0){
                 var threshold = this._WETNESS_FACTOR*this._strokeWidth;
                 var prevPt = this._Points[0];
                 var prevIndex = 0;
@@ -171,6 +176,44 @@ function GLBrushStroke() {
                 }
             }
 
+            //**** add samples to the long sections of the path --- Catmull-Rom spline interpolation
+            if (numPoints>1) {
+                var numInsertedPoints = 0;
+                var threshold = 5;//0.25*this._strokeWidth; //this determines whether a segment between two sample is too long
+                var prevPt = this._Points[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){
+                        //build the control polygon for the Catmull-Rom spline (prev. 2 points and next 2 points)
+                        var prev = (i===1) ? i-1 : i-2;
+                        var next = (i===numPoints-1) ? i : i+1;
+                        var ctrlPts = [this._Points[prev], this._Points[i-1], this._Points[i], this._Points[next]];
+                        //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 = this._CatmullRomSplineInterpolate(ctrlPts, param);
+                            //insert new point before point i
+                            this._Points.splice(i, 0, newpt);
+                            i++;
+                            numInsertedPoints++;
+                        }
+                        this._dirty=true;
+                    }
+                    prevPt=pt;
+                    //update numPoints to match the new length
+                    numPoints = this._Points.length;
+
+                    //end this function if the numPoints has gone above the max. size specified
+                    if (numPoints> this._MAX_ALLOWED_SAMPLES){
+                        console.log("leaving the resampling because numPoints is greater than limit:"+this._MAX_ALLOWED_SAMPLES);
+                        break;
+                    }
+                }
+                console.log("Inserted "+numInsertedPoints+" additional CatmullRom points");
+            }
             // *** compute the bounding box *********
             this._BBoxMin = [Infinity, Infinity, Infinity];
             this._BBoxMax = [-Infinity, -Infinity, -Infinity];
@@ -331,7 +374,109 @@ function GLBrushStroke() {
         }
         */
 
+        /*
+        //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 startPos = [-this._strokeWidth/2,0];
+        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;//todo figure out the correct formula for the line width
+            if (ctx.lineWidth<2)
+                ctx.lineWidth=2;
+            if (t===numTraces-1){
+                ctx.lineWidth = 1; 
+            }
+            ctx.lineJoin="bevel";
+            ctx.lineCap="butt";
+            //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+")";
+            ctx.translate(disp[0],disp[1]);
+            ctx.beginPath();
+            ctx.moveTo(this._Points[0][0]-bboxMin[0], this._Points[0][1]-bboxMin[1]);
+            for (var i=0;i<numPoints;i++){
+                ctx.lineTo(this._Points[i][0]-bboxMin[0], this._Points[i][1]-bboxMin[1]);
+            }
+            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++){
+            ctx.lineTo(this._Points[i][0]-bboxMin[0], this._Points[i][1]-bboxMin[1]);
+        }
+        ctx.lineWidth=1.0;
+        ctx.strokeStyle = "black";
+        ctx.stroke();
+        */
 
+        var numlayers = this._strokeWidth/2;