aboutsummaryrefslogtreecommitdiff
path: root/js
diff options
context:
space:
mode:
authorPushkar Joshi2012-03-13 11:23:32 -0700
committerPushkar Joshi2012-03-13 11:23:32 -0700
commit76f2021618c0a6a99a1b855233e353e84ca99467 (patch)
tree494ee3268c80a79fae97ae39cd4c1e7e9ea4b7ef /js
parent730c42e005b1ebd96448e3bc2dd700ffd8909cb5 (diff)
downloadninja-76f2021618c0a6a99a1b855233e353e84ca99467.tar.gz
Add a smoothing amount parameter, and hide options based on checkboxes
Diffstat (limited to 'js')
-rwxr-xr-xjs/components/tools-properties/brush-properties.reel/brush-properties.html24
-rwxr-xr-xjs/components/tools-properties/brush-properties.reel/brush-properties.js30
-rwxr-xr-xjs/lib/geom/brush-stroke.js17
-rw-r--r--js/tools/BrushTool.js9
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;
9var ToolProperties = require("js/components/tools-properties/tool-properties").ToolProperties; 9var ToolProperties = require("js/components/tools-properties/tool-properties").ToolProperties;
10 10
11exports.BrushProperties = Montage.create(ToolProperties, { 11exports.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;