aboutsummaryrefslogtreecommitdiff
path: root/js/helper-classes/RDGE
diff options
context:
space:
mode:
authorPushkar Joshi2012-02-10 14:16:56 -0800
committerPushkar Joshi2012-02-10 14:16:56 -0800
commitfcb12cc09eb3cd3b42bd215877ba18f449275b75 (patch)
treeaee8d48dacf1da2f8398f50f549a43b50b60b037 /js/helper-classes/RDGE
parent6bb00e69713bd7131b2bc0a15e4e0cb6071d616c (diff)
downloadninja-fcb12cc09eb3cd3b42bd215877ba18f449275b75.tar.gz
render the brush stroke as a sequence of rectangles, with each rectangle having its own linear gradient
Diffstat (limited to 'js/helper-classes/RDGE')
-rw-r--r--js/helper-classes/RDGE/GLBrushStroke.js78
1 files changed, 66 insertions, 12 deletions
diff --git a/js/helper-classes/RDGE/GLBrushStroke.js b/js/helper-classes/RDGE/GLBrushStroke.js
index 59017a0c..8fb6ab25 100644
--- a/js/helper-classes/RDGE/GLBrushStroke.js
+++ b/js/helper-classes/RDGE/GLBrushStroke.js
@@ -76,7 +76,7 @@ function GLBrushStroke() {
76 var prevPt = this._Points[numPoints-1]; 76 var prevPt = this._Points[numPoints-1];
77 var diffPt = [prevPt[0]-pt[0], prevPt[1]-pt[1]]; 77 var diffPt = [prevPt[0]-pt[0], prevPt[1]-pt[1]];
78 var diffPtMag = diffPt[0]*diffPt[0] + diffPt[1]*diffPt[1]; 78 var diffPtMag = diffPt[0]*diffPt[0] + diffPt[1]*diffPt[1];
79 if (diffPtMag<4) 79 if (diffPtMag<16)//TODO hook this up to the variable that measures flow/wetness of the paint brush...a smaller number-> more samples
80 doAddPoint=false; 80 doAddPoint=false;
81 } 81 }
82 if (doAddPoint) { 82 if (doAddPoint) {
@@ -184,7 +184,6 @@ function GLBrushStroke() {
184 var bboxHeight = bboxMax[1] - bboxMin[1]; 184 var bboxHeight = bboxMax[1] - bboxMin[1];
185 ctx.clearRect(0, 0, bboxWidth, bboxHeight); 185 ctx.clearRect(0, 0, bboxWidth, bboxHeight);
186 186
187
188 /* 187 /*
189 ctx.lineWidth = this._strokeWidth; 188 ctx.lineWidth = this._strokeWidth;
190 ctx.strokeStyle = "black"; 189 ctx.strokeStyle = "black";
@@ -205,31 +204,87 @@ function GLBrushStroke() {
205 ctx.stroke(); 204 ctx.stroke();
206 */ 205 */
207 206
208 var firstPt = this._Points[0]; 207 var isDebug = false;
209 var prevX = firstPt[0]-bboxMin[0]; 208 var prevPt = this._Points[0];
210 var prevY = firstPt[1]-bboxMin[1]; 209 var prevX = prevPt[0]-bboxMin[0];
210 var prevY = prevPt[1]-bboxMin[1];
211 prevPt = [prevX,prevY];
211 for (var i = 1; i < numPoints; i++) { 212 for (var i = 1; i < numPoints; i++) {
212 var pt = this._Points[i]; 213 var pt = this._Points[i];
213 ctx.globalCompositeOperation = 'source-over'; 214 ctx.globalCompositeOperation = 'source-over';
214 var x = pt[0]-bboxMin[0]; 215 var x = pt[0]-bboxMin[0];
215 var y = pt[1]-bboxMin[1]; 216 var y = pt[1]-bboxMin[1];
216 var r = ctx.createLinearGradient(prevX, prevY, x, y); 217 pt = [x,y];
217 r.addColorStop(1, 'rgba(0,0,0,0.01)');
218 r.addColorStop(0.5,'rgba(255,0,0,1.0)');
219 r.addColorStop(0, 'rgba(0,0,0,0.01)');
220 218
221 ctx.fillStyle = r; 219 //vector from prev to current pt
222 //ctx.fillStyle = "rgba(0,128,0,0.15)"; 220 var seg = VecUtils.vecSubtract(2, pt, prevPt);
221 var segDir = VecUtils.vecNormalize(2, seg, 1.0);
222
223 var segMidPt = VecUtils.vecInterpolate(2, pt, prevPt, 0.5);
223 var w2 = this._strokeWidth*0.5; 224 var w2 = this._strokeWidth*0.5;
225 var segDirOrtho = [w2*segDir[1], -w2*segDir[0]];
226
227 //add half the strokewidth to the segMidPt
228 var lgStart = VecUtils.vecAdd(2, segMidPt, segDirOrtho);
229 var lgEnd = VecUtils.vecSubtract(2, segMidPt, segDirOrtho);
230
231 ctx.save();
232 ctx.beginPath();
233
234 if (isDebug) {
235 ctx.strokeStyle="black";
236 ctx.lineWidth = 1;
237
238 ctx.moveTo(lgStart[0], lgStart[1]);
239 ctx.lineTo(lgEnd[0], lgEnd[1]);
240 ctx.stroke();
241 }
242
243 var lg = ctx.createLinearGradient(lgStart[0], lgStart[1], lgEnd[0], lgEnd[1]);
244 lg.addColorStop(1, 'rgba(0,0,0,0.0)');
245 lg.addColorStop(0.5,'rgba(255,0,0,1.0)');
246 lg.addColorStop(0, 'rgba(0,0,0,0.0)');
247 ctx.fillStyle = lg;
248
249 if (isDebug){
250 ctx.strokeStyle="blue";
251 ctx.lineWidth=0.5;
252 }
224 ctx.moveTo(prevX-w2, prevY); 253 ctx.moveTo(prevX-w2, prevY);
225 ctx.lineTo(prevX+w2, prevY); 254 ctx.lineTo(prevX+w2, prevY);
226 ctx.lineTo(x+w2, y); 255 ctx.lineTo(x+w2, y);
227 ctx.lineTo(x-w2, y); 256 ctx.lineTo(x-w2, y);
257 ctx.lineTo(prevX-w2, prevY);
228 ctx.fill(); 258 ctx.fill();
259 ctx.closePath();
229 260
261 ctx.restore();
262
263 prevPt = pt;
230 prevX = x; 264 prevX = x;
231 prevY = y; 265 prevY = y;
232 } 266 }
267
268
269 if (isDebug)
270 ctx.stroke();
271
272 if (isDebug){
273 //draw the skeleton of this stroke
274 ctx.lineWidth = 1;
275 ctx.strokeStyle = "black";
276 var pt = this._Points[0];
277 ctx.beginPath();
278 ctx.moveTo(pt[0]-bboxMin[0],pt[1]-bboxMin[1]);
279 for (var i = 1; i < numPoints; i++) {
280 pt = this._Points[i];
281 var x = pt[0]-bboxMin[0];
282 var y = pt[1]-bboxMin[1];
283 ctx.lineTo(x,y);
284 }
285 ctx.stroke();
286 }
287
233 288
234 /* 289 /*
235 var R2 = this._strokeWidth; 290 var R2 = this._strokeWidth;
@@ -256,7 +311,6 @@ function GLBrushStroke() {
256 //ctx.rect(x-R, y-R, R2, R2); 311 //ctx.rect(x-R, y-R, R2, R2);
257 } 312 }
258 */ 313 */
259
260 ctx.restore(); 314 ctx.restore();
261 } //render() 315 } //render()
262 316