From 75a862d305bc4502e22bc5aa65fa271143b8cf6c Mon Sep 17 00:00:00 2001 From: Pushkar Joshi Date: Thu, 31 May 2012 12:18:43 -0700 Subject: move all the subpath functions to its prototype, and first version of the pen path runtime --- assets/canvas-runtime.js | 201 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 201 insertions(+) (limited to 'assets/canvas-runtime.js') diff --git a/assets/canvas-runtime.js b/assets/canvas-runtime.js index eeafaab6..ec5097bc 100644 --- a/assets/canvas-runtime.js +++ b/assets/canvas-runtime.js @@ -350,6 +350,10 @@ NinjaCvsRt.GLRuntime = Object.create(Object.prototype, { obj.importJSON( jObj ); break; + case 5: //subpath (created by pen tool) + obj = Object.create(NinjaCvsRt.RuntimeSubPath, {_materials: { value:[], writable:true}}); + obj.importJSON (jObj ); + break; default: throw new Error( "Attempting to load unrecognized object type: " + type ); break; @@ -1770,3 +1774,200 @@ NinjaCvsRt.RuntimePlasmaMaterial = Object.create(NinjaCvsRt.RuntimeMaterial, { }); + +// ************************************************************************** +// Runtime for the pen tool path +// ************************************************************************** +NinjaCvsRt.AnchorPoint = Object.create(Object.prototype, { + ///////////////////////////////////////// + // Instance variables + ///////////////////////////////////////// + _x: {value: 0.0, writable: true}, + _y: {value: 0.0, writable: true}, + _z: {value: 0.0, writable: true}, + + _prevX: {value: 0.0, writable: true}, + _prevY: {value: 0.0, writable: true}, + _prevZ: {value: 0.0, writable: true}, + + _nextX: {value: 0.0, writable: true}, + _nextY: {value: 0.0, writable: true}, + _nextZ: {value: 0.0, writable: true}, + + // *********** setters ************ + setPos: { + value: function(x,y,z){ + this._x = x; + this._y = y; + this._z = z; + } + }, + + setPrevPos: { + value: function (x, y, z) { + this._prevX = x; + this._prevY = y; + this._prevZ = z; + } + }, + + setNextPos: { + value: function (x, y, z) { + this._nextX = x; + this._nextY = y; + this._nextZ = z; + } + }, + + // *************** getters ****************** + // (add as needed) + getPosX: { + value: function () { + return this._x; + } + }, + + getPosY: { + value: function () { + return this._y; + } + }, + + getPosZ: { + value: function () { + return this._z; + } + }, + + getPrevX: { + value: function () { + return this._prevX; + } + }, + + getPrevY: { + value: function () { + return this._prevY; + } + }, + + getPrevZ: { + value: function () { + return this._prevZ; + } + }, + + getNextX: { + value: function () { + return this._nextX; + } + }, + + getNextY: { + value: function () { + return this._nextY; + } + }, + + getNextZ: { + value: function () { + return this._nextZ; + } + } +}); + +NinjaCvsRt.RuntimeSubPath = Object.create(NinjaCvsRt.RuntimeGeomObj, { + // array of anchor points + _Anchors: { value: null, writable: true }, + + //path properties + _isClosed: {value: false, writable: true}, + _strokeWidth: {value: 0, writable: true}, + _strokeColor: {value: null, writable: true}, + _fillColor: {value: null, writable: true}, + + importJSON: { + value: function(jo) { + if (this.geomType()!== jo.geomType){ + return; + } + //the geometry for this object + this._Anchors = []; + var i=0; + for (i=0;i1) { + ctx.beginPath(); + var prevAnchor = this._Anchors[0]; + ctx.moveTo(prevAnchor.getPosX(),prevAnchor.getPosY()); + for (var i = 1; i < numAnchors; i++) { + var currAnchor = this._Anchors[i]; + ctx.bezierCurveTo(prevAnchor.getNextX(),prevAnchor.getNextY(), currAnchor.getPrevX(), currAnchor.getPrevY(), currAnchor.getPosX(), currAnchor.getPosY()); + prevAnchor = currAnchor; + } + if (this._isClosed === true) { + var currAnchor = this._Anchors[0]; + ctx.bezierCurveTo(prevAnchor.getNextX(),prevAnchor.getNextY(), currAnchor.getPrevX(), currAnchor.getPrevY(), currAnchor.getPosX(), currAnchor.getPosY()); + prevAnchor = currAnchor; + ctx.fill(); + } + ctx.stroke(); + } + ctx.restore(); + } + } +});// ************************************************************************** +// END runtime for the pen tool path +// ************************************************************************** + + -- cgit v1.2.3 From 0a7357bad4e646177b0420848844f503e0b64161 Mon Sep 17 00:00:00 2001 From: Pushkar Joshi Date: Thu, 31 May 2012 14:34:21 -0700 Subject: somewhat working version of the canvas runtime for pen paths (the runtime renders properly if we go through debugger)...also removed calls to getStageElement from pen tool --- assets/canvas-runtime.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) (limited to 'assets/canvas-runtime.js') diff --git a/assets/canvas-runtime.js b/assets/canvas-runtime.js index c0c4ccfc..3ed7ed0f 100644 --- a/assets/canvas-runtime.js +++ b/assets/canvas-runtime.js @@ -1920,6 +1920,12 @@ NinjaCvsRt.RuntimeSubPath = Object.create(NinjaCvsRt.RuntimeGeomObj, { _strokeColor: {value: null, writable: true}, _fillColor: {value: null, writable: true}, + geomType: { + value: function () { + return this.GEOM_TYPE_CUBIC_BEZIER; + } + }, + importJSON: { value: function(jo) { if (this.geomType()!== jo.geomType){ @@ -1929,7 +1935,7 @@ NinjaCvsRt.RuntimeSubPath = Object.create(NinjaCvsRt.RuntimeGeomObj, { this._Anchors = []; var i=0; for (i=0;i1) { + this._copyCoordinates3D(this._OrigLocalPoints, this._LocalPoints); + //iterations of Laplacian smoothing (setting the points to the average of their neighbors) + var numLaplacianIterations = this._strokeAmountSmoothing; + for (var n=0;n + + //stroke appearance properties + this._strokeWidth = jo.strokeWidth; + this._strokeColor = jo.strokeColor; + this._strokeHardness = jo.strokeHardness; + this._strokeUseCalligraphic = jo.strokeUseCalligraphic; + this._strokeAngle = jo.strokeAngle; + + //stroke smoothing properties + this._strokeDoSmoothing = jo.strokeDoSmoothing; + this._strokeAmountSmoothing = jo.strokeAmountSmoothing; + + this._doSmoothing(); //after smoothing, the stroke is ready to be rendered + } + }, + + render: { + value: function() { + // get the world + var world = this.getWorld(); + if (!world) { + throw( "null world in brush stroke render" ); + return; + } + + // get the context + var ctx = world.get2DContext(); + if (!ctx) { + throw( "null world in brush stroke render" ); + return; + } + + ctx.save(); + + //**** BEGIN RENDER CODE BLOCK **** + var points = this._LocalPoints; + var numPoints = points.length; + var tempP, p; + if (this._strokeUseCalligraphic) { + //build the stamp for the brush stroke + var t=0; + var numTraces = this._strokeWidth; + var halfNumTraces = numTraces*0.5; + var opaqueRegionHalfWidth = 0.5*this._strokeHardness*numTraces*0.01; //the 0.01 is to convert the strokeHardness from [0,100] to [0,1] + var maxTransparentRegionHalfWidth = halfNumTraces-opaqueRegionHalfWidth; + + //build an angled (calligraphic) brush stamp + var deltaDisplacement = [Math.cos(this._strokeAngle),Math.sin(this._strokeAngle)]; + deltaDisplacement = VecUtils.vecNormalize(2, deltaDisplacement, 1); + var startPos = [-halfNumTraces*deltaDisplacement[0],-halfNumTraces*deltaDisplacement[1]]; + + var brushStamp = []; + for (t=0;t0) { + var transparencyFactor = distFromOpaqueRegion/maxTransparentRegionHalfWidth; + alphaVal = 1.0 - transparencyFactor;//(transparencyFactor*transparencyFactor);//the square term produces nonlinearly varying alpha values + alphaVal *= 0.5; //factor that accounts for lineWidth == 2 + } + ctx.save(); + if (t === (numTraces-1) || t === 0){ + ctx.lineWidth = 1; + } else { + ctx.lineWidth=2; + } + ctx.strokeStyle="rgba("+parseInt(255*this._strokeColor[0])+","+parseInt(255*this._strokeColor[1])+","+parseInt(255*this._strokeColor[2])+","+alphaVal+")"; + ctx.translate(disp[0],disp[1]); + ctx.beginPath(); + p = points[0]; + ctx.moveTo(p[0],p[1]); + for (var i=0;i