aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorPushkar Joshi2012-03-02 12:23:44 -0800
committerPushkar Joshi2012-03-02 12:23:44 -0800
commit1b68bb87c458877cb850a96d8a093d6064bc41dc (patch)
treee479c2f0a3958cdf2110654b1886769518b1bee7
parent0b7f2f54738d2c1ea480b9bac7d3a750b1ef4df6 (diff)
downloadninja-1b68bb87c458877cb850a96d8a093d6064bc41dc.tar.gz
Catmull-Rom spline sampling for the brush stroke, and options for stroke size, stroke hardness and both stroke colors (left and right --- temporarily using the stroke and fill colors respectively)
-rwxr-xr-xjs/components/tools-properties/brush-properties.reel/brush-properties.html35
-rwxr-xr-xjs/components/tools-properties/brush-properties.reel/brush-properties.js17
-rwxr-xr-xjs/helper-classes/RDGE/GLBrushStroke.js72
-rw-r--r--js/tools/BrushTool.js17
4 files changed, 120 insertions, 21 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 38f7f856..af07b3f2 100755
--- a/js/components/tools-properties/brush-properties.reel/brush-properties.html
+++ b/js/components/tools-properties/brush-properties.reel/brush-properties.html
@@ -11,12 +11,39 @@
11 11
12 <script type="text/montage-serialization"> 12 <script type="text/montage-serialization">
13 { 13 {
14 "strokeSizeHT": {
15 "module": "js/components/hottextunit.reel",
16 "name": "HotTextUnit",
17 "properties": {
18 "element": {"#": "strokeSize"},
19 "minValue": 1,
20 "maxValue": 100,
21 "value": 1,
22 "decimalPlace": 10,
23 "acceptableUnits" : ["px", "pt"]
24 }
25 },
26
27 "strokeHardnessHT": {
28 "module": "js/components/hottextunit.reel",
29 "name": "HotTextUnit",
30 "properties": {
31 "element": {"#": "strokeHardness"},
32 "minValue": 0,
33 "maxValue": 100,
34 "value": 100,
35 "decimalPlace": 10,
36 "acceptableUnits" : ["px", "pt"]
37 }
38 },
14 39
15 "owner": { 40 "owner": {
16 "module": "js/components/tools-properties/brush-properties.reel", 41 "module": "js/components/tools-properties/brush-properties.reel",
17 "name": "BrushProperties", 42 "name": "BrushProperties",
18 "properties": { 43 "properties": {
19 "element": {"#": "brushProperties"} 44 "element": {"#": "brushProperties"},
45 "_strokeSize": {"@": "strokeSizeHT"},
46 "_strokeHardness": {"@": "strokeHardnessHT"}
20 } 47 }
21 } 48 }
22 } 49 }
@@ -26,6 +53,12 @@
26 53
27 <body> 54 <body>
28 <div id="brushProperties" class="subToolHolderPanel"> 55 <div id="brushProperties" class="subToolHolderPanel">
56 <div id="strokesContainer" class="leftLabel" style="margin-left:25px; padding-top: 3px;">
57 <label class="label"> Stroke:</label>
58 <div id="strokeSize" class="label"></div>
59 <label class="label"> Hardness:</label>
60 <div id="strokeHardness" class="label"></div>
61 </div>
29 </div> 62 </div>
30 </body> 63 </body>
31 64
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 92da98cc..d2fcf888 100755
--- a/js/components/tools-properties/brush-properties.reel/brush-properties.js
+++ b/js/components/tools-properties/brush-properties.reel/brush-properties.js
@@ -9,17 +9,10 @@ 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 12 strokeSize: {
13 13 get: function() { return this._strokeSize; }
14 _subPrepare: {
15 value: function() {
16 //this.divElement.addEventListener("click", this, false);
17 }
18 }, 14 },
19 15 strokeHardness: {
20 handleClick: { 16 get: function() { return this._strokeHardness; }
21 value: function(event) {
22 // this.selectedElement = event._event.target.id;
23 }
24 } 17 }
25}); \ No newline at end of file 18});
diff --git a/js/helper-classes/RDGE/GLBrushStroke.js b/js/helper-classes/RDGE/GLBrushStroke.js
index f5b0bce1..c1469977 100755
--- a/js/helper-classes/RDGE/GLBrushStroke.js
+++ b/js/helper-classes/RDGE/GLBrushStroke.js
@@ -31,6 +31,8 @@ function GLBrushStroke() {
31 //stroke information 31 //stroke information
32 this._strokeWidth = 0.0; 32 this._strokeWidth = 0.0;
33 this._strokeColor = [0.4, 0.4, 0.4, 1.0]; 33 this._strokeColor = [0.4, 0.4, 0.4, 1.0];
34 this._secondStrokeColor = this._strokeColor;
35 this._strokeHardness = 100;
34 this._strokeMaterial; 36 this._strokeMaterial;
35 this._strokeStyle = "Solid"; 37 this._strokeStyle = "Solid";
36 38
@@ -39,7 +41,7 @@ function GLBrushStroke() {
39 this._WETNESS_FACTOR = 0.25; 41 this._WETNESS_FACTOR = 0.25;
40 42
41 //prevent extremely long paths that can take a long time to render 43 //prevent extremely long paths that can take a long time to render
42 this._MAX_ALLOWED_SAMPLES = 500; 44 this._MAX_ALLOWED_SAMPLES = 5000;
43 45
44 //drawing context 46 //drawing context
45 this._world = null; 47 this._world = null;
@@ -106,6 +108,8 @@ function GLBrushStroke() {
106 this.setStrokeMaterial = function (m) { this._strokeMaterial = m; } 108 this.setStrokeMaterial = function (m) { this._strokeMaterial = m; }
107 this.getStrokeColor = function () { return this._strokeColor; } 109 this.getStrokeColor = function () { return this._strokeColor; }
108 this.setStrokeColor = function (c) { this._strokeColor = c; } 110 this.setStrokeColor = function (c) { this._strokeColor = c; }
111 this.setSecondStrokeColor = function(c){this._secondStrokeColor=c;}
112 this.setStrokeHardness = function(h){this._strokeHardness=h;}
109 this.getStrokeStyle = function () { return this._strokeStyle; } 113 this.getStrokeStyle = function () { return this._strokeStyle; }
110 this.setStrokeStyle = function (s) { this._strokeStyle = s; } 114 this.setStrokeStyle = function (s) { this._strokeStyle = s; }
111 115
@@ -133,7 +137,7 @@ function GLBrushStroke() {
133 this._Points[i][2]+=tz; 137 this._Points[i][2]+=tz;
134 } 138 }
135 } 139 }
136 140
137 this.computeMetaGeometry = function(){ 141 this.computeMetaGeometry = function(){
138 if (this._dirty){ 142 if (this._dirty){
139 var numPoints = this._Points.length; 143 var numPoints = this._Points.length;
@@ -172,6 +176,44 @@ function GLBrushStroke() {
172 } 176 }
173 } 177 }
174 178
179 //**** add samples to the long sections of the path --- Catmull-Rom spline interpolation
180 if (numPoints>1) {
181 var numInsertedPoints = 0;
182 var threshold = 5;//0.25*this._strokeWidth; //this determines whether a segment between two sample is too long
183 var prevPt = this._Points[0];
184 for (var i=1;i<numPoints;i++){
185 var pt = this._Points[i];
186 var diff = [pt[0]-prevPt[0], pt[1]-prevPt[1]];
187 var distance = Math.sqrt(diff[0]*diff[0]+diff[1]*diff[1]);
188 if (distance>threshold){
189 //build the control polygon for the Catmull-Rom spline (prev. 2 points and next 2 points)
190 var prev = (i===1) ? i-1 : i-2;
191 var next = (i===numPoints-1) ? i : i+1;
192 var ctrlPts = [this._Points[prev], this._Points[i-1], this._Points[i], this._Points[next]];
193 //insert points along the prev. to current point
194 var numNewPoints = Math.floor(distance/threshold);
195 for (var j=0;j<numNewPoints;j++){
196 var param = (j+1)/(numNewPoints+1);
197 var newpt = this._CatmullRomSplineInterpolate(ctrlPts, param);
198 //insert new point before point i
199 this._Points.splice(i, 0, newpt);
200 i++;
201 numInsertedPoints++;
202 }
203 this._dirty=true;
204 }
205 prevPt=pt;
206 //update numPoints to match the new length
207 numPoints = this._Points.length;
208
209 //end this function if the numPoints has gone above the max. size specified
210 if (numPoints> this._MAX_ALLOWED_SAMPLES){
211 console.log("leaving the resampling because numPoints is greater than limit:"+this._MAX_ALLOWED_SAMPLES);
212 break;
213 }
214 }
215 console.log("Inserted "+numInsertedPoints+" additional CatmullRom points");
216 }
175 // *** compute the bounding box ********* 217 // *** compute the bounding box *********
176 this._BBoxMin = [Infinity, Infinity, Infinity]; 218 this._BBoxMin = [Infinity, Infinity, Infinity];
177 this._BBoxMax = [-Infinity, -Infinity, -Infinity]; 219 this._BBoxMax = [-Infinity, -Infinity, -Infinity];
@@ -362,7 +404,6 @@ function GLBrushStroke() {
362 } 404 }
363 */ 405 */
364 406
365 //todo test how to render the path as a bunch of moveTo and lineTos (for calligraphic brush styles)
366 var numTraces = this._strokeWidth; 407 var numTraces = this._strokeWidth;
367 var halfNumTraces = numTraces/2; 408 var halfNumTraces = numTraces/2;
368 var deltaDisplacement = [1,0];//[this._strokeWidth/numTraces, 0]; //a horizontal line brush 409 var deltaDisplacement = [1,0];//[this._strokeWidth/numTraces, 0]; //a horizontal line brush
@@ -371,17 +412,20 @@ function GLBrushStroke() {
371 var disp = [startPos[0]+t*deltaDisplacement[0], startPos[1]+t*deltaDisplacement[1]]; 412 var disp = [startPos[0]+t*deltaDisplacement[0], startPos[1]+t*deltaDisplacement[1]];
372 //ctx.globalCompositeOperation = 'source-over'; 413 //ctx.globalCompositeOperation = 'source-over';
373 var distFromMiddle = Math.abs(halfNumTraces-t); 414 var distFromMiddle = Math.abs(halfNumTraces-t);
374 var alphaVal = 1.0 - (distFromMiddle/halfNumTraces); 415 var alphaVal = 1.0 - (100-this._strokeHardness)*(distFromMiddle/halfNumTraces)/100;
375 ctx.save(); 416 ctx.save();
376 ctx.lineWidth=this._strokeWidth/10;//4;