aboutsummaryrefslogtreecommitdiff
path: root/js
diff options
context:
space:
mode:
authorPushkar Joshi2012-03-07 14:33:21 -0800
committerPushkar Joshi2012-03-07 14:33:21 -0800
commit703fb3d06e88257ac73c1d1a0ec6ca33a64f4371 (patch)
tree440d068584f7ccda73368b4857189f8b528e6416 /js
parent353bfa04a6153b0146a0c73b6e6bb0e5f4b23194 (diff)
downloadninja-703fb3d06e88257ac73c1d1a0ec6ca33a64f4371.tar.gz
implement stroke hardness such that it is percentage of the stroke width that's fully the color of the brush
AND add a smoothing flag for the brush options
Diffstat (limited to 'js')
-rwxr-xr-xjs/components/tools-properties/brush-properties.reel/brush-properties.html4
-rwxr-xr-xjs/components/tools-properties/brush-properties.reel/brush-properties.js3
-rwxr-xr-xjs/lib/geom/brush-stroke.js66
-rw-r--r--js/tools/BrushTool.js6
4 files changed, 31 insertions, 48 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 af07b3f2..6d4852e6 100755
--- a/js/components/tools-properties/brush-properties.reel/brush-properties.html
+++ b/js/components/tools-properties/brush-properties.reel/brush-properties.html
@@ -43,7 +43,8 @@
43 "properties": { 43 "properties": {
44 "element": {"#": "brushProperties"}, 44 "element": {"#": "brushProperties"},
45 "_strokeSize": {"@": "strokeSizeHT"}, 45 "_strokeSize": {"@": "strokeSizeHT"},
46 "_strokeHardness": {"@": "strokeHardnessHT"} 46 "_strokeHardness": {"@": "strokeHardnessHT"},
47 "_doSmoothing": {"@": "doSmoothing"}
47 } 48 }
48 } 49 }
49 } 50 }
@@ -58,6 +59,7 @@
58 <div id="strokeSize" class="label"></div> 59 <div id="strokeSize" class="label"></div>
59 <label class="label"> Hardness:</label> 60 <label class="label"> Hardness:</label>
60 <div id="strokeHardness" class="label"></div> 61 <div id="strokeHardness" class="label"></div>
62 <label class="label subOption optionLabel"><input id="doSmoothing" type="checkbox" name="doSmoothingControl" class="checkBoxAlign"/>Smoothing</label>
61 </div> 63 </div>
62 </div> 64 </div>
63 </body> 65 </body>
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 d2fcf888..0ce685b5 100755
--- a/js/components/tools-properties/brush-properties.reel/brush-properties.js
+++ b/js/components/tools-properties/brush-properties.reel/brush-properties.js
@@ -14,5 +14,8 @@ exports.BrushProperties = Montage.create(ToolProperties, {
14 }, 14 },
15 strokeHardness: { 15 strokeHardness: {
16 get: function() { return this._strokeHardness; } 16 get: function() { return this._strokeHardness; }
17 },
18 doSmoothing:{
19 get: function() {return this._doSmoothing; }
17 } 20 }
18}); 21});
diff --git a/js/lib/geom/brush-stroke.js b/js/lib/geom/brush-stroke.js
index 39af5c5c..3e64e730 100755
--- a/js/lib/geom/brush-stroke.js
+++ b/js/lib/geom/brush-stroke.js
@@ -36,6 +36,7 @@ var BrushStroke = function GLBrushStroke() {
36 this._strokeHardness = 100; 36 this._strokeHardness = 100;
37 this._strokeMaterial = null; 37 this._strokeMaterial = null;
38 this._strokeStyle = "Solid"; 38 this._strokeStyle = "Solid";
39 this._strokeDoSmoothing = false;
39 40
40 //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 41 //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
41 //smaller value means more samples for the path 42 //smaller value means more samples for the path
@@ -183,6 +184,10 @@ var BrushStroke = function GLBrushStroke() {
183 this._strokeHardness=h; 184 this._strokeHardness=h;
184 } 185 }
185 186
187 this.setDoSmoothing = function(s){
188 this._strokeDoSmoothing = s;
189 }
190
186 this.getStrokeStyle = function () { 191 this.getStrokeStyle = function () {
187 return this._strokeStyle; 192 return this._strokeStyle;
188 }; 193 };
@@ -262,7 +267,7 @@ var BrushStroke = function GLBrushStroke() {
262 } 267 }
263 } 268 }
264 //**** add samples to the long sections of the path --- Catmull-Rom spline interpolation 269 //**** add samples to the long sections of the path --- Catmull-Rom spline interpolation
265 if (numPoints>1) { 270 if (this._strokeDoSmoothing && numPoints>1) {
266 var numInsertedPoints = 0; 271 var numInsertedPoints = 0;
267 var threshold = 5;//0.25*this._strokeWidth; //this determines whether a segment between two sample is too long 272 var threshold = 5;//0.25*this._strokeWidth; //this determines whether a segment between two sample is too long
268 var prevPt = this._Points[0]; 273 var prevPt = this._Points[0];
@@ -507,35 +512,6 @@ var BrushStroke = function GLBrushStroke() {
507 brushStamp.push(brushPt); 512 brushStamp.push(brushPt);
508 } 513 }
509 514
510
511 //make a circular brush stamp
512 brushStamp=[];
513 numTraces = this._strokeWidth*Math.PI; //figure out how to
514 var radius = this._strokeWidth/2;
515 for (t=0;t<numTraces;t++)
516 {
517 var angle = Math.PI*(360*t/numTraces)/180;
518 var brushPt = [radius*Math.cos(angle), radius*Math.sin(angle)];
519 brushStamp.push(brushPt);
520 }
521
522// //make a square brush stamp
523// STOPPED HERE
524// brushStamp = [];
525// numTraces = 4*strokeWidth;
526// for (t=0;t<numTraces;t++){
527// if (t<numTraces*0.25){
528// var brushPt = [startPos[0]+t*deltaDisplacement[0], startPos[1]+t*deltaDisplacement[1]];
529// } else if (t<numTraces*0.5){
530//
531// } else if (t<numTraces*0.75){
532//
533// } else {
534//
535// }
536// brushStamp.push(brushPt);
537// }
538
539 for (t=0;t<numTraces;t++){ 515 for (t=0;t<numTraces;t++){
540 var disp = [brushStamp[t][0], brushStamp[t][1]]; 516 var disp = [brushStamp[t][0], brushStamp[t][1]];
541 //ctx.globalCompositeOperation = 'source-over'; 517 //ctx.globalCompositeOperation = 'source-over';
@@ -566,30 +542,26 @@ var BrushStroke = function GLBrushStroke() {
566 } 542 }
567 */ 543 */
568 544
569 /*
570 //debugging path
571 ctx.beginPath();
572 ctx.moveTo(this._Points[0][0]-bboxMin[0], this._Points[0][1]-bboxMin[1]);
573 for (var i=1;i<numPoints;i++){
574 ctx.lineTo(this._Points[i][0]-bboxMin[0], this._Points[i][1]-bboxMin[1]);
575 }
576 ctx.lineWidth=1.0;
577 ctx.strokeStyle = "black";
578 ctx.stroke();
579 */
580 545
581 var numlayers = this._strokeWidth/2; 546 var minStrokeWidth = (this._strokeHardness*this._strokeWidth)/100; //the hardness is the percentage of the stroke width that's fully opaque
582 var alphaVal = 1.0/(numlayers-1); 547 var numlayers = 1 + (this._strokeWidth-minStrokeWidth)/2;
548 var alphaVal = 1.0/(numlayers);
549 ctx.lineCap = "round";
550 ctx.lineJoin="round";
551 ctx.strokeStyle="rgba("+parseInt(255*this._strokeColor[0])+","+parseInt(255*this._strokeColor[1])+","+parseInt(255*this._strokeColor[2])+","+alphaVal+")";
552 ctx.globalCompositeOperation = 'lighter'; //we wish to add up the colors
553 ctx.globalAlpha = this._strokeColor[3];
583 for (var l=0;l<numlayers;l++){ 554 for (var l=0;l<numlayers;l++){
584 ctx.beginPath(); 555 ctx.beginPath();
585 ctx.moveTo(this._Points[0][0]-bboxMin[0], this._Points[0][1]-bboxMin[1]); 556 ctx.moveTo(this._Points[0][0]-bboxMin[0], this._Points[0][1]-bboxMin[1]);
557 if (numPoints===1){
558 ctx.lineTo(this._Points[0][0]-bboxMin[0], this._Points[0][1]-bboxMin[1]+0.01);
559 }
586 for (var i=1;i<numPoints;i++){ 560 for (var i=1;i<numPoints;i++){
587 ctx.lineTo(this._Points[i][0]-bboxMin[0], this._Points[i][1]-bboxMin[1]); 561 ctx.lineTo(this._Points[i][0]-bboxMin[0], this._Points[i][1]-bboxMin[1]);
588 } 562 }
589 ctx.lineCap = "round"; 563
590 ctx.lineJoin="round"; 564 ctx.lineWidth=2*l+minStrokeWidth;
591 ctx.lineWidth=l+1;
592 ctx.strokeStyle="rgba("+parseInt(255*this._strokeColor[0])+","+parseInt(255*this._strokeColor[1])+","+parseInt(255*this._strokeColor[2])+","+alphaVal+")";
593 ctx.stroke(); 565 ctx.stroke();
594 } 566 }
595 567
diff --git a/js/tools/BrushTool.js b/js/tools/BrushTool.js
index dd201f33..1e1df0a4 100644
--- a/js/tools/BrushTool.js
+++ b/js/tools/BrushTool.js
@@ -88,6 +88,12 @@ exports.BrushTool = Montage.create(ShapeTool, {
88 strokeHardness = ShapesController.GetValueInPixels(this.options.strokeHardness.value, this.options.strokeHardness.units); 88 strokeHardness = ShapesController.GetValueInPixels(this.options.strokeHardness.value, this.options.strokeHardness.units);
89 } 89 }
90 this._selectedBrushStroke.setStrokeHardness(strokeHardness); 90 this._selectedBrushStroke.setStrokeHardness(strokeHardness);
91
92 var doSmoothing = false;
93 if (this.options.doSmoothing){
94 doSmoothing = this.options.doSmoothing.value;
95 }
96 this._selectedBrushStroke.setDoSmoothing(doSmoothing);
91 } 97 }
92 NJevent("enableStageMove");//stageManagerModule.stageManager.enableMouseMove(); 98 NJevent("enableStageMove");//stageManagerModule.stageManager.enableMouseMove();
93 } //value: function (event) { 99 } //value: function (event) {