diff options
-rwxr-xr-x | js/components/tools-properties/brush-properties.reel/brush-properties.html | 24 | ||||
-rwxr-xr-x | js/components/tools-properties/brush-properties.reel/brush-properties.js | 30 | ||||
-rwxr-xr-x | js/lib/geom/brush-stroke.js | 17 | ||||
-rw-r--r-- | 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 @@ | |||
33 | "maxValue": 100, | 33 | "maxValue": 100, |
34 | "value": 100, | 34 | "value": 100, |
35 | "decimalPlace": 10, | 35 | "decimalPlace": 10, |
36 | "acceptableUnits" : ["px", "pt"] | 36 | "acceptableUnits" : ["%"], |
37 | "units" : "%" | ||
37 | } | 38 | } |
38 | }, | 39 | }, |
39 | 40 | ||
@@ -46,6 +47,20 @@ | |||
46 | "maxValue": 90, | 47 | "maxValue": 90, |
47 | "value": 0, | 48 | "value": 0, |
48 | "decimalPlace": 10, | 49 | "decimalPlace": 10, |
50 | "acceptableUnits" : ["deg."], | ||
51 | "units" : "deg." | ||
52 | } | ||
53 | }, | ||
54 | |||
55 | "smoothingAmountHT": { | ||
56 | "module": "js/components/hottextunit.reel", | ||
57 | "name": "HotTextUnit", | ||
58 | "properties": { | ||
59 | "element": {"#": "smoothingAmount"}, | ||
60 | "minValue": 0, | ||
61 | "maxValue": 100, | ||
62 | "value": 0, | ||
63 | "decimalPlace": 10, | ||
49 | "acceptableUnits" : ["px", "pt"] | 64 | "acceptableUnits" : ["px", "pt"] |
50 | } | 65 | } |
51 | }, | 66 | }, |
@@ -58,8 +73,10 @@ | |||
58 | "_strokeSize": {"@": "strokeSizeHT"}, | 73 | "_strokeSize": {"@": "strokeSizeHT"}, |
59 | "_strokeHardness": {"@": "strokeHardnessHT"}, | 74 | "_strokeHardness": {"@": "strokeHardnessHT"}, |
60 | "_doSmoothing": {"#": "doSmoothing"}, | 75 | "_doSmoothing": {"#": "doSmoothing"}, |
76 | "_smoothingAmount": {"@": "smoothingAmountHT"}, | ||
61 | "_useCalligraphic":{"#": "useCalligraphic"}, | 77 | "_useCalligraphic":{"#": "useCalligraphic"}, |
62 | "_strokeAngle": {"@": "strokeAngleHT"} | 78 | "_strokeAngle": {"@": "strokeAngleHT"}, |
79 | "_angleLabel": {"#": "angleLabel"} | ||
63 | } | 80 | } |
64 | } | 81 | } |
65 | } | 82 | } |
@@ -75,8 +92,9 @@ | |||
75 | <label class="label"> Hardness:</label> | 92 | <label class="label"> Hardness:</label> |
76 | <div id="strokeHardness" class="label"></div> | 93 | <div id="strokeHardness" class="label"></div> |
77 | <label class="label"><input id="doSmoothing" type="checkbox" name="doSmoothingControl" class="checkBoxAlign"/>Smoothing</label> | 94 | <label class="label"><input id="doSmoothing" type="checkbox" name="doSmoothingControl" class="checkBoxAlign"/>Smoothing</label> |
95 | <div id="smoothingAmount" class="label"></div> | ||
78 | <label class="label"><input id="useCalligraphic" type="checkbox" name="useCalligraphicControl" class="checkBoxAlign"/>Calligraphic</label> | 96 | <label class="label"><input id="useCalligraphic" type="checkbox" name="useCalligraphicControl" class="checkBoxAlign"/>Calligraphic</label> |
79 | <label class="label"> Angle:</label> | 97 | <label class="label" id="angleLabel"> Angle:</label> |
80 | <div id="strokeAngle" class="label"></div> | 98 | <div id="strokeAngle" class="label"></div> |
81 | 99 | ||
82 | </div> | 100 | </div> |
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; | |||
9 | var ToolProperties = require("js/components/tools-properties/tool-properties").ToolProperties; | 9 | var ToolProperties = require("js/components/tools-properties/tool-properties").ToolProperties; |
10 | 10 | ||
11 | exports.BrushProperties = Montage.create(ToolProperties, { | 11 | exports.BrushProperties = Montage.create(ToolProperties, { |
12 | _subPrepare: { | ||
13 | value: function() { | ||
14 | this.handleChange(null); | ||
15 | this._useCalligraphic.addEventListener("change", this, false); | ||
16 | this._doSmoothing.addEventListener("change", this, false); | ||
17 | } | ||
18 | }, | ||
19 | handleChange: { | ||
20 | value: function(event) { | ||
21 | if(this._useCalligraphic.checked) { | ||
22 | this._strokeAngle.element.style["display"] = ""; | ||
23 | this._strokeAngle.visible = true; | ||
24 | this._angleLabel.style["display"] = ""; | ||
25 | } else { | ||
26 | this._strokeAngle.element.style["display"] = "none"; | ||
27 | this._strokeAngle.visible = false; | ||
28 | this._angleLabel.style["display"] = "none"; | ||
29 | } | ||
30 | if(this._doSmoothing.checked) { | ||
31 | this._smoothingAmount.element.style["display"] = ""; | ||
32 | this._smoothingAmount.visible = true; | ||
33 | } else { | ||
34 | this._smoothingAmount.element.style["display"] = "none"; | ||
35 | this._smoothingAmount.visible = false; | ||
36 | } | ||
37 | } | ||
38 | }, | ||
12 | strokeSize: { | 39 | strokeSize: { |
13 | get: function() { return this._strokeSize; } | 40 | get: function() { return this._strokeSize; } |
14 | }, | 41 | }, |
@@ -18,6 +45,9 @@ exports.BrushProperties = Montage.create(ToolProperties, { | |||
18 | doSmoothing:{ | 45 | doSmoothing:{ |
19 | get: function() {return this._doSmoothing.checked; } | 46 | get: function() {return this._doSmoothing.checked; } |
20 | }, | 47 | }, |
48 | smoothingAmount:{ | ||
49 | get: function() {return this._smoothingAmount;} | ||
50 | }, | ||
21 | useCalligraphic: { | 51 | useCalligraphic: { |
22 | get: function() {return this._useCalligraphic.checked;} | 52 | get: function() {return this._useCalligraphic.checked;} |
23 | }, | 53 | }, |
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() { | |||
39 | this._strokeDoSmoothing = false; | 39 | this._strokeDoSmoothing = false; |
40 | this._strokeUseCalligraphic = false; | 40 | this._strokeUseCalligraphic = false; |
41 | this._strokeAngle = 0; | 41 | this._strokeAngle = 0; |
42 | 42 | this._strokeAmountSmoothing = 0; | |
43 | //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 | ||
44 | //smaller value means more samples for the path | ||
45 | this._WETNESS_FACTOR = 0.25; | ||
46 | 43 | ||
47 | //threshold that tells us whether two samples are too far apart | 44 | //threshold that tells us whether two samples are too far apart |
48 | this._MAX_SAMPLE_DISTANCE_THRESHOLD = 5; | 45 | this._MAX_SAMPLE_DISTANCE_THRESHOLD = 5; |
@@ -125,7 +122,7 @@ var BrushStroke = function GLBrushStroke() { | |||
125 | //add the point only if it is some epsilon away from the previous point | 122 | //add the point only if it is some epsilon away from the previous point |
126 | var numPoints = this._Points.length; | 123 | var numPoints = this._Points.length; |
127 | if (numPoints>0) { | 124 | if (numPoints>0) { |
128 | var threshold = this._MIN_SAMPLE_DISTANCE_THRESHOLD;//this._WETNESS_FACTOR*this._strokeWidth; | 125 | var threshold = this._MIN_SAMPLE_DISTANCE_THRESHOLD; |
129 | var prevPt = this._Points[numPoints-1]; | 126 | var prevPt = this._Points[numPoints-1]; |
130 | var diffPt = [prevPt[0]-pt[0], prevPt[1]-pt[1]]; | 127 | var diffPt = [prevPt[0]-pt[0], prevPt[1]-pt[1]]; |
131 | var diffPtMag = Math.sqrt(diffPt[0]*diffPt[0] + diffPt[1]*diffPt[1]); | 128 | var diffPtMag = Math.sqrt(diffPt[0]*diffPt[0] + diffPt[1]*diffPt[1]); |
@@ -196,6 +193,10 @@ var BrushStroke = function GLBrushStroke() { | |||
196 | this._strokeDoSmoothing = s; | 193 | this._strokeDoSmoothing = s; |
197 | } | 194 | } |
198 | 195 | ||
196 | this.setSmoothingAmount = function(a){ | ||
197 | this._strokeAmountSmoothing = a; | ||
198 | } | ||
199 | |||
199 | this.setStrokeUseCalligraphic = function(c){ | 200 | this.setStrokeUseCalligraphic = function(c){ |
200 | this._strokeUseCalligraphic = c; | 201 | this._strokeUseCalligraphic = c; |
201 | } | 202 | } |
@@ -252,7 +253,7 @@ var BrushStroke = function GLBrushStroke() { | |||
252 | //**** add samples to the path if needed...linear interpolation for now | 253 | //**** add samples to the path if needed...linear interpolation for now |
253 | //if (numPoints>1) { | 254 | //if (numPoints>1) { |
254 | if (0){ | 255 | if (0){ |
255 | var threshold = this._WETNESS_FACTOR*this._strokeWidth; | 256 | var threshold = this._MAX_SAMPLE_DISTANCE_THRESHOLD; |
256 | var prevPt = this._Points[0]; | 257 | var prevPt = this._Points[0]; |
257 | var prevIndex = 0; | 258 | var prevIndex = 0; |
258 | for (var i=1;i<numPoints;i++){ | 259 | for (var i=1;i<numPoints;i++){ |
@@ -283,7 +284,7 @@ var BrushStroke = function GLBrushStroke() { | |||
283 | } | 284 | } |
284 | } | 285 | } |
285 | 286 | ||
286 | //todo 4-point subdivision iterations over continuous regions of 'long' segments | 287 | //instead of the following, may use 4-point subdivision iterations over continuous regions of 'long' segments |
287 | // look at http://www.gvu.gatech.edu/~jarek/Split&Tweak/ for formula | 288 | // look at http://www.gvu.gatech.edu/~jarek/Split&Tweak/ for formula |
288 | //**** add samples to the long sections of the path --- Catmull-Rom spline interpolation | 289 | //**** add samples to the long sections of the path --- Catmull-Rom spline interpolation |
289 | if (this._strokeDoSmoothing && numPoints>1) { | 290 | if (this._strokeDoSmoothing && numPoints>1) { |
@@ -330,7 +331,7 @@ var BrushStroke = function GLBrushStroke() { | |||
330 | console.log("Inserted "+numInsertedPoints+" additional CatmullRom points"); | 331 | console.log("Inserted "+numInsertedPoints+" additional CatmullRom points"); |
331 | 332 | ||
332 | //now do 3-4 iterations of Laplacian smoothing (setting the points to the average of their neighbors) | 333 | //now do 3-4 iterations of Laplacian smoothing (setting the points to the average of their neighbors) |
333 | var numLaplacianIterations = 3; //todo figure out the proper number of Laplacian iterations (perhaps as a function of stroke width) | 334 | var numLaplacianIterations = this._strokeAmountSmoothing; |
334 | for (var n=0;n<numLaplacianIterations;n++){ | 335 | for (var n=0;n<numLaplacianIterations;n++){ |
335 | newPoints = this._Points; | 336 | newPoints = this._Points; |
336 | for (var i=1;i<numPoints-1;i++){ | 337 | for (var i=1;i<numPoints-1;i++){ |
diff --git a/js/tools/BrushTool.js b/js/tools/BrushTool.js index 4ce9976a..d45d108e 100644 --- a/js/tools/BrushTool.js +++ b/js/tools/BrushTool.js | |||
@@ -85,7 +85,7 @@ exports.BrushTool = Montage.create(ShapeTool, { | |||
85 | 85 | ||
86 | var strokeHardness = 100; | 86 | var strokeHardness = 100; |
87 | if (this.options.strokeHardness){ | 87 | if (this.options.strokeHardness){ |
88 | strokeHardness = ShapesController.GetValueInPixels(this.options.strokeHardness.value, this.options.strokeHardness.units); | 88 | strokeHardness = this.options.strokeHardness.value; |