diff options
author | Pushkar Joshi | 2012-03-07 14:33:21 -0800 |
---|---|---|
committer | Pushkar Joshi | 2012-03-07 14:33:21 -0800 |
commit | 703fb3d06e88257ac73c1d1a0ec6ca33a64f4371 (patch) | |
tree | 440d068584f7ccda73368b4857189f8b528e6416 /js/lib/geom | |
parent | 353bfa04a6153b0146a0c73b6e6bb0e5f4b23194 (diff) | |
download | ninja-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/lib/geom')
-rwxr-xr-x | js/lib/geom/brush-stroke.js | 66 |
1 files changed, 19 insertions, 47 deletions
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 | ||