From fcb12cc09eb3cd3b42bd215877ba18f449275b75 Mon Sep 17 00:00:00 2001 From: Pushkar Joshi Date: Fri, 10 Feb 2012 14:16:56 -0800 Subject: render the brush stroke as a sequence of rectangles, with each rectangle having its own linear gradient --- js/helper-classes/RDGE/GLBrushStroke.js | 78 ++++++++++++++++++++++++++++----- 1 file changed, 66 insertions(+), 12 deletions(-) (limited to 'js/helper-classes') 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() { var prevPt = this._Points[numPoints-1]; var diffPt = [prevPt[0]-pt[0], prevPt[1]-pt[1]]; var diffPtMag = diffPt[0]*diffPt[0] + diffPt[1]*diffPt[1]; - if (diffPtMag<4) + if (diffPtMag<16)//TODO hook this up to the variable that measures flow/wetness of the paint brush...a smaller number-> more samples doAddPoint=false; } if (doAddPoint) { @@ -184,7 +184,6 @@ function GLBrushStroke() { var bboxHeight = bboxMax[1] - bboxMin[1]; ctx.clearRect(0, 0, bboxWidth, bboxHeight); - /* ctx.lineWidth = this._strokeWidth; ctx.strokeStyle = "black"; @@ -205,31 +204,87 @@ function GLBrushStroke() { ctx.stroke(); */ - var firstPt = this._Points[0]; - var prevX = firstPt[0]-bboxMin[0]; - var prevY = firstPt[1]-bboxMin[1]; + var isDebug = false; + var prevPt = this._Points[0]; + var prevX = prevPt[0]-bboxMin[0]; + var prevY = prevPt[1]-bboxMin[1]; + prevPt = [prevX,prevY]; for (var i = 1; i < numPoints; i++) { var pt = this._Points[i]; ctx.globalCompositeOperation = 'source-over'; var x = pt[0]-bboxMin[0]; var y = pt[1]-bboxMin[1]; - var r = ctx.createLinearGradient(prevX, prevY, x, y); - r.addColorStop(1, 'rgba(0,0,0,0.01)'); - r.addColorStop(0.5,'rgba(255,0,0,1.0)'); - r.addColorStop(0, 'rgba(0,0,0,0.01)'); + pt = [x,y]; - ctx.fillStyle = r; - //ctx.fillStyle = "rgba(0,128,0,0.15)"; + //vector from prev to current pt + var seg = VecUtils.vecSubtract(2, pt, prevPt); + var segDir = VecUtils.vecNormalize(2, seg, 1.0); + + var segMidPt = VecUtils.vecInterpolate(2, pt, prevPt, 0.5); var w2 = this._strokeWidth*0.5; + var segDirOrtho = [w2*segDir[1], -w2*segDir[0]]; + + //add half the strokewidth to the segMidPt + var lgStart = VecUtils.vecAdd(2, segMidPt, segDirOrtho); + var lgEnd = VecUtils.vecSubtract(2, segMidPt, segDirOrtho); + + ctx.save(); + ctx.beginPath(); + + if (isDebug) { + ctx.strokeStyle="black"; + ctx.lineWidth = 1; + + ctx.moveTo(lgStart[0], lgStart[1]); + ctx.lineTo(lgEnd[0], lgEnd[1]); + ctx.stroke(); + } + + var lg = ctx.createLinearGradient(lgStart[0], lgStart[1], lgEnd[0], lgEnd[1]); + lg.addColorStop(1, 'rgba(0,0,0,0.0)'); + lg.addColorStop(0.5,'rgba(255,0,0,1.0)'); + lg.addColorStop(0, 'rgba(0,0,0,0.0)'); + ctx.fillStyle = lg; + + if (isDebug){ + ctx.strokeStyle="blue"; + ctx.lineWidth=0.5; + } ctx.moveTo(prevX-w2, prevY); ctx.lineTo(prevX+w2, prevY); ctx.lineTo(x+w2, y); ctx.lineTo(x-w2, y); + ctx.lineTo(prevX-w2, prevY); ctx.fill(); + ctx.closePath(); + ctx.restore(); + + prevPt = pt; prevX = x; prevY = y; } + + + if (isDebug) + ctx.stroke(); + + if (isDebug){ + //draw the skeleton of this stroke + ctx.lineWidth = 1; + ctx.strokeStyle = "black"; + var pt = this._Points[0]; + ctx.beginPath(); + ctx.moveTo(pt[0]-bboxMin[0],pt[1]-bboxMin[1]); + for (var i = 1; i < numPoints; i++) { + pt = this._Points[i]; + var x = pt[0]-bboxMin[0]; + var y = pt[1]-bboxMin[1]; + ctx.lineTo(x,y); + } + ctx.stroke(); + } + /* var R2 = this._strokeWidth; @@ -256,7 +311,6 @@ function GLBrushStroke() { //ctx.rect(x-R, y-R, R2, R2); } */ - ctx.restore(); } //render() -- cgit v1.2.3