From 76f2021618c0a6a99a1b855233e353e84ca99467 Mon Sep 17 00:00:00 2001 From: Pushkar Joshi Date: Tue, 13 Mar 2012 11:23:32 -0700 Subject: Add a smoothing amount parameter, and hide options based on checkboxes --- .../brush-properties.reel/brush-properties.html | 24 ++++++++++++++--- .../brush-properties.reel/brush-properties.js | 30 ++++++++++++++++++++++ js/lib/geom/brush-stroke.js | 17 ++++++------ js/tools/BrushTool.js | 9 ++++--- 4 files changed, 66 insertions(+), 14 deletions(-) diff --git a/js/components/tools-properties/brush-properties.reel/brush-properties.html b/js/components/tools-properties/brush-properties.reel/brush-properties.html index 608111bd..cbe4c242 100755 --- a/js/components/tools-properties/brush-properties.reel/brush-properties.html +++ b/js/components/tools-properties/brush-properties.reel/brush-properties.html @@ -33,7 +33,8 @@ "maxValue": 100, "value": 100, "decimalPlace": 10, - "acceptableUnits" : ["px", "pt"] + "acceptableUnits" : ["%"], + "units" : "%" } }, @@ -46,6 +47,20 @@ "maxValue": 90, "value": 0, "decimalPlace": 10, + "acceptableUnits" : ["deg."], + "units" : "deg." + } + }, + + "smoothingAmountHT": { + "module": "js/components/hottextunit.reel", + "name": "HotTextUnit", + "properties": { + "element": {"#": "smoothingAmount"}, + "minValue": 0, + "maxValue": 100, + "value": 0, + "decimalPlace": 10, "acceptableUnits" : ["px", "pt"] } }, @@ -58,8 +73,10 @@ "_strokeSize": {"@": "strokeSizeHT"}, "_strokeHardness": {"@": "strokeHardnessHT"}, "_doSmoothing": {"#": "doSmoothing"}, + "_smoothingAmount": {"@": "smoothingAmountHT"}, "_useCalligraphic":{"#": "useCalligraphic"}, - "_strokeAngle": {"@": "strokeAngleHT"} + "_strokeAngle": {"@": "strokeAngleHT"}, + "_angleLabel": {"#": "angleLabel"} } } } @@ -75,8 +92,9 @@
+
- +
diff --git a/js/components/tools-properties/brush-properties.reel/brush-properties.js b/js/components/tools-properties/brush-properties.reel/brush-properties.js index e6faa0f0..fdcd50f8 100755 --- a/js/components/tools-properties/brush-properties.reel/brush-properties.js +++ b/js/components/tools-properties/brush-properties.reel/brush-properties.js @@ -9,6 +9,33 @@ var Component = require("montage/ui/component").Component; var ToolProperties = require("js/components/tools-properties/tool-properties").ToolProperties; exports.BrushProperties = Montage.create(ToolProperties, { + _subPrepare: { + value: function() { + this.handleChange(null); + this._useCalligraphic.addEventListener("change", this, false); + this._doSmoothing.addEventListener("change", this, false); + } + }, + handleChange: { + value: function(event) { + if(this._useCalligraphic.checked) { + this._strokeAngle.element.style["display"] = ""; + this._strokeAngle.visible = true; + this._angleLabel.style["display"] = ""; + } else { + this._strokeAngle.element.style["display"] = "none"; + this._strokeAngle.visible = false; + this._angleLabel.style["display"] = "none"; + } + if(this._doSmoothing.checked) { + this._smoothingAmount.element.style["display"] = ""; + this._smoothingAmount.visible = true; + } else { + this._smoothingAmount.element.style["display"] = "none"; + this._smoothingAmount.visible = false; + } + } + }, strokeSize: { get: function() { return this._strokeSize; } }, @@ -18,6 +45,9 @@ exports.BrushProperties = Montage.create(ToolProperties, { doSmoothing:{ get: function() {return this._doSmoothing.checked; } }, + smoothingAmount:{ + get: function() {return this._smoothingAmount;} + }, useCalligraphic: { get: function() {return this._useCalligraphic.checked;} }, diff --git a/js/lib/geom/brush-stroke.js b/js/lib/geom/brush-stroke.js index 4c42539a..52f81ffe 100755 --- a/js/lib/geom/brush-stroke.js +++ b/js/lib/geom/brush-stroke.js @@ -39,10 +39,7 @@ var BrushStroke = function GLBrushStroke() { this._strokeDoSmoothing = false; this._strokeUseCalligraphic = false; this._strokeAngle = 0; - - //the wetness of the brush (currently this is multiplied to the square of the stroke width, but todo should be changed to not depend on stroke width entirely - //smaller value means more samples for the path - this._WETNESS_FACTOR = 0.25; + this._strokeAmountSmoothing = 0; //threshold that tells us whether two samples are too far apart this._MAX_SAMPLE_DISTANCE_THRESHOLD = 5; @@ -125,7 +122,7 @@ var BrushStroke = 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._MIN_SAMPLE_DISTANCE_THRESHOLD;//this._WETNESS_FACTOR*this._strokeWidth; + var threshold = this._MIN_SAMPLE_DISTANCE_THRESHOLD; 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]); @@ -196,6 +193,10 @@ var BrushStroke = function GLBrushStroke() { this._strokeDoSmoothing = s; } + this.setSmoothingAmount = function(a){ + this._strokeAmountSmoothing = a; + } + this.setStrokeUseCalligraphic = function(c){ this._strokeUseCalligraphic = c; } @@ -252,7 +253,7 @@ var BrushStroke = function GLBrushStroke() { //**** add samples to the path if needed...linear interpolation for now //if (numPoints>1) { if (0){ - var threshold = this._WETNESS_FACTOR*this._strokeWidth; + var threshold = this._MAX_SAMPLE_DISTANCE_THRESHOLD; var prevPt = this._Points[0]; var prevIndex = 0; for (var i=1;i1) { @@ -330,7 +331,7 @@ var BrushStroke = function GLBrushStroke() { console.log("Inserted "+numInsertedPoints+" additional CatmullRom points"); //now do 3-4 iterations of Laplacian smoothing (setting the points to the average of their neighbors) - var numLaplacianIterations = 3; //todo figure out the proper number of Laplacian iterations (perhaps as a function of stroke width) + var numLaplacianIterations = this._strokeAmountSmoothing; for (var n=0;n1) { - if (0){ - var threshold = this._MAX_SAMPLE_DISTANCE_THRESHOLD; - var prevPt = this._Points[0]; - var prevIndex = 0; - for (var i=1;ithreshold){ - //insert points along the prev. to current point - var numNewPoints = Math.floor(distance/threshold); - for (var j=0;j this._MAX_ALLOWED_SAMPLES){ - console.log("leaving the resampling because numPoints is greater than limit:"+this._MAX_ALLOWED_SAMPLES); - break; + var numPoints = this._Points.length; + if (this._addedSamples === false){ + //**** add samples to the long sections of the path --- Catmull-Rom spline interpolation ***** + // instead of the following, may use 4-point subdivision iterations over continuous regions of 'long' segments + // look at http://www.gvu.gatech.edu/~jarek/Split&Tweak/ for formula + + var numInsertedPoints = 0; + var newSampledPoints = []; + var threshold = this._MAX_SAMPLE_DISTANCE_THRESHOLD;//this determines whether a segment between two sample is long enough to warrant checking for angle + var prevPt = this._Points[0]; + newSampledPoints.push(this._Points[0]); + for (var i=1;ithreshold){ + //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 this._MAX_ALLOWED_SAMPLES){ + // console.log("leaving the resampling because numPoints is greater than limit:"+this._MAX_ALLOWED_SAMPLES); + // break; + //} } + this._Points = newSampledPoints.slice(0); + newSampledPoints = []; + console.log("Inserted "+numInsertedPoints+" additional CatmullRom points"); + this._addedSamples = true; + this._dirty=true; + } + //build a copy of the original points...this should be done only once + if (this._storedOrigPoints === false) { + this._OrigPoints = this._Points.slice(0); + this._storedOrigPoints = true; + } - //instead of the following, may use 4-point subdivision iterations over continuous regions of 'long' segments - // look at http://www.gvu.gatech.edu/~jarek/Split&Tweak/ for formula - //**** add samples to the long sections of the path --- Catmull-Rom spline interpolation + if (this._dirty) { + this._Points = this._OrigPoints.slice(0); + numPoints = this._Points.length; if (this._strokeDoSmoothing && numPoints>1) { - var numInsertedPoints = 0; - var newPoints = []; - var threshold = this._MAX_SAMPLE_DISTANCE_THRESHOLD;//this determines whether a segment between two sample is long enough to warrant checking for angle - var prevPt = this._Points[0]; - newPoints.push(this._Points[0]); - for (var i=1;ithreshold){ - //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 this._MAX_ALLOWED_SAMPLES){ - console.log("leaving the resampling because numPoints is greater than limit:"+this._MAX_ALLOWED_SAMPLES); - break; - } - } - this._Points = newPoints; - numPoints = this._Points.length; - console.log("Inserted "+numInsertedPoints+" additional CatmullRom points"); - - //now do 3-4 iterations of Laplacian smoothing (setting the points to the average of their neighbors) - var numLaplacianIterations = this._strokeAmountSmoothing; + //iterations of Laplacian smoothing (setting the points to the average of their neighbors) + var numLaplacianIterations = this._strokeAmountSmoothing; for (var n=0;n */ -// Todo: This entire class should be converted to a module var VecUtils = require("js/helper-classes/3D/vec-utils").VecUtils; var GeomObj = require("js/lib/geom/geom-obj").GeomObj; +var CanvasController = require("js/controllers/elements/canvas-controller").CanvasController; + +// Todo: This entire class should be converted to a module /////////////////////////////////////////////////////////////////////// // Class GLBrushStroke @@ -28,7 +30,10 @@ var BrushStroke = function GLBrushStroke() { //whether or not to use the canvas drawing to stroke/fill this._useCanvasDrawing = true; - //the X and Y location of this subpath's canvas in stage world space of Ninja + //the HTML5 canvas that holds this brush stroke + this._canvas = null; + + //the X and Y location of this brush stroke canvas in stage world space of Ninja this._canvasX = 0; this._canvasY = 0; @@ -65,6 +70,10 @@ var BrushStroke = function GLBrushStroke() { ///////////////////////////////////////////////////////// // Property Accessors/Setters ///////////////////////////////////////////////////////// + this.setCanvas = function(c) { + this._canvas = c; + } + this.setWorld = function (world) { this._world = world; }; @@ -195,6 +204,9 @@ var BrushStroke = function GLBrushStroke() { this._dirty = true; } } + this.getStrokeHardness = function(){ + return this._strokeHardness; + } this.setDoSmoothing = function(s){ if (this._strokeDoSmoothing!==s) { @@ -203,12 +215,19 @@ var BrushStroke = function GLBrushStroke() { } } + this.getDoSmoothing = function(){ + return this._strokeDoSmoothing; + } + this.setSmoothingAmount = function(a){ if (this._strokeAmountSmoothing!==a) { this._strokeAmountSmoothing = a; this._dirty = true; } + } + this.getSmoothingAmount = function(){ + return this._strokeAmountSmoothing; } this.setStrokeUseCalligraphic = function(c){ @@ -225,6 +244,14 @@ var BrushStroke = function GLBrushStroke() { }; } + this.getStrokeUseCalligraphic = function(){ + return this._strokeUseCalligraphic; + } + + this.getStrokeAngle = function(){ + this._strokeAngle = a; + } + this.getStrokeStyle = function () { return this._strokeStyle; }; @@ -301,12 +328,13 @@ var BrushStroke = function GLBrushStroke() { console.log("Inserted "+numInsertedPoints+" additional CatmullRom points"); this._addedSamples = true; this._dirty=true; - } + } //if we need to add samples to this curve (done only once) + //build a copy of the original points...this should be done only once if (this._storedOrigPoints === false) { this._OrigPoints = this._Points.slice(0); this._storedOrigPoints = true; - } + } //if we need to store a copy of the original points (done only once) if (this._dirty) { this._Points = this._OrigPoints.slice(0); @@ -377,7 +405,7 @@ var BrushStroke = function GLBrushStroke() { // get the context var ctx = world.get2DContext(); - if (!ctx) throw ("null context in brushstroke render") + if (!ctx) throw ("null context in brushstroke render"); var numPoints = this.getNumPoints(); if (numPoints === 0) { @@ -391,6 +419,14 @@ var BrushStroke = function GLBrushStroke() { var bboxMax = this.getBBoxMax(); var bboxWidth = bboxMax[0] - bboxMin[0]; var bboxHeight = bboxMax[1] - bboxMin[1]; + + //assign the new width and height as the canvas dimensions through the canvas controller + if (this._canvas) { + CanvasController.setProperty(this._canvas, "width", bboxWidth+"px"); + CanvasController.setProperty(this._canvas, "height", bboxHeight+"px"); + this._canvas.elementModel.shapeModel.GLWorld.setViewportFromCanvas(this._canvas); + } + ctx.clearRect(0, 0, bboxWidth, bboxHeight); if (this._strokeUseCalligraphic) { diff --git a/js/lib/geom/sub-path.js b/js/lib/geom/sub-path.js index 017cca92..e95be0e7 100755 --- a/js/lib/geom/sub-path.js +++ b/js/lib/geom/sub-path.js @@ -6,7 +6,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot var VecUtils = require("js/helper-classes/3D/vec-utils").VecUtils; - +var CanvasController = require("js/controllers/elements/canvas-controller").CanvasController; var GeomObj = require("js/lib/geom/geom-obj").GeomObj; var AnchorPoint = require("js/lib/geom/anchor-point").AnchorPoint; var MaterialsModel = require("js/models/materials-model").MaterialsModel; @@ -61,6 +61,9 @@ var GLSubpath = function GLSubpath() { //whether or not to use the canvas drawing to stroke/fill this._useCanvasDrawing = true; + //the canvas that will draw this subpath + this._canvas = null; + //the X and Y location of this subpath's canvas in stage world space of Ninja this._canvasX = 0; this._canvasY = 0; @@ -131,6 +134,11 @@ var GLSubpath = function GLSubpath() { var bboxHeight = bboxMax[1] - bboxMin[1]; var bboxMid = [0.5 * (bboxMax[0] + bboxMin[0]), 0.5 * (bboxMax[1] + bboxMin[1]), 0.5 * (bboxMax[2] + bboxMin[2])]; + if (this._canvas) { + CanvasController.setProperty(this._canvas, "width", bboxWidth+"px"); + CanvasController.setProperty(this._canvas, "height", bboxHeight+"px"); + this._canvas.elementModel.shapeModel.GLWorld.setViewportFromCanvas(this._canvas); + } ctx.clearRect(0, 0, bboxWidth, bboxHeight); ctx.lineWidth = this._strokeWidth; @@ -144,6 +152,7 @@ var GLSubpath = function GLSubpath() { //ctx.fillStyle = MathUtils.colorToHex( this._fillColor ); var fillColorStr = "rgba("+parseInt(255*this._fillColor[0])+","+parseInt(255*this._fillColor[1])+","+parseInt(255*this._fillColor[2])+","+this._fillColor[3]+")"; ctx.fillStyle = fillColorStr; + console.log("Fill color:" + fillColorStr); } var lineCap = ['butt','round','square']; ctx.lineCap = lineCap[1]; @@ -256,6 +265,10 @@ GLSubpath.prototype = new GeomObj(); ///////////////////////////////////////////////////////// // Property Accessors/Setters ///////////////////////////////////////////////////////// +GLSubpath.prototype.setCanvas = function (c) { + this._canvas = c; +}; + GLSubpath.prototype.setWorld = function (world) { this._world = world; }; @@ -773,6 +786,7 @@ GLSubpath.prototype.getStrokeWidth = function () { GLSubpath.prototype.setStrokeWidth = function (w) { this._strokeWidth = w; + this._dirty=true; }; GLSubpath.prototype.getStrokeMaterial = function () { diff --git a/js/tools/BrushTool.js b/js/tools/BrushTool.js index c93672a9..90010cdf 100644 --- a/js/tools/BrushTool.js +++ b/js/tools/BrushTool.js @@ -266,6 +266,7 @@ exports.BrushTool = Montage.create(ShapeTool, { var brushStroke = this._selectedBrushStroke; if (brushStroke){ brushStroke.setWorld(world); + brushStroke.setCanvas(newCanvas); brushStroke.setPlaneMatrix(planeMat); var planeMatInv = glmat4.inverse( planeMat, [] ); diff --git a/js/tools/PenTool.js b/js/tools/PenTool.js index e239b3f1..779b7f16 100755 --- a/js/tools/PenTool.js +++ b/js/tools/PenTool.js @@ -467,9 +467,9 @@ exports.PenTool = Montage.create(ShapeTool, { if (this.application.ninja.colorController.colorToolbar.stroke.webGlColor){ this._selectedSubpath.setStrokeColor(this.application.ninja.colorController.colorToolbar.stroke.webGlColor); } - //if (this.application.ninja.colorController.colorToolbar.fill.webGlColor){ - // this._selectedSubpath.setFillColor(this.application.ninja.colorController.colorToolbar.fill.webGlColor); - //} + if (this.application.ninja.colorController.colorToolbar.fill.webGlColor){ + this._selectedSubpath.setFillColor(this.application.ninja.colorController.colorToolbar.fill.webGlColor); + } } //if this is a new path being rendered this._selectedSubpath.makeDirty(); @@ -594,6 +594,7 @@ exports.PenTool = Montage.create(ShapeTool, { var subpath = this._selectedSubpath; //new GLSubpath(); subpath.setWorld(world); + subpath.setCanvas(newCanvas); subpath.setPlaneMatrix(planeMat); var planeMatInv = glmat4.inverse( planeMat, [] ); subpath.setPlaneMatrixInverse(planeMatInv); @@ -614,7 +615,7 @@ exports.PenTool = Montage.create(ShapeTool, { if(strokeColor) { newCanvas.elementModel.shapeModel.border = this.application.ninja.colorController.colorToolbar.stroke; } - newCanvas.elementModel.shapeModel.strokeMaterial = this._selectedBrushStroke.getStrokeMaterial(); + newCanvas.elementModel.shapeModel.strokeMaterial = subpath.getStrokeMaterial(); newCanvas.elementModel.shapeModel.GLGeomObj = subpath; newCanvas.elementModel.shapeModel.useWebGl = this.options.use3D; -- cgit v1.2.3 From 8e29172990126b3d3857be5d18bb6985d4cf57ca Mon Sep 17 00:00:00 2001 From: Pushkar Joshi Date: Mon, 19 Mar 2012 10:07:47 -0700 Subject: first pass for file IO of brush strokes --- js/lib/geom/brush-stroke.js | 50 ++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 47 insertions(+), 3 deletions(-) diff --git a/js/lib/geom/brush-stroke.js b/js/lib/geom/brush-stroke.js index 02a39ccd..ec2521ab 100755 --- a/js/lib/geom/brush-stroke.js +++ b/js/lib/geom/brush-stroke.js @@ -388,7 +388,8 @@ var BrushStroke = function GLBrushStroke() { this._BBoxMax[d]+= bboxPadding; }//for every dimension d from 0 to 2 } - } + + } //if this was dirty this._dirty = false; }; @@ -512,12 +513,55 @@ var BrushStroke = function GLBrushStroke() { }; //render() + this.exportJSON = function(){ + var retObject= new Object(); + retObject.geomType = this.geomType(); + retObject.points = this._Points; + retObject.planeCenter = this._planeCenter; + retObject.planeMat = this._planeMat; + retObject.planeMatInv = this._planeMatInv; + retObject.strokeWidth = this._strokeWidth; + retObject.strokeColor = this._strokeColor; + retObject.secondStrokeColor = this._secondStrokeColor; + retObject.strokeHardness = this._strokeHardness; + retObject.strokeDoSmoothing = this._strokeDoSmoothing; + retObject.strokeUseCalligraphic = this._strokeUseCalligraphic; + retObject.strokeAngle = this._strokeAngle; + retObject.strokeAmountSmoothing = this._strokeAmountSmoothing; + return retObject; + }; + + this.importJSON = function(jo){ + if (this.geomType()!== jo.geomType){ + return; + } + this._Points = jo.points.splice(0); //todo is this splice necessary? + this._planeCenter = jo.planeCenter; + this._planeMat = jo.planeMat; + this._planeMatInv = jo.planeMatInv ; + this._strokeWidth = jo.strokeWidth; + this._strokeColor = jo.strokeColor; + this._secondStrokeColor = jo.secondStrokeColor; + this._strokeHardness = jo.strokeHardness; + this._strokeDoSmoothing = jo.strokeDoSmoothing; + this._strokeUseCalligraphic = jo.strokeUseCalligraphic; + this._strokeAngle = jo.strokeAngle; + this._strokeAmountSmoothing = jo.strokeAmountSmoothing; + + //force a re-computation of meta-geometry before rendering + this._isDirty = true; + }; + + this.export = function() { - return "type: " + this.geomType() + "\n"; + var jsonObject = this.exportJSON(); + var stringified = JSON.stringify(jsonObject); + return "type: " + this.geomType() + "\n" + stringified; }; this.import = function( importStr ) { - + var jsonObject = JSON.parse(importStr); + this.importJSON(jsonObject); } this.collidesWithPoint = function (x, y, z) { -- cgit v1.2.3 From c0bd8d8efcc501d4efa116a7cc0e802fd4e9f3e9 Mon Sep 17 00:00:00 2001 From: Pushkar Joshi Date: Mon, 19 Mar 2012 11:05:05 -0700 Subject: draw the brush stroke in realtime --- js/lib/geom/brush-stroke.js | 31 ++++++++++++++++--------------- js/tools/BrushTool.js | 16 +++------------- 2 files changed, 19 insertions(+), 28 deletions(-) diff --git a/js/lib/geom/brush-stroke.js b/js/lib/geom/brush-stroke.js index ec2521ab..68b9110f 100755 --- a/js/lib/geom/brush-stroke.js +++ b/js/lib/geom/brush-stroke.js @@ -249,7 +249,7 @@ var BrushStroke = function GLBrushStroke() { } this.getStrokeAngle = function(){ - this._strokeAngle = a; + return this._strokeAngle; } this.getStrokeStyle = function () { @@ -429,7 +429,12 @@ var BrushStroke = function GLBrushStroke() { } ctx.clearRect(0, 0, bboxWidth, bboxHeight); + this.drawToContext(ctx, bboxMin[0], bboxMin[1]); + ctx.restore(); + } //this.render() + this.drawToContext = function(ctx, origX, origY){ + var numPoints = this.getNumPoints(); if (this._strokeUseCalligraphic) { //build the stamp for the brush stroke var t=0; @@ -453,13 +458,11 @@ var BrushStroke = function GLBrushStroke() { ctx.lineCap="butt"; ctx.globalCompositeOperation = 'source-over'; ctx.globalAlpha = this._strokeColor[3]; - //ctx.lineWidth=this._strokeWidth/10;//todo figure out the correct formula for the line width - //if (ctx.lineWidth<2) + //todo figure out the correct formula for the line width ctx.lineWidth=2; if (t===numTraces-1){ ctx.lineWidth = 1; } - for (t=0;t