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)

author: Pushkar Joshi 2012-03-02 12:23:44 -0800
committer: Pushkar Joshi 2012-03-02 12:23:44 -0800
commit: 1b68bb87c458877cb850a96d8a093d6064bc41dc (patch)
tree: e479c2f0a3958cdf2110654b1886769518b1bee7
parent: 0b7f2f54738d2c1ea480b9bac7d3a750b1ef4df6 (diff)
download: ninja-1b68bb87c458877cb850a96d8a093d6064bc41dc.tar.gz
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 @@
        <script type="text/montage-serialization">
        {
+            "strokeSizeHT": {
+                "module": "js/components/hottextunit.reel",
+                "name": "HotTextUnit",
+                "properties": {
+                    "element": {"#": "strokeSize"},
+                    "minValue": 1,
+                    "maxValue": 100,
+                    "value": 1,
+                    "decimalPlace": 10,
+                    "acceptableUnits" : ["px", "pt"]
+                }
+            },
+            "strokeHardnessHT": {
+                "module": "js/components/hottextunit.reel",
+                "name": "HotTextUnit",
+                "properties": {
+                    "element": {"#": "strokeHardness"},
+                    "minValue": 0,
+                    "maxValue": 100,
+                    "value": 100,
+                    "decimalPlace": 10,
+                    "acceptableUnits" : ["px", "pt"]
+                }
+            },
            "owner": {
                "module": "js/components/tools-properties/brush-properties.reel",
                "name": "BrushProperties",
                "properties": {
-                    "element": {"#": "brushProperties"}
+                    "element": {"#": "brushProperties"},
+                    "_strokeSize": {"@": "strokeSizeHT"},
+                    "_strokeHardness": {"@": "strokeHardnessHT"}
                }
            }
        }
@@ -26,6 +53,12 @@
    <body>
        <div id="brushProperties" class="subToolHolderPanel">
+            <div id="strokesContainer" class="leftLabel" style="margin-left:25px; padding-top: 3px;">
+                <label class="label"> Stroke:</label>
+                <div id="strokeSize" class="label"></div>
+                <label class="label"> Hardness:</label>
+                <div id="strokeHardness" class="label"></div>
+            </div>
        </div>
    </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 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;
 var ToolProperties = require("js/components/tools-properties/tool-properties").ToolProperties;
 exports.BrushProperties = Montage.create(ToolProperties, {
+    strokeSize: {
-    
+        get: function() { return this._strokeSize; }
-    _subPrepare: {
-        value: function() {
-            //this.divElement.addEventListener("click", this, false);
-        }
    },
+    strokeHardness: {
-    handleClick: {
+        get: function() { return this._strokeHardness; }
-        value: function(event) {
-           // this.selectedElement = event._event.target.id;
-        }
    }
-});
-\ No newline at end of file
+});
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() {
    //stroke information
    this._strokeWidth = 0.0;
    this._strokeColor = [0.4, 0.4, 0.4, 1.0];
+    this._secondStrokeColor = this._strokeColor;
+    this._strokeHardness = 100;
    this._strokeMaterial;
    this._strokeStyle = "Solid";
@@ -39,7 +41,7 @@ function GLBrushStroke() {
    this._WETNESS_FACTOR = 0.25;
    //prevent extremely long paths that can take a long time to render
-    this._MAX_ALLOWED_SAMPLES = 500;
+    this._MAX_ALLOWED_SAMPLES = 5000;
    //drawing context
    this._world = null;
@@ -106,6 +108,8 @@ function GLBrushStroke() {
    this.setStrokeMaterial = function (m) { this._strokeMaterial = m; }
    this.getStrokeColor = function () { return this._strokeColor; }
    this.setStrokeColor = function (c) { this._strokeColor = c; }
+    this.setSecondStrokeColor = function(c){this._secondStrokeColor=c;}
+    this.setStrokeHardness = function(h){this._strokeHardness=h;}
    this.getStrokeStyle = function () { return this._strokeStyle; }
    this.setStrokeStyle = function (s) { this._strokeStyle = s; }
@@ -133,7 +137,7 @@ function GLBrushStroke() {
            this._Points[i][2]+=tz;
        }
    }
+    
    this.computeMetaGeometry = function(){
        if (this._dirty){
            var numPoints = this._Points.length;
@@ -172,6 +176,44 @@ function GLBrushStroke() {
                }
            }
+            //**** add samples to the long sections of the path --- Catmull-Rom spline interpolation
+            if (numPoints>1) {
+                var numInsertedPoints = 0;
+                var threshold = 5;//0.25*this._strokeWidth; //this determines whether a segment between two sample is too long
+                var prevPt = this._Points[0];
+                for (var i=1;i<numPoints;i++){
+                    var pt = this._Points[i];
+                    var diff = [pt[0]-prevPt[0], pt[1]-prevPt[1]];
+                    var distance = Math.sqrt(diff[0]*diff[0]+diff[1]*diff[1]);
+                    if (distance>threshold){
+                        //build the control polygon for the Catmull-Rom spline (prev. 2 points and next 2 points)
+                        var prev = (i===1) ? i-1 : i-2;
+                        var next = (i===numPoints-1) ? i : i+1;
+                        var ctrlPts = [this._Points[prev], this._Points[i-1], this._Points[i], this._Points[next]];
+                        //insert points along the prev. to current point
+                        var numNewPoints = Math.floor(distance/threshold);
+                        for (var j=0;j<numNewPoints;j++){
+                            var param = (j+1)/(numNewPoints+1);
+                            var newpt = this._CatmullRomSplineInterpolate(ctrlPts, param);
+                            //insert new point before point i
+                            this._Points.splice(i, 0, newpt);
+                            i++;
+                            numInsertedPoints++;
+                        }
+                        this._dirty=true;
+                    }
+                    prevPt=pt;
+                    //update numPoints to match the new length
+                    numPoints = this._Points.length;
+                    //end this function if the numPoints has gone above the max. size specified
+                    if (numPoints> this._MAX_ALLOWED_SAMPLES){
+                        console.log("leaving the resampling because numPoints is greater than limit:"+this._MAX_ALLOWED_SAMPLES);
+                        break;
+                    }
+                }
+                console.log("Inserted "+numInsertedPoints+" additional CatmullRom points");
+            }
            // *** compute the bounding box *********
            this._BBoxMin = [Infinity, Infinity, Infinity];
            this._BBoxMax = [-Infinity, -Infinity, -Infinity];
@@ -362,7 +404,6 @@ function GLBrushStroke() {
        }
        */
-        //todo test how to render the path as a bunch of moveTo and lineTos (for calligraphic brush styles)
        var numTraces = this._strokeWidth;
        var halfNumTraces = numTraces/2;
        var deltaDisplacement = [1,0];//[this._strokeWidth/numTraces, 0]; //a horizontal line brush
@@ -371,17 +412,20 @@ function GLBrushStroke() {
            var disp = [startPos[0]+t*deltaDisplacement[0], startPos[1]+t*deltaDisplacement[1]];
            //ctx.globalCompositeOperation = 'source-over';
            var distFromMiddle = Math.abs(halfNumTraces-t);
-            var alphaVal = 1.0 - (distFromMiddle/halfNumTraces);
+            var alphaVal = 1.0 - (100-this._strokeHardness)*(distFromMiddle/halfNumTraces)/100;
            ctx.save();
            ctx.lineWidth=this._strokeWidth/10;//4;
author	Pushkar Joshi	2012-03-02 12:23:44 -0800
committer	Pushkar Joshi	2012-03-02 12:23:44 -0800
commit	1b68bb87c458877cb850a96d8a093d6064bc41dc (patch)
tree	e479c2f0a3958cdf2110654b1886769518b1bee7
parent	0b7f2f54738d2c1ea480b9bac7d3a750b1ef4df6 (diff)
download	ninja-1b68bb87c458877cb850a96d8a093d6064bc41dc.tar.gz

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;
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		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]+tdeltaDisplacement[0], startPos[1]+tdeltaDisplacement[1]];	412	var disp = [startPos[0]+tdeltaDisplacement[0], startPos[1]+tdeltaDisplacement[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;