From 648ee61ae84216d0236e0dbc211addc13b2cfa3a Mon Sep 17 00:00:00 2001 From: Kris Kowal Date: Fri, 6 Jul 2012 11:52:06 -0700 Subject: Expand tabs --- js/lib/geom/circle.js | 216 ++++---- js/lib/geom/geom-obj.js | 40 +- js/lib/geom/line.js | 68 +-- js/lib/geom/rectangle.js | 1132 ++++++++++++++++++++-------------------- js/lib/geom/shape-primitive.js | 336 ++++++------ 5 files changed, 896 insertions(+), 896 deletions(-) (limited to 'js/lib/geom') diff --git a/js/lib/geom/circle.js b/js/lib/geom/circle.js index 39cde514..a06355eb 100755 --- a/js/lib/geom/circle.js +++ b/js/lib/geom/circle.js @@ -31,14 +31,14 @@ POSSIBILITY OF SUCH DAMAGE. var GeomObj = require("js/lib/geom/geom-obj").GeomObj; var ShapePrimitive = require("js/lib/geom/shape-primitive").ShapePrimitive; var MaterialsModel = require("js/models/materials-model").MaterialsModel; -var drawUtils = require("js/helper-classes/3D/draw-utils").DrawUtils; -var vecUtils = require("js/helper-classes/3D/vec-utils").VecUtils; +var drawUtils = require("js/helper-classes/3D/draw-utils").DrawUtils; +var vecUtils = require("js/helper-classes/3D/vec-utils").VecUtils; /////////////////////////////////////////////////////////////////////// // Class GLCircle // GL representation of a circle. // Derived from class GLGeomObj -// The position and dimensions of the stroke, fill, and inner Radius should be in pixels +// The position and dimensions of the stroke, fill, and inner Radius should be in pixels /////////////////////////////////////////////////////////////////////// exports.Circle = Object.create(GeomObj, { @@ -57,7 +57,7 @@ exports.Circle = Object.create(GeomObj, { _strokeStyle: { value : "Solid", writable: true }, _aspectRatio: { value : 1.0, writable: true }, - init: { + init: { value: function(world, xOffset, yOffset, width, height, strokeSize, strokeColor, fillColor, innerRadius, strokeMaterial, fillMaterial, strokeStyle) { if(arguments.length > 0) { this._width = width; @@ -85,14 +85,14 @@ exports.Circle = Object.create(GeomObj, { } else { this._strokeMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ).dup(); } - if (strokeColor && this._strokeMaterial.hasProperty( "color" )) this._strokeMaterial.setProperty( "color", this._strokeColor ); + if (strokeColor && this._strokeMaterial.hasProperty( "color" )) this._strokeMaterial.setProperty( "color", this._strokeColor ); if(fillMaterial) { this._fillMaterial = fillMaterial.dup(); } else { this._fillMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ).dup(); } - if (fillColor && this._fillMaterial.hasProperty( "color" )) this._fillMaterial.setProperty( "color", this._fillColor ); + if (fillColor && this._fillMaterial.hasProperty( "color" )) this._fillMaterial.setProperty( "color", this._fillColor ); } }, @@ -203,7 +203,7 @@ exports.Circle = Object.create(GeomObj, { }, /////////////////////////////////////////////////////////////////////// - // update the "color of the material + // update the "color of the material getFillColor: { value: function() { return this._fillColor; @@ -251,15 +251,15 @@ exports.Circle = Object.create(GeomObj, { // get the normalized device coordinates (NDC) for // all position and dimensions. - var vpw = world.getViewportWidth(), vph = world.getViewportHeight(); - var xNDC = 2*this._xOffset/vpw, yNDC = -2*this._yOffset/vph, + var vpw = world.getViewportWidth(), vph = world.getViewportHeight(); + var xNDC = 2*this._xOffset/vpw, yNDC = -2*this._yOffset/vph, xRadNDC = this._width/vpw, yRadNDC = this._height/vph, xStrokeNDC = 2*this._strokeWidth/vpw, yStrokeNDC = 2*this._strokeWidth/vph, xInnRadNDC = this._innerRadius*xRadNDC, yInnRadNDC = this._innerRadius*yRadNDC; var aspect = world.getAspect(); var zn = world.getZNear(), zf = world.getZFar(); - var t = zn * Math.tan(world.getFOV() * Math.PI / 360.0), + var t = zn * Math.tan(world.getFOV() * Math.PI / 360.0), b = -t, r = aspect*t, l = -r; @@ -321,7 +321,7 @@ exports.Circle = Object.create(GeomObj, { if(this._strokeWidth > 0) { var numStrokes = 1; if(this._innerRadius !== 0) { - strokeMaterial0 = this.makeStrokeMaterial(); + strokeMaterial0 = this.makeStrokeMaterial(); strokePrim0 = this.generateOvalRing(x, y, reverseRotMat, innerStrokeScaleMat, innerRadiusScaleMat, nTriangles, strokeMaterial0); } @@ -330,14 +330,14 @@ exports.Circle = Object.create(GeomObj, { } if (strokePrim0) { - strokeMaterial0.fitToPrimitive( strokePrim0 ); + strokeMaterial0.fitToPrimitive( strokePrim0 ); this._primArray.push( strokePrim0 ); this._materialNodeArray.push( strokeMaterial0.getMaterialNode() ); } if (strokePrim1) { - strokeMaterial2.fitToPrimitive( strokePrim1 ); + strokeMaterial2.fitToPrimitive( strokePrim1 ); this._primArray.push( strokePrim1 ); this._materialNodeArray.push( strokeMaterial2.getMaterialNode() ); @@ -353,7 +353,7 @@ exports.Circle = Object.create(GeomObj, { } if (fillPrim) { - fillMaterial.fitToPrimitive( fillPrim ); + fillMaterial.fitToPrimitive( fillPrim ); this._primArray.push( fillPrim ); this._materialNodeArray.push( fillMaterial.getMaterialNode() ); @@ -371,7 +371,7 @@ exports.Circle = Object.create(GeomObj, { var x = pts[0], y = pts[1], z = 0; var xs = scaleMat[0], ys = scaleMat[4]; - var vrts = [], nrms = [], uvs = [], indices = []; + var vrts = [], nrms = [], uvs = [], indices = []; var index = 0; for (var i=0; i xMax) xMax = vrts[index]; - - if (vrts[index+1] < yMin) yMin = vrts[index+1]; - else if (vrts[index+1] > yMax) yMax = vrts[index+1]; - - index += 3; - } - var ovalWidth = xMax - xMin, - ovalHeight = yMax - yMin; - for (i=0; i uMax) uMax = uvs[iuv]; - - iuv++; ivrt++; - uvs[iuv] = (vrts[ivrt]-yMin)/ovalHeight; - if (uvs[iuv] < vMin) vMin = uvs[iuv]; - if (uvs[iuv] > vMax) vMax = uvs[iuv]; - iuv++; ivrt += 2; - } - - //console.log( "remap" ); - //console.log( "uRange: " + uMin + " => " + uMax ); - //console.log( "vRange: " + vMin + " => " + vMax ); - } - } + recalcTexMapCoords: { + value: function(vrts, uvs) { + var n = vrts.length/3; + if (n === 0) return; + var ivrt = 0, iuv = 0; + var uMin = 1.e8, uMax = -1.e8, + vMin = 1.e8, vMax = -1.e8; + + var i, index = 3; + var xMin = vrts[0], xMax = vrts[0], + yMin = vrts[1], yMax = vrts[1]; + for (i=1; i xMax) xMax = vrts[index]; + + if (vrts[index+1] < yMin) yMin = vrts[index+1]; + else if (vrts[index+1] > yMax) yMax = vrts[index+1]; + + index += 3; + } + var ovalWidth = xMax - xMin, + ovalHeight = yMax - yMin; + for (i=0; i uMax) uMax = uvs[iuv]; + + iuv++; ivrt++; + uvs[iuv] = (vrts[ivrt]-yMin)/ovalHeight; + if (uvs[iuv] < vMin) vMin = uvs[iuv]; + if (uvs[iuv] > vMax) vMax = uvs[iuv]; + iuv++; ivrt += 2; + } + + //console.log( "remap" ); + //console.log( "uRange: " + uMin + " => " + uMax ); + //console.log( "vRange: " + vMin + " => " + vMax ); + } + } }); diff --git a/js/lib/geom/geom-obj.js b/js/lib/geom/geom-obj.js index 4b8e1c69..c0c7504f 100755 --- a/js/lib/geom/geom-obj.js +++ b/js/lib/geom/geom-obj.js @@ -305,13 +305,13 @@ exports.GeomObj = Object.create(Object.prototype, { this._materialArray.push(strokeMaterial); this._materialTypeArray.push("stroke"); - // don't set the value here. The material editor may set a color directly - // to the material without setting this value in the obj. The following - // lines of code will clobber the value in the material + // don't set the value here. The material editor may set a color directly + // to the material without setting this value in the obj. The following + // lines of code will clobber the value in the material //if (this._strokeColor) // this.setStrokeColor(this._strokeColor); - this._strokeMaterial = strokeMaterial; + this._strokeMaterial = strokeMaterial; return strokeMaterial; } @@ -332,14 +332,14 @@ exports.GeomObj = Object.create(Object.prototype, { this._materialArray.push(fillMaterial); this._materialTypeArray.push("fill"); - - // don't set the value here. The material editor may set a color directly - // to the material without setting this value in the obj. The following - // lines of code will clobber the value in the material + + // don't set the value here. The material editor may set a color directly + // to the material without setting this value in the obj. The following + // lines of code will clobber the value in the material //if (this._fillColor) // this.setFillColor(this._fillColor); - this._fillMaterial = fillMaterial; + this._fillMaterial = fillMaterial; return fillMaterial; } @@ -347,7 +347,7 @@ exports.GeomObj = Object.create(Object.prototype, { exportMaterialsJSON: { value: function() { - MaterialsModel = require("js/models/materials-model").MaterialsModel; + MaterialsModel = require("js/models/materials-model").MaterialsModel; var jObj; if (this._materialArray && this._materialNodeArray && this.getWorld().isWebGL()) { @@ -379,7 +379,7 @@ exports.GeomObj = Object.create(Object.prototype, { importMaterialsJSON: { value: function(jObj) { - MaterialsModel = require("js/models/materials-model").MaterialsModel; + MaterialsModel = require("js/models/materials-model").MaterialsModel; this._materialArray = []; this._materialTypeArray = []; @@ -406,7 +406,7 @@ exports.GeomObj = Object.create(Object.prototype, { case "tunnel": case "reliefTunnel": case "squareTunnel": - case "flag": + case "flag": case "twist": case "fly": case "julia": @@ -416,8 +416,8 @@ exports.GeomObj = Object.create(Object.prototype, { case "keleidoscope": case "radialBlur": case "pulse": - case "twistVert": - case "taper": + case "twistVert": + case "taper": mat = MaterialsModel.getMaterialByShader(shaderName); if (mat) mat = mat.dup(); break; @@ -471,12 +471,12 @@ exports.GeomObj = Object.create(Object.prototype, { // get the normalized device coordinates (NDC) for // all position and dimensions. var world = this.getWorld(); - var vpw = world.getViewportWidth(), vph = world.getViewportHeight(); - var xNDC = 2*this._xOffset/vpw, yNDC = -2*this._yOffset/vph; + var vpw = world.getViewportWidth(), vph = world.getViewportHeight(); + var xNDC = 2*this._xOffset/vpw, yNDC = -2*this._yOffset/vph; var aspect = world.getAspect(); var zn = world.getZNear(), zf = world.getZFar(); - var t = zn * Math.tan(world.getFOV() * Math.PI / 360.0), + var t = zn * Math.tan(world.getFOV() * Math.PI / 360.0), b = -t, r = aspect*t, l = -r; @@ -501,12 +501,12 @@ exports.GeomObj = Object.create(Object.prototype, { // get the normalized device coordinates (NDC) for // all position and dimensions. var world = this.getWorld(); - var vpw = world.getViewportWidth(), vph = world.getViewportHeight(); - var xNDC = 2*preViewPt[0]/vpw, yNDC = -2*preViewPt[1]/vph; + var vpw = world.getViewportWidth(), vph = world.getViewportHeight(); + var xNDC = 2*preViewPt[0]/vpw, yNDC = -2*preViewPt[1]/vph; var aspect = world.getAspect(); var zn = world.getZNear(), zf = world.getZFar(); - var t = zn * Math.tan(world.getFOV() * Math.PI / 360.0), + var t = zn * Math.tan(world.getFOV() * Math.PI / 360.0), b = -t, r = aspect*t, l = -r; diff --git a/js/lib/geom/line.js b/js/lib/geom/line.js index a44026eb..2b46b0f5 100755 --- a/js/lib/geom/line.js +++ b/js/lib/geom/line.js @@ -45,7 +45,7 @@ exports.Line = Object.create(GeomObj, { _xOffset: { value : 0, writable: true }, _yOffset: { value : 0, writable: true }, - // If line doesn't fit in canvas world, we had to grow the canvas by this much on either side + // If line doesn't fit in canvas world, we had to grow the canvas by this much on either side _xAdj: { value : 0, writable: true }, _yAdj: { value : 0, writable: true }, @@ -88,12 +88,12 @@ exports.Line = Object.create(GeomObj, { if(strokeMaterial) { this._strokeMaterial = strokeMaterial; - if (strokeColor && this._strokeMaterial.hasProperty( "color" )) this._strokeMaterial.setProperty( "color", this._strokeColor ); + if (strokeColor && this._strokeMaterial.hasProperty( "color" )) this._strokeMaterial.setProperty( "color", this._strokeColor ); } } }, - //////////////////////////////////////////////////////////////////////// + //////////////////////////////////////////////////////////////////////// // Property Accessors /////////////////////////////////////////////////////////////////////// // TODO - Use getters/setters in the future @@ -217,26 +217,26 @@ exports.Line = Object.create(GeomObj, { } }, - /////////////////////////////////////////////////////////////////////// - // Methods - /////////////////////////////////////////////////////////////////////// + /////////////////////////////////////////////////////////////////////// + // Methods + /////////////////////////////////////////////////////////////////////// exportJSON: { value: function() { var jObj = { - 'type' : this.geomType(), - 'xoff' : this._xOffset, - 'yoff' : this._yOffset, - 'width' : this._width, - 'height' : this._height, - 'xAdj' : this._xAdj, - 'yAdj' : this._yAdj, - 'slope' : this._slope, - 'strokeWidth' : this._strokeWidth, - 'strokeColor' : this._strokeColor, - 'strokeStyle' : this._strokeStyle, - 'strokeMat' : this._strokeMaterial ? this._strokeMaterial.getName() : MaterialsModel.getDefaultMaterialName(), - 'materials' : this.exportMaterialsJSON() + 'type' : this.geomType(), + 'xoff' : this._xOffset, + 'yoff' : this._yOffset, + 'width' : this._width, + 'height' : this._height, + 'xAdj' : this._xAdj, + 'yAdj' : this._yAdj, + 'slope' : this._slope, + 'strokeWidth' : this._strokeWidth, + 'strokeColor' : this._strokeColor, + 'strokeStyle' : this._strokeStyle, + 'strokeMat' : this._strokeMaterial ? this._strokeMaterial.getName() : MaterialsModel.getDefaultMaterialName(), + 'materials' : this.exportMaterialsJSON() }; return jObj; @@ -245,17 +245,17 @@ exports.Line = Object.create(GeomObj, { importJSON: { value: function(jObj) { - this._xOffset = jObj.xoff; - this._yOffset = jObj.yoff; - this._width = jObj.width; - this._height = jObj.height; - this._xAdj = jObj.xAdj; - this._yAdj = jObj.yAdj; - this._strokeWidth = jObj.strokeWidth; - this._slope = jObj.slope; - this._strokeStyle = jObj.strokeStyle; - this._strokeColor = jObj.strokeColor; - var strokeMaterialName = jObj.strokeMat; + this._xOffset = jObj.xoff; + this._yOffset = jObj.yoff; + this._width = jObj.width; + this._height = jObj.height; + this._xAdj = jObj.xAdj; + this._yAdj = jObj.yAdj; + this._strokeWidth = jObj.strokeWidth; + this._slope = jObj.slope; + this._strokeStyle = jObj.strokeStyle; + this._strokeColor = jObj.strokeColor; + var strokeMaterialName = jObj.strokeMat; var strokeMat = MaterialsModel.getMaterial( strokeMaterialName ); if (!strokeMat) { @@ -295,15 +295,15 @@ exports.Line = Object.create(GeomObj, { // get the normalized device coordinates (NDC) for // all position and dimensions. - var vpw = world.getViewportWidth(), vph = world.getViewportHeight(); - var xNDC = 2*this._xOffset/vpw, yNDC = 2*this._yOffset/vph, + var vpw = world.getViewportWidth(), vph = world.getViewportHeight(); + var xNDC = 2*this._xOffset/vpw, yNDC = 2*this._yOffset/vph, xFillNDC = this._width/vpw, yFillNDC = this._height/vph, xAdjNDC = this._xAdj/vpw, yAdjNDC = this._yAdj/vph, xStrokeNDC = this._strokeWidth/vpw, yStrokeNDC = this._strokeWidth/vph; var aspect = world.getAspect(); var zn = world.getZNear(), zf = world.getZFar(); - var t = zn * Math.tan(world.getFOV() * Math.PI / 360.0), + var t = zn * Math.tan(world.getFOV() * Math.PI / 360.0), b = -t, r = aspect*t, l = -r; @@ -472,7 +472,7 @@ exports.Line = Object.create(GeomObj, { cs; ctx.beginPath(); - ctx.lineWidth = lineWidth; + ctx.lineWidth = lineWidth; if (this._strokeColor) { if(this._strokeColor.gradientMode) { if(this._strokeColor.gradientMode === "radial") { diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js index 0d302d50..ec3e25b2 100755 --- a/js/lib/geom/rectangle.js +++ b/js/lib/geom/rectangle.js @@ -38,15 +38,15 @@ var MaterialsModel = require("js/models/materials-model").MaterialsModel; // Derived from class GeomObj /////////////////////////////////////////////////////////////////////// exports.Rectangle = Object.create(GeomObj, { - // CONSTANTS - N_TRIANGLES: { value : 15, writable: false }, // TODO - This is not being used anywhere. Remove? + // CONSTANTS + N_TRIANGLES: { value : 15, writable: false }, // TODO - This is not being used anywhere. Remove? - //if (!MaterialsModel) - // MaterialsModel = require("js/models/materials-model").MaterialsModel; + //if (!MaterialsModel) + // MaterialsModel = require("js/models/materials-model").MaterialsModel; - /////////////////////////////////////////////////////////////////////// - // Instance variables - /////////////////////////////////////////////////////////////////////// + /////////////////////////////////////////////////////////////////////// + // Instance variables + /////////////////////////////////////////////////////////////////////// _width: { value : 2.0, writable: true }, _height: { value : 2.0, writable: true }, _xOffset: { value : 0, writable: true }, @@ -82,7 +82,7 @@ exports.Rectangle = Object.create(GeomObj, { this._strokeStyle = strokeStyle; - this._matrix = Matrix.I(4); + this._matrix = Matrix.I(4); } // the overall radius includes the fill and the stroke. separate the two based on the stroke width @@ -101,7 +101,7 @@ exports.Rectangle = Object.create(GeomObj, { } else { this._strokeMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ).dup(); } - if (strokeColor && this._strokeMaterial.hasProperty( "color" )) this._strokeMaterial.setProperty( "color", this._strokeColor ); + if (strokeColor && this._strokeMaterial.hasProperty( "color" )) this._strokeMaterial.setProperty( "color", this._strokeColor ); if(fillMaterial) { @@ -109,11 +109,11 @@ exports.Rectangle = Object.create(GeomObj, { } else { this._fillMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ).dup(); } - if (fillColor && this._fillMaterial.hasProperty( "color" )) this._fillMaterial.setProperty( "color", this._fillColor ); + if (fillColor && this._fillMaterial.hasProperty( "color" )) this._fillMaterial.setProperty( "color", this._fillColor ); } }, - /////////////////////////////////////////////////////////////////////// + /////////////////////////////////////////////////////////////////////// // Property Accessors /////////////////////////////////////////////////////////////////////// // TODO - Use getters/setters in the future @@ -152,7 +152,7 @@ exports.Rectangle = Object.create(GeomObj, { this._fillMaterial = m; } }, - /////////////////////////////////////////////////////////////////////// + /////////////////////////////////////////////////////////////////////// // update the "color of the material getFillColor: { value: function() { @@ -267,31 +267,31 @@ exports.Rectangle = Object.create(GeomObj, { } }, - /////////////////////////////////////////////////////////////////////// - // Methods - /////////////////////////////////////////////////////////////////////// - // JSON export + /////////////////////////////////////////////////////////////////////// + // Methods + /////////////////////////////////////////////////////////////////////// + // JSON export exportJSON: { value: function() { var jObj = { - 'type' : this.geomType(), - 'xoff' : this._xOffset, - 'yoff' : this._yOffset, - 'width' : this._width, - 'height' : this._height, - 'strokeWidth' : this._strokeWidth, - 'strokeColor' : this._strokeColor, - 'fillColor' : this._fillColor, - 'tlRadius' : this._tlRadius, - 'trRadius' : this._trRadius, - 'blRadius' : this._blRadius, - 'brRadius' : this._brRadius, - 'innerRadius' : this._innerRadius, - 'strokeStyle' : this._strokeStyle, - 'strokeMat' : this._strokeMaterial ? this._strokeMaterial.getName() : MaterialsModel.getDefaultMaterialName(), - 'fillMat' : this._fillMaterial ? this._fillMaterial.getName() : MaterialsModel.getDefaultMaterialName(), - 'materials' : this.exportMaterialsJSON() + 'type' : this.geomType(), + 'xoff' : this._xOffset, + 'yoff' : this._yOffset, + 'width' : this._width, + 'height' : this._height, + 'strokeWidth' : this._strokeWidth, + 'strokeColor' : this._strokeColor, + 'fillColor' : this._fillColor, + 'tlRadius' : this._tlRadius, + 'trRadius' : this._trRadius, + 'blRadius' : this._blRadius, + 'brRadius' : this._brRadius, + 'innerRadius' : this._innerRadius, + 'strokeStyle' : this._strokeStyle, + 'strokeMat' : this._strokeMaterial ? this._strokeMaterial.getName() : MaterialsModel.getDefaultMaterialName(), + 'fillMat' : this._fillMaterial ? this._fillMaterial.getName() : MaterialsModel.getDefaultMaterialName(), + 'materials' : this.exportMaterialsJSON() }; return jObj; @@ -300,21 +300,21 @@ exports.Rectangle = Object.create(GeomObj, { importJSON: { value: function(jObj) { - this._xOffset = jObj.xoff; - this._yOffset = jObj.yoff; - this._width = jObj.width; - this._height = jObj.height; - this._strokeWidth = jObj.strokeWidth; - this._strokeColor = jObj.strokeColor; - this._fillColor = jObj.fillColor; - this._tlRadius = jObj.tlRadius; - this._trRadius = jObj.trRadius; - this._blRadius = jObj.blRadius; - this._brRadius = jObj.brRadius; - this._innerRadius = jObj.innerRadius; - this._strokeStyle = jObj.strokeStyle; - var strokeMaterialName = jObj.strokeMat; - var fillMaterialName = jObj.fillMat; + this._xOffset = jObj.xoff; + this._yOffset = jObj.yoff; + this._width = jObj.width; + this._height = jObj.height; + this._strokeWidth = jObj.strokeWidth; + this._strokeColor = jObj.strokeColor; + this._fillColor = jObj.fillColor; + this._tlRadius = jObj.tlRadius; + this._trRadius = jObj.trRadius; + this._blRadius = jObj.blRadius; + this._brRadius = jObj.brRadius; + this._innerRadius = jObj.innerRadius; + this._strokeStyle = jObj.strokeStyle; + var strokeMaterialName = jObj.strokeMat; + var fillMaterialName = jObj.fillMat; var strokeMat = MaterialsModel.getMaterial( strokeMaterialName ).dup(); if (!strokeMat) { @@ -322,8 +322,8 @@ exports.Rectangle = Object.create(GeomObj, { strokeMat = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ).dup(); } this._strokeMaterial = strokeMat; - if (this._strokeMaterial.hasProperty( 'color' )) - this._strokeMaterial.setProperty( 'color', this._strokeColor ); + if (this._strokeMaterial.hasProperty( 'color' )) + this._strokeMaterial.setProperty( 'color', this._strokeColor ); var fillMat = MaterialsModel.getMaterial( fillMaterialName ).dup(); if (!fillMat) { @@ -331,8 +331,8 @@ exports.Rectangle = Object.create(GeomObj, { fillMat = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ).dup(); } this._fillMaterial = fillMat; - if (this._fillMaterial.hasProperty( 'color' )) - this._fillMaterial.setProperty( 'color', this._fillColor ); + if (this._fillMaterial.hasProperty( 'color' )) + this._fillMaterial.setProperty( 'color', this._fillColor ); this.importMaterialsJSON( jObj.materials ); } @@ -409,7 +409,7 @@ exports.Rectangle = Object.create(GeomObj, { // stroke var strokeMaterial = this.makeStrokeMaterial(); var strokePrim = this.createStroke([x,y], 2*xFill, 2*yFill, strokeSize, tlRadius, blRadius, brRadius, trRadius, strokeMaterial); - strokeMaterial.fitToPrimitive( strokePrim ); + strokeMaterial.fitToPrimitive( strokePrim ); this._primArray.push( strokePrim ); this._materialNodeArray.push( strokeMaterial.getMaterialNode() ); @@ -423,7 +423,7 @@ exports.Rectangle = Object.create(GeomObj, { var fillMaterial = this.makeFillMaterial(); //console.log( "fillMaterial: " + fillMaterial.getName() ); var fillPrim = this.createFill([x,y], 2*xFill, 2*yFill, tlRadius, blRadius, brRadius, trRadius, fillMaterial); - fillMaterial.fitToPrimitive( fillPrim ); + fillMaterial.fitToPrimitive( fillPrim ); this._primArray.push( fillPrim ); this._materialNodeArray.push( fillMaterial.getMaterialNode() ); @@ -443,7 +443,7 @@ exports.Rectangle = Object.create(GeomObj, { ctx.quadraticCurveTo( bPts[index][0], bPts[index][1], bPts[index+1][0], bPts[index+1][1] ); index += 2; } - } + } }, renderPath: { @@ -455,7 +455,7 @@ exports.Rectangle = Object.create(GeomObj, { hw = 0.5*width, hh = 0.5*height; - pt = [inset, inset]; // top left corner + pt = [inset, inset]; // top left corner var tlRad = this._tlRadius; //top-left radius var trRad = this._trRadius; @@ -468,36 +468,36 @@ exports.Rectangle = Object.create(GeomObj, { if (brRad > minDimen) brRad = minDimen; if (trRad > minDimen) trRad = minDimen; - var viewUtils = require("js/helper-classes/3D/view-utils").ViewUtils; - var world = this.getWorld(); - viewUtils.pushViewportObj( world.getCanvas() ); - var cop = viewUtils.getCenterOfProjection(); - viewUtils.popViewportObj(); - var xCtr = cop[0] + this._xOffset, yCtr = cop[1] - this._yOffset; - var xLeft = xCtr - 0.5*this.getWidth(), yTop = yCtr - 0.5*this.getHeight(); - var xDist = cop[0] - xLeft, yDist = cop[1] - yTop; - var xOff = 0.5*world.getViewportWidth() - xDist, yOff = 0.5*world.getViewportHeight() - yDist; + var viewUtils = require("js/helper-classes/3D/view-utils").ViewUtils; + var world = this.getWorld(); + viewUtils.pushViewportObj( world.getCanvas() ); + var cop = viewUtils.getCenterOfProjection(); + viewUtils.popViewportObj(); + var xCtr = cop[0] + this._xOffset, yCtr = cop[1] - this._yOffset; + var xLeft = xCtr - 0.5*this.getWidth(), yTop = yCtr - 0.5*this.getHeight(); + var xDist = cop[0] - xLeft, yDist = cop[1] - yTop; + var xOff = 0.5*world.getViewportWidth() - xDist, yOff = 0.5*world.getViewportHeight() - yDist; if ((tlRad <= 0) && (blRad <= 0) && (brRad <= 0) && (trRad <= 0)) { - ctx.rect(pt[0]+xOff, pt[1]+yOff, width - 2*inset, height - 2*inset); + ctx.rect(pt[0]+xOff, pt[1]+yOff, width - 2*inset, height - 2*inset); } else { // get the top left point rad = tlRad - inset; if (rad < 0) rad = 0; pt[1] += rad; if (MathUtils.fpSign(rad) == 0) pt[1] = inset; - ctx.moveTo( pt[0]+xOff, pt[1]+yOff ); + ctx.moveTo( pt[0]+xOff, pt[1]+yOff ); // get the bottom left point pt = [inset, height - inset]; rad = blRad - inset; if (rad < 0) rad = 0; pt[1] -= rad; - ctx.lineTo( pt[0]+xOff, pt[1]+yOff ); + ctx.lineTo( pt[0]+xOff, pt[1]+yOff ); // get the bottom left curve if (MathUtils.fpSign(rad) > 0) { - ctx.quadraticCurveTo( inset+xOff, height-inset+yOff, inset+rad+xOff, height-inset+yOff ); + ctx.quadraticCurveTo( inset+xOff, height-inset+yOff, inset+rad+xOff, height-inset+yOff ); } // do the bottom of the rectangle @@ -505,11 +505,11 @@ exports.Rectangle = Object.create(GeomObj, { rad = brRad - inset; if (rad < 0) rad = 0; pt[0] -= rad; - ctx.lineTo( pt[0]+xOff, pt[1]+yOff ); + ctx.lineTo( pt[0]+xOff, pt[1]+yOff ); // get the bottom right arc if (MathUtils.fpSign(rad) > 0) { - ctx.quadraticCurveTo( width-inset+xOff, height-inset+yOff, width-inset+xOff, height-inset-rad+yOff ); + ctx.quadraticCurveTo( width-inset+xOff, height-inset+yOff, width-inset+xOff, height-inset-rad+yOff ); } // get the right of the rectangle @@ -517,11 +517,11 @@ exports.Rectangle = Object.create(GeomObj, { rad = trRad - inset; if (rad < 0) rad = 0; pt[1] += rad; - ctx.lineTo( pt[0]+xOff, pt[1]+yOff ); + ctx.lineTo( pt[0]+xOff, pt[1]+yOff ); // do the top right corner if (MathUtils.fpSign(rad) > 0) { - ctx.quadraticCurveTo( width-inset+xOff, inset+yOff, width-inset-rad+xOff, inset+yOff ); + ctx.quadraticCurveTo( width-inset+xOff, inset+yOff, width-inset-rad+xOff, inset+yOff ); } // do the top of the rectangle @@ -529,116 +529,116 @@ exports.Rectangle = Object.create(GeomObj, { rad = tlRad - inset; if (rad < 0) rad = 0; pt[0] += rad; - ctx.lineTo( pt[0]+xOff, pt[1]+yOff ); + ctx.lineTo( pt[0]+xOff, pt[1]+yOff ); // do the top left corner if (MathUtils.fpSign(rad) > 0) { - ctx.quadraticCurveTo( inset+xOff, inset+yOff, inset+xOff, inset+rad+yOff ); + ctx.quadraticCurveTo( inset+xOff, inset+yOff, inset+xOff, inset+rad+yOff ); } else { - ctx.lineTo( inset+xOff, 2*inset+yOff ); + ctx.lineTo( inset+xOff, 2*inset+yOff ); } } } }, - render: { - value: function() { - // get the world - var world = this.getWorld(); - if (!world) throw( "null world in rectangle render" ); - - // get the context - var ctx = world.get2DContext(); - if (!ctx) return; - - // get some dimensions - var lw = this._strokeWidth; - var w = world.getViewportWidth(), - h = world.getViewportHeight(); - - var c, - inset, - gradient, - colors, - len, - n, - position, - cs; - // render the fill - ctx.beginPath(); - if (this._fillColor) { - inset = Math.ceil( lw ) - 0.5; - - if(this._fillColor.gradientMode) { - if(this._fillColor.gradientMode === "radial") { - var ww = w - 2*lw, hh = h - 2*lw; - gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(ww, hh)/2); - } else { - gradient = ctx.createLinearGradient(inset, h/2, w-inset, h/2); - } - colors = this._fillColor.color; - - len = colors.length; - - for(n=0; n (this._yOffset + this._height)) return false; return true; - } + } }, containsPoint: { @@ -687,8 +687,8 @@ exports.Rectangle = Object.create(GeomObj, { // get the normalized device coordinates (NDC) for // the position and radii. - var vpw = world.getViewportWidth(), vph = world.getViewportHeight(); - var xNDC = 2*this._xOffset/vpw, yNDC = 2*this._yOffset/vph, + var vpw = world.getViewportWidth(), vph = world.getViewportHeight(); + var xNDC = 2*this._xOffset/vpw, yNDC = 2*this._yOffset/vph, xRadNDC = this._width/vpw, yRadNDC = this._height/vph; var projMat = world.makePerspectiveMatrix(); var z = -world.getViewDistance(); @@ -731,8 +731,8 @@ exports.Rectangle = Object.create(GeomObj, { // get the normalized device coordinates (NDC) for // the position and radii. - var vpw = world.getViewportWidth(), vph = world.getViewportHeight(); - var xNDC = 2*this._xOffset/vpw, yNDC = 2*this._yOffset/vph, + var vpw = world.getViewportWidth(), vph = world.getViewportHeight(); + var xNDC = 2*this._xOffset/vpw, yNDC = 2*this._yOffset/vph, hwNDC = this._width/vpw, hhNDC = this._height/vph; var projMat = world.makePerspectiveMatrix(); var z = -world.getViewDistance(); @@ -777,7 +777,7 @@ exports.Rectangle = Object.create(GeomObj, { x = minPt[0]; y = minPt[1]; var aspect = world.getAspect(); var zn = world.getZNear(), zf = world.getZFar(); - var t = zn * Math.tan(world.getFOV() * Math.PI / 360.0), + var t = zn * Math.tan(world.getFOV() * Math.PI / 360.0), b = -t, r = aspect*t, l = -r; @@ -810,8 +810,8 @@ exports.Rectangle = Object.create(GeomObj, { // get the normalized device coordinates (NDC) for // the position and radii. - var vpw = world.getViewportWidth(), vph = world.getViewportHeight(); - var xNDC = 2*this._xOffset/vpw, yNDC = 2*this._yOffset/vph, + var vpw = world.getViewportWidth(), vph = world.getViewportHeight(); + var xNDC = 2*this._xOffset/vpw, yNDC = 2*this._yOffset/vph, hwNDC = this._width/vpw, hhNDC = this._height/vph; var projMat = world.makePerspectiveMatrix(); var z = -world.getViewDistance(); @@ -864,7 +864,7 @@ exports.Rectangle = Object.create(GeomObj, { x = minPt[0]; y = minPt[1]; var aspect = world.getAspect(); var zn = world.getZNear(), zf = world.getZFar(); - var t = zn * Math.tan(world.getFOV() * Math.PI / 360.0), + var t = zn * Math.tan(world.getFOV() * Math.PI / 360.0), b = -t, r = aspect*t, l = -r; @@ -896,455 +896,455 @@ exports.Rectangle = Object.create(GeomObj, { var RectangleFill = {}; RectangleFill.create = function( rectCtr, width, height, tlRad, blRad, brRad, trRad, material) { - var x = rectCtr[0], y = rectCtr[1], z = 0.0; - var hw = 0.5*width, hh = 0.5*height; - - // limit the radii to half the rectangle dimension - var minDimen = hw < hh ? hw : hh; - if (tlRad > minDimen) tlRad = minDimen; - if (blRad > minDimen) blRad = minDimen; - if (brRad > minDimen) brRad = minDimen; - if (trRad > minDimen) trRad = minDimen; - - // define some local variables - this.vertices = []; - this.normals = []; - this.uvs = []; - this.indices = []; - - // the center of the rectangle is the first vertex - RectangleFill.pushVertex( x, y, z ); - - // traverse the perimiter of the rectangle - - // push the starting point - RectangleFill.pushVertex( x-hw, y+hh-tlRad, z); - - // do the left side - var ctr; - if (blRad <= 0){ - RectangleFill.pushVertex( x-hw, y-hh, z); + var x = rectCtr[0], y = rectCtr[1], z = 0.0; + var hw = 0.5*width, hh = 0.5*height; + + // limit the radii to half the rectangle dimension + var minDimen = hw < hh ? hw : hh; + if (tlRad > minDimen) tlRad = minDimen; + if (blRad > minDimen) blRad = minDimen; + if (brRad > minDimen) brRad = minDimen; + if (trRad > minDimen) trRad = minDimen; + + // define some local variables + this.vertices = []; + this.normals = []; + this.uvs = []; + this.indices = []; + + // the center of the rectangle is the first vertex + RectangleFill.pushVertex( x, y, z ); + + // traverse the perimiter of the rectangle + + // push the starting point + RectangleFill.pushVertex( x-hw, y+hh-tlRad, z); + + // do the left side + var ctr; + if (blRad <= 0){ + RectangleFill.pushVertex( x-hw, y-hh, z); } else { - ctr = [x - hw + blRad, y - hh + blRad, z]; - RectangleFill.getRoundedCorner( ctr, [x-hw, y-hh+blRad, z], this.vertices ); - } + ctr = [x - hw + blRad, y - hh + blRad, z]; + RectangleFill.getRoundedCorner( ctr, [x-hw, y-hh+blRad, z], this.vertices ); + } - // do the bottom - if (brRad <= 0) { - RectangleFill.pushVertex( x+hw, y-hh, z); + // do the bottom + if (brRad <= 0) { + RectangleFill.pushVertex( x+hw, y-hh, z); } else { - ctr = [x + hw - brRad, y - hh + brRad, z]; - RectangleFill.getRoundedCorner( ctr, [x+hw-brRad, y-hh, z], this.vertices ); - } + ctr = [x + hw - brRad, y - hh + brRad, z]; + RectangleFill.getRoundedCorner( ctr, [x+hw-brRad, y-hh, z], this.vertices ); + } - // do the right - if (trRad <= 0) { - RectangleFill.pushVertex( x+hw, y+hh, z); + // do the right + if (trRad <= 0) { + RectangleFill.pushVertex( x+hw, y+hh, z); } else { - ctr = [x + hw - trRad, y + hh - trRad, z]; - RectangleFill.getRoundedCorner( ctr, [x+hw, y+hh-trRad, z], this.vertices ); - } + ctr = [x + hw - trRad, y + hh - trRad, z]; + RectangleFill.getRoundedCorner( ctr, [x+hw, y+hh-trRad, z], this.vertices ); + } - // do the top - if (tlRad <= 0) { - RectangleFill.pushVertex( x-hw, y+hh, z); + // do the top + if (tlRad <= 0) { + RectangleFill.pushVertex( x-hw, y+hh, z); } else { - ctr = [x - hw + tlRad, y + hh - tlRad, z]; - RectangleFill.getRoundedCorner( ctr, [x-hw+tlRad, y+hh, z], this.vertices ); - } - - // get the normals and uvs - var vrt, uv; - var xMin = x - hw, - yMin = y - hh; - var n = [0, 0, 1]; - var nVertices = this.vertices.length / 3; - for (var i=0; i minDimen) tlRad = minDimen; - if (blRad > minDimen) blRad = minDimen; - if (brRad > minDimen) brRad = minDimen; - if (trRad > minDimen) trRad = minDimen; - - // define some local variables - this.vertices = []; - this.normals = []; - this.uvs = []; - this.indices = []; - - // get the starting points - if (tlRad == 0) { - RectangleStroke.pushVertex( x-hw+sw, y+hh-sw, z); - RectangleStroke.pushVertex( x-hw, y+hh, z); - } else { - if (tlRad > sw) { - RectangleStroke.pushVertex( x-hw+sw, y+hh-tlRad, z); - RectangleStroke.pushVertex( x-hw, y+hh-tlRad, z); - } else { - RectangleStroke.pushVertex( x-hw+tlRad, y+hh-tlRad, z); - RectangleStroke.pushVertex( x-hw, y+hh-tlRad, z); - RectangleStroke.pushVertex( x-hw+sw, y+hh-sw, z); - RectangleStroke.pushVertex( x-hw, y+hh-sw, z); - } - } - - // get the left side - if (blRad == 0) { - RectangleStroke.pushVertex( x-hw+sw, y-hh+sw, z); - RectangleStroke.pushVertex( x-hw, y-hh, z); - } else { - if (blRad >= sw) { - RectangleStroke.pushVertex( x-hw+sw, y-hh+blRad, z); - RectangleStroke.pushVertex( x-hw, y-hh+blRad, z); - var ctr = [x-hw+blRad, y-hh+blRad, z], - insidePt = [x-hw+sw, y-hh+blRad, z], - outsidePt = [x-hw, y-hh+blRad, z]; - RectangleStroke.getRoundedCorner( ctr, insidePt, outsidePt, this.vertices ); - } else { - RectangleStroke.pushVertex( x-hw+sw, y-hh+sw, z); - RectangleStroke.pushVertex( x-hw, y-hh+blRad, z); - var ctr = [x-hw+blRad, y-hh+blRad, z], - insidePt = [x-hw+blRad, y-hh+blRad, z], - outsidePt = [x-hw, y-hh+blRad, z]; - RectangleStroke.getRoundedCorner( ctr, insidePt, outsidePt, this.vertices ); - - RectangleStroke.pushVertex( x-hw+sw, y-hh+sw, z); - RectangleStroke.pushVertex( x-hw+sw, y-hh, z); - } - } - - // get the bottom - if (brRad == 0) { - RectangleStroke.pushVertex( x+hw-sw, y-hh+sw, z); - RectangleStroke.pushVertex( x+hw, y-hh, z); - } else { - RectangleStroke.pushVertex( x+hw-brRad, y-hh+sw, z)