runtime version of the brush stroke (similar to the pen paths, this seems to not work unless we run it through the debugger)

1 files changed, 200 insertions, 1 deletions

diff --git a/assets/canvas-runtime.js b/assets/canvas-runtime.js
index 3ed7ed0f..dab1c444 100644
--- a/assets/canvas-runtime.js
+++ b/assets/canvas-runtime.js
@@ -382,6 +382,12 @@ NinjaCvsRt.GLRuntime = Object.create(Object.prototype, {
                     obj = Object.create(NinjaCvsRt.RuntimeSubPath, {_materials: { value:[], writable:true}});
                     obj.importJSON (jObj );
                     break;
+
+                case 6:     //brushstroke (created by brush tool)
+                    obj = Object.create(NinjaCvsRt.RuntimeBrushStroke, {_materials: { value:[], writable:true}});
+                    obj.importJSON (jObj );
+                    break;
+
                 default:
                     throw new Error( "Attempting to load unrecognized object type: " + type );
                     break;
@@ -524,6 +530,7 @@ NinjaCvsRt.RuntimeGeomObj = Object.create(Object.prototype, {
     GEOM_TYPE_LINE: { value: 3, writable: false },
     GEOM_TYPE_PATH: { value: 4, writable: false },
     GEOM_TYPE_CUBIC_BEZIER: { value: 5, writable: false },
+    GEOM_TYPE_BRUSH_STROKE: { value: 6, writable: false },
     GEOM_TYPE_UNDEFINED: { value: -1, writable: false },
 
     ///////////////////////////////////////////////////////////////////////
@@ -2006,8 +2013,200 @@ NinjaCvsRt.RuntimeSubPath = Object.create(NinjaCvsRt.RuntimeGeomObj, {
             ctx.restore();
         }
     }
-});// **************************************************************************
+});
+
+// **************************************************************************
 // END runtime for the pen tool path
 // **************************************************************************
 
 
+// ***************************************************************************
+// runtime for brush tool brush stroke
+// ***************************************************************************
+
+NinjaCvsRt.RuntimeBrushStroke = Object.create(NinjaCvsRt.RuntimeGeomObj, {
+    // array of brush stroke points
+    _LocalPoints: { value: null, writable: true },
+    _OrigLocalPoints: {value: null, writable: true},
+
+    _strokeWidth: {value: 0, writable: true},
+    _strokeColor: {value: null, writable: true},
+    _strokeWidth: {value: 0, writable: true},
+    _strokeColor: {value: 0, writable: true},
+    _strokeHardness: {value: 0, writable: true},
+    _strokeUseCalligraphic : {value: 0, writable: true},
+    _strokeAngle : {value: 0, writable: true},
+
+    //stroke smoothing properties
+    _strokeDoSmoothing: {value: 0, writable: true},
+    _strokeAmountSmoothing : {value: 0, writable: true},
+
+    geomType: {
+        value: function () {
+            return this.GEOM_TYPE_BRUSH_STROKE;
+        }
+    },
+
+    _copyCoordinates3D: {
+        value: function(srcCoord, destCoord){
+            var i=0;
+            var numPoints = srcCoord.length;
+            for (i=0;i<numPoints;i++){
+                destCoord[i] = [srcCoord[i][0],srcCoord[i][1],srcCoord[i][2]];
+            }
+        }
+    },
+
+    _doSmoothing: {
+        value: function() {
+            var numPoints = this._LocalPoints.length;
+            if (this._strokeDoSmoothing && numPoints>1) {
+                this._copyCoordinates3D(this._OrigLocalPoints, this._LocalPoints);
+                //iterations of Laplacian smoothing (setting the points to the average of their neighbors)
+                var numLaplacianIterations = this._strokeAmountSmoothing;
+                for (var n=0;n<numLaplacianIterations;n++){
+                    var newPoints = this._LocalPoints.slice(0); //I think this performs a copy by reference, which would make the following a SOR step
+                    for (var i=1;i<numPoints-1;i++) {
+                        var avgPos = [  0.5*(this._LocalPoints[i-1][0] + this._LocalPoints[i+1][0]),
+                            0.5*(this._LocalPoints[i-1][1] + this._LocalPoints[i+1][1]),
+                            0.5*(this._LocalPoints[i-1][2] + this._LocalPoints[i+1][2])] ;
+                        newPoints[i] = avgPos;
+                    }
+                    this._LocalPoints = newPoints.slice(0);
+                }
+            }
+        }
+    },
+
+    importJSON: {
+        value: function(jo) {
+            if (this.geomType()!== jo.geomType){
+                return;
+            }
+            //the geometry for this object
+            this._LocalPoints = jo.localPoints.slice(0);
+            this._OrigLocalPoints = jo.origLocalPoints.slice(0);
+            this._copyCoordinates3D(jo.localPoints, this._LocalPoints); //todo is this necessary in addition to the slice(0) above?
+            this._copyCoordinates3D(jo.origLocalPoints, this._OrigLocalPoints); //todo <ditto>
+
+            //stroke appearance properties
+            this._strokeWidth = jo.strokeWidth;
+            this._strokeColor = jo.strokeColor;
+            this._strokeHardness = jo.strokeHardness;
+            this._strokeUseCalligraphic = jo.strokeUseCalligraphic;
+            this._strokeAngle = jo.strokeAngle;
+
+            //stroke smoothing properties
+            this._strokeDoSmoothing = jo.strokeDoSmoothing;
+            this._strokeAmountSmoothing = jo.strokeAmountSmoothing;
+
+            this._doSmoothing();      //after smoothing, the stroke is ready to be rendered
+        }
+    },
+
+    render: {
+        value: function() {
+            // get the world
+            var world = this.getWorld();
+            if (!world)  {
+                throw( "null world in brush stroke render" );
+                return;
+            }
+
+             // get the context
+            var ctx = world.get2DContext();
+            if (!ctx)  {
+                throw( "null world in brush stroke render" );
+                return;
+            }
+
+            ctx.save();
+
+            //**** BEGIN RENDER CODE BLOCK ****
+            var points = this._LocalPoints;
+            var numPoints = points.length;
+            var tempP, p;
+            if (this._strokeUseCalligraphic) {
+                //build the stamp for the brush stroke
+                var t=0;
+                var numTraces = this._strokeWidth;
+                var halfNumTraces = numTraces*0.5;
+                var opaqueRegionHalfWidth = 0.5*this._strokeHardness*numTraces*0.01; //the 0.01 is to convert the strokeHardness from [0,100] to [0,1]
+                var maxTransparentRegionHalfWidth = halfNumTraces-opaqueRegionHalfWidth;
+
+                //build an angled (calligraphic) brush stamp
+                var deltaDisplacement = [Math.cos(this._strokeAngle),Math.sin(this._strokeAngle)];
+                deltaDisplacement = VecUtils.vecNormalize(2, deltaDisplacement, 1);
+                var startPos = [-halfNumTraces*deltaDisplacement[0],-halfNumTraces*deltaDisplacement[1]];
+
+                var brushStamp = [];
+                for (t=0;t<numTraces;t++){
+                    var brushPt = [startPos[0]+t*deltaDisplacement[0], startPos[1]+t*deltaDisplacement[1]];
+                    brushStamp.push(brushPt);
+                }
+
+                ctx.lineJoin="bevel";
+                ctx.lineCap="butt";
+                ctx.globalCompositeOperation = 'source-over';
+                ctx.globalAlpha = this._strokeColor[3];
+
+                for (t=0;t<numTraces;t++){
+                    var disp = [brushStamp[t][0], brushStamp[t][1]];
+                    var alphaVal = 1.0;
+                    var distFromOpaqueRegion = Math.abs(t-halfNumTraces) - opaqueRegionHalfWidth;
+                    if (distFromOpaqueRegion>0) {
+                        var transparencyFactor = distFromOpaqueRegion/maxTransparentRegionHalfWidth;
+                        alphaVal = 1.0 - transparencyFactor;//(transparencyFactor*transparencyFactor);//the square term produces nonlinearly varying alpha values
+                        alphaVal *= 0.5; //factor that accounts for lineWidth == 2
+                    }
+                    ctx.save();
+                    if (t === (numTraces-1) || t === 0){
+                        ctx.lineWidth = 1;
+                    } else {
+                        ctx.lineWidth=2;
+                    }
+                    ctx.strokeStyle="rgba("+parseInt(255*this._strokeColor[0])+","+parseInt(255*this._strokeColor[1])+","+parseInt(255*this._strokeColor[2])+","+alphaVal+")";
+                    ctx.translate(disp[0],disp[1]);
+                    ctx.beginPath();
+                    p = points[0];
+                    ctx.moveTo(p[0],p[1]);
+                    for (var i=0;i<numPoints;i++){
+                        p = points[i];
+                        ctx.lineTo(p[0],p[1]);
+                    }
+                    ctx.stroke();
+                    ctx.restore();
+                }
+            } else {
+                ctx.globalCompositeOperation = 'lighter'; //we wish to add up the colors
+                ctx.globalAlpha = this._strokeColor[3];
+                ctx.lineCap = "round";
+                ctx.lineJoin="round";
+                var minStrokeWidth = (this._strokeHardness*this._strokeWidth)/100; //the hardness is the percentage of the stroke width that's fully opaque
+                var numlayers = 1 + Math.ceil((this._strokeWidth-minStrokeWidth)*0.5);
+                var alphaVal = 1.0/(numlayers); //this way the alpha at the first path will be 1
+                ctx.strokeStyle="rgba("+parseInt(255*this._strokeColor[0])+","+parseInt(255*this._strokeColor[1])+","+parseInt(255*this._strokeColor[2])+","+alphaVal+")";
+                for (var l=0;l<numlayers;l++){
+                    ctx.beginPath();
+                    p = points[0];
+                    ctx.moveTo(p[0],p[1]);
+                    if (numPoints===1){
+                        //display a tiny segment as a single point
+                       ctx.lineTo(p[0],p[1]+0.01);
+                    }
+                    for (var i=1;i<numPoints;i++){
+                        p = points[i];
+                        ctx.lineTo(p[0],p[1]);
+                    }
+                    ctx.lineWidth=2*l+minStrokeWidth;
+                    ctx.stroke();
+                }//for every layer l
+            } //if there is no calligraphic stroke
+
+            //**** END RENDER CODE BLOCK ****
+
+            ctx.restore();
+        }
+    }
+});
+