From a809c6b3ba6f024922dd3f10bbc4ab456de2407e Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Wed, 2 May 2012 15:45:43 -0700 Subject: Converting line, circle and rectangle shapes to object literal notation. Signed-off-by: Nivesh Rajbhandari --- js/lib/geom/line.js | 914 ++++++++++++++++++++++++++-------------------------- 1 file changed, 456 insertions(+), 458 deletions(-) (limited to 'js/lib/geom/line.js') diff --git a/js/lib/geom/line.js b/js/lib/geom/line.js index bb198d83..3c811698 100755 --- a/js/lib/geom/line.js +++ b/js/lib/geom/line.js @@ -12,500 +12,498 @@ var MaterialsModel = require("js/models/materials-model").MaterialsModel; // GL representation of a line. // Derived from class GeomObj /////////////////////////////////////////////////////////////////////// -var Line = function GLLine( world, xOffset, yOffset, width, height, slope, strokeSize, strokeColor, strokeMaterial, strokeStyle, xAdj, yAdj) { - /////////////////////////////////////////////////////////////////////// - // Instance variables - /////////////////////////////////////////////////////////////////////// - this._width = 2.0; - this._height = 2.0; - this._xOffset = 0; - this._yOffset = 0; +exports.Line = Object.create(GeomObj, { + /////////////////////////////////////////////////////////////////////// + // Instance variables + /////////////////////////////////////////////////////////////////////// + _width: { value : 2.0, writable: true }, + _height: { value : 2.0, writable: true }, + _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 - this._xAdj = 0; - this._yAdj = 0; - - this._slope = 0; + _xAdj: { value : 0, writable: true }, + _yAdj: { value : 0, writable: true }, - this._strokeWidth = 0.25; + _slope: { value : 0, writable: true }, - this._strokeStyle = "Solid"; - this._scaleX = 1.0; - this._scaleY = 1.0; + _strokeWidth: { value : 0.25, writable: true }, + _strokeStyle: { value : "Solid", writable: true }, - this.canFill = false; + _scaleX: { value : 1.0, writable: true }, + _scaleY: { value : 1.0, writable: true }, - if (arguments.length > 0) { - this._width = width; - this._height = height; - this._xOffset = xOffset; - this._yOffset = yOffset; + canFill: { value : false, writable: false }, - this._xAdj = xAdj; - this._yAdj = yAdj; + init: { + value: function(world, xOffset, yOffset, width, height, slope, strokeSize, strokeColor, strokeMaterial, strokeStyle, xAdj, yAdj) { + if (arguments.length > 0) { + this._width = width; + this._height = height; + this._xOffset = xOffset; + this._yOffset = yOffset; - this._slope = slope; - this._strokeWidth = strokeSize; - this._strokeColor = strokeColor; + this._xAdj = xAdj; + this._yAdj = yAdj; - this._strokeStyle = strokeStyle; - this._scaleX = (world.getViewportWidth())/(world.getViewportHeight()); - } + this._slope = slope; + this._strokeWidth = strokeSize; + this._strokeColor = strokeColor; - this._strokeVerticesLen = 0; + this._strokeStyle = strokeStyle; + this._scaleX = (world.getViewportWidth())/(world.getViewportHeight()); + } - this.m_world = world; + this._strokeVerticesLen = 0; - this._materialAmbient = [0.2, 0.2, 0.2, 1.0]; - this._materialDiffuse = [0.4, 0.4, 0.4, 1.0]; - this._materialSpecular = [0.4, 0.4, 0.4, 1.0]; + this.m_world = world; - if(strokeMaterial) { - this._strokeMaterial = strokeMaterial; - } + this._materialAmbient = [0.2, 0.2, 0.2, 1.0]; + this._materialDiffuse = [0.4, 0.4, 0.4, 1.0]; + this._materialSpecular = [0.4, 0.4, 0.4, 1.0]; - /////////////////////////////////////////////////////////////////////// - // Property Accessors - /////////////////////////////////////////////////////////////////////// - this.getStrokeWidth = function() { return this._strokeWidth; } - this.setStrokeWidth = function(w) { this._strokeWidth = w; } + if(strokeMaterial) { + this._strokeMaterial = strokeMaterial; + } + } + }, + + //////////////////////////////////////////////////////////////////////// + // Property Accessors + /////////////////////////////////////////////////////////////////////// + // TODO - Use getters/setters in the future + getStrokeWidth: { + value: function() { + return this._strokeWidth; + } + }, + + setStrokeWidth: { + value: function(w) { + this._strokeWidth = w; + } + }, + + getStrokeMaterial: { + value: function() { + return this._strokeMaterial; + } + }, + + setStrokeMaterial: { + value: function(m) { + this._strokeMaterial = m; + } + }, - this.getStrokeMaterial = function() { return this._strokeMaterial; } - this.setStrokeMaterial = function(m) { this._strokeMaterial = m; } + getFillMaterial: { + value: function() { + return null; + } + }, - this.getStrokeColor = function() { return this._strokeColor; } - //this.setStrokeColor = function(c) { this._strokeColor = c; } + getStrokeColor: { + value: function() { + return this._strokeColor; + } + }, - this.getStrokeStyle = function() { return this._strokeStyle; } - this.setStrokeStyle = function(s) { this._strokeStyle = s; } +// setStrokeColor: { +// value: function(c) { +// this._strokeColor = c; +// } +// }, - this.getFillMaterial = function() { return null; } - - this.setStrokeMaterial = function(m) { this._strokeMaterial = m; } - this.getStrokeMaterial = function() { return this._strokeMaterial; } + getStrokeStyle: { + value: function() { + return this._strokeStyle; + } + }, - this.getWidth = function() { return this._width; } - this.setWidth = function(w) { this._width = w; } + setStrokeStyle: { + value: function(s) { + this._strokeStyle = s; + } + }, - this.getHeight = function() { return this._height; } - this.setHeight = function(h) { this._height = h; } + getWidth: { + value: function() { + return this._width; + } + }, + + setWidth: { + value: function(w) { + this._width = w; + } + }, - this.getXAdj = function() { return this._xAdj; } - this.setXAdj = function(x) { this._xAdj = x; } + getHeight: { + value: function() { + return this._height; + } + }, - this.getYAdj = function() { return this._yAdj; } - this.setYAdj = function(y) { this._yAdj = y; } + setHeight: { + value: function(h) { + this._height = h; + } + }, - this.getSlope = function() { return this._slope; } - this.setSlope = function(m) { this._slope = m; } + getXAdj: { + value: function() { + return this._xAdj; + } + }, - this.geomType = function() { return this.GEOM_TYPE_LINE; } + setXAdj: { + value: function(x) { + this._xAdj = x; + } + }, - /////////////////////////////////////////////////////////////////////// - // Methods - /////////////////////////////////////////////////////////////////////// - this.exportJSON = 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() - }; - - return jObj; - }; - - this.importJSON = 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; - - var strokeMat = MaterialsModel.getMaterial( strokeMaterialName ); - if (!strokeMat) { - console.log( "object material not found in library: " + strokeMaterialName ); - strokeMat = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ); + getYAdj: { + value: function() { + return this._yAdj; } - this._strokeMaterial = strokeMat; + }, - this.importMaterialsJSON( jObj.materials ); - }; + setYAdj: { + value: function(y) { + this._yAdj = y; + } + }, + + getSlope: { + value: function() { + return this._slope; + } + }, + + setSlope: { + value: function(m) { + this._slope = m; + } + }, + + geomType: { + value: function() { + return this.GEOM_TYPE_LINE; + } + }, /////////////////////////////////////////////////////////////////////// // Methods /////////////////////////////////////////////////////////////////////// - this.buildBuffers = function() { - // get the world - var world = this.getWorld(); - if (!world) throw( "null world in buildBuffers" ); - if (!world._useWebGL) return; - - // make sure RDGE has the correct context - RDGE.globals.engine.setContext( world.getCanvas().rdgeid ); - - // create the gl buffer - var gl = world.getGLContext(); - - this._strokeVerticesLen = 0; - - var strokeVertices = []; - var strokeTextures = []; - var strokeNormals = []; - var strokeColors = []; - -// var scaleMat = Matrix.I(3); -// scaleMat.elements[0][0] = this._scaleX; -// scaleMat.elements[1][1] = this._scaleY; - - - // 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, - 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), - b = -t, - r = aspect*t, - l = -r; - - // calculate the object coordinates from their NDC coordinates - var z = -world.getViewDistance(); - - // get the position of the origin - var x = -z*(r-l)/(2.0*zn)*xNDC, - y = -z*(t-b)/(2.0*zn)*yNDC; - - // get the x and y fill - var xFill = -z*(r-l)/(2.0*zn)*xFillNDC, - yFill = -z*(t-b)/(2.0*zn)*yFillNDC; - - // get the x & y stroke size - var xStroke = -z*(r-l)/(2.0*zn)*xStrokeNDC, - yStroke = -z*(t-b)/(2.0*zn)*yStrokeNDC; - - // get the x & y adjustments size - var xAdj = -z*(r-l)/(2.0*zn)*xAdjNDC*2, - yAdj = -z*(t-b)/(2.0*zn)*yAdjNDC*2; - - - this._primArray = []; - this._materialArray = []; - this._materialTypeArray = []; - this._materialNodeArray = []; - - this._scaleX = (world._viewportWidth)/(world._viewportHeight); - - var innerX = xFill-xStroke; - var innerY = yFill-yStroke; - - if(this._slope === "vertical") { - strokeVertices = [ - -xFill+x, yFill+y, 0.0, - xFill+x, yFill+y, 0.0, - -xFill+x, -yFill+y, 0.0, - - xFill+x, -yFill+y, 0.0, - -xFill+x, -yFill+y, 0.0, - xFill+x, yFill+y, 0.0 - ]; - - strokeTextures = [ - 0, 1, - 1, 1, - 0, 0, - - 1, 0, - 0, 0, - 1, 1 - ]; - } else if(this._slope === "horizontal") { - // right now, this is the same as vertical line because, - // our canvas is the same size as us. - // But, we will need to use this when drawing in an existing GLWorld with other shapes - strokeVertices = [ - -xFill+x, yFill+y, 0.0, - xFill+x, yFill+y, 0.0, - -xFill+x, -yFill+y, 0.0, - - xFill+x, -yFill+y, 0.0, - -xFill+x, -yFill+y, 0.0, - xFill+x, yFill+y, 0.0 - ]; - - strokeTextures = [ - 0, 1, - 1, 1, - 0, 0, - - 1, 0, - 0, 0, - 1, 1 - ]; - } else if(this._slope > 0) { - // if slope is positive, draw a line from top-left to bottom-right - strokeVertices = [ - -xFill+x, yFill-2*yAdj+y, 0.0, - -xFill+2*xAdj+x, yFill+y, 0.0, - xFill-2*xAdj+x, -yFill+y, 0.0, - - xFill+x, -yFill+2*yAdj+y, 0.0, - xFill-2*xAdj+x, -yFill+y, 0.0, - -xFill+2*xAdj+x, yFill+y, 0.0 - ]; - - strokeTextures = [ - 0, 0, - 0, 1, - 1, 0, - - 1, 1, - 1, 0, - 0, 1 - ]; - } else { - // else slope is negative, draw a line from bottom-left to top-right - strokeVertices = [ - xFill-2*xAdj+x, yFill+y, 0.0, - -xFill+2*xAdj+x, -yFill+y, 0.0, - -xFill+x, -yFill+2*yAdj+y, 0.0, - - -xFill+2*xAdj+x, -yFill+y, 0.0, - xFill-2*xAdj+x, yFill+y, 0.0, - xFill+x, yFill-2*yAdj+y, 0.0 - ]; - - strokeTextures = [ - 1, 1, - 0, 0, - 0, 1, - - 0, 0, - 1, 1, - 1, 0 - ]; - } - - var z = 0; - var indices = []; - var nVerts = strokeVertices.length/3; - - // stroke normals - var index = 0; - for (var i=0; i 0) { + // if slope is positive, draw a line from top-left to bottom-right + strokeVertices = [ + -xFill+x, yFill-2*yAdj+y, 0.0, + -xFill+2*xAdj+x, yFill+y, 0.0, + xFill-2*xAdj+x, -yFill+y, 0.0, + + xFill+x, -yFill+2*yAdj+y, 0.0, + xFill-2*xAdj+x, -yFill+y, 0.0, + -xFill+2*xAdj+x, yFill+y, 0.0 + ]; + + strokeTextures = [ + 0, 0, + 0, 1, + 1, 0, + + 1, 1, + 1, 0, + 0, 1 + ]; + } else { + // else slope is negative, draw a line from bottom-left to top-right + strokeVertices = [ + xFill-2*xAdj+x, yFill+y, 0.0, + -xFill+2*xAdj+x, -yFill+y, 0.0, + -xFill+x, -yFill+2*yAdj+y, 0.0, + + -xFill+2*xAdj+x, -yFill+y, 0.0, + xFill-2*xAdj+x, yFill+y, 0.0, + xFill+x, yFill-2*yAdj+y, 0.0 + ]; + + strokeTextures = [ + 1, 1, + 0, 0, + 0, 1, + + 0, 0, + 1, 1, + 1, 0 + ]; + } + + var z = 0; + var indices = []; + var nVerts = strokeVertices.length/3; + + // stroke normals + var index = 0; + for (var i=0; i 0) { + p0 = [this._xAdj, this._yAdj]; + p1 = [w - this._xAdj, h - this._yAdj]; + } else { + p0 = [this._xAdj, h - this._yAdj]; + p1 = [w - this._xAdj, this._yAdj]; + } - } else { - c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")"; - ctx.strokeStyle = c; + // draw the line + ctx.moveTo( p0[0], p0[1] ); + ctx.lineTo( p1[0], p1[1] ); + ctx.stroke(); } + } + }, - // get the points - var p0, p1; - if(this._slope === "vertical") { - p0 = [0.5*w, 0]; - p1 = [0.5*w, h]; - } else if(this._slope === "horizontal") { - p0 = [0, 0.5*h]; - p1 = [w, 0.5*h]; - } else if(this._slope > 0) { - p0 = [this._xAdj, this._yAdj]; - p1 = [w - this._xAdj, h - this._yAdj]; - } else { - p0 = [this._xAdj, h - this._yAdj]; - p1 = [w - this._xAdj, this._yAdj]; - } - - // draw the line - ctx.moveTo( p0[0], p0[1] ); - ctx.lineTo( p1[0], p1[1] ); - ctx.stroke(); - } - }; - - /* - // type is Dotted or Dashed - this.createStippledStrokes = function(strokeVertices, strokeSize, slope, type, innerX, innerY) - { - var stippleLength = strokeSize; - - if (type === "Dotted") - { - stippleLength = this.DOT_LENGTH; - } - else if(type === "Dashed") - { - stippleLength = this.DASH_LENGTH; - } - - var numStrokes = 0; - var startPos = -innerX; - var endPos = innerX; - - var gap = this.GAP_LENGTH; - if(slope === "horizontal") - { - gap *= this._scaleX; - stippleLength *= this._scaleX; - } - else if(slope === "vertical") - { - startPos = -innerY; - endPos = innerY; - } - else - { - if(this._scaleX < 1) - { - startPos = -innerY; - endPos = innerY; - strokeSize = (strokeSize*this._scaleX)/2; -// strokeSize *= this._scaleX; - stippleLength *= this._scaleX; - } - else - { - strokeSize = strokeSize/2; - gap *= this._scaleX; - stippleLength *= this._scaleX; - } - - } - - while(startPos + stippleLength < endPos) - { - if(slope === "horizontal") - { - strokeVertices.push(startPos); strokeVertices.push(-strokeSize); strokeVertices.push(0); - strokeVertices.push(startPos); strokeVertices.push(strokeSize); strokeVertices.push(0); - strokeVertices.push(startPos+stippleLength); strokeVertices.push(-strokeSize); strokeVertices.push(0); - - strokeVertices.push(startPos); strokeVertices.push(strokeSize); strokeVertices.push(0); - strokeVertices.push(startPos+stippleLength); strokeVertices.push(-strokeSize); strokeVertices.push(0); - strokeVertices.push(startPos+stippleLength); strokeVertices.push(strokeSize); strokeVertices.push(0); - } - else if(slope === "vertical") - { - strokeVertices.push(-strokeSize); strokeVertices.push(startPos); strokeVertices.push(0); - strokeVertices.push(strokeSize); strokeVertices.push(startPos); strokeVertices.push(0); - strokeVertices.push(-strokeSize); strokeVertices.push(startPos+stippleLength); strokeVertices.push(0); - - strokeVertices.push(strokeSize); strokeVertices.push(startPos); strokeVertices.push(0); - strokeVertices.push(-strokeSize); strokeVertices.push(startPos+stippleLength); strokeVertices.push(0); - strokeVertices.push(strokeSize); strokeVertices.push(startPos+stippleLength); strokeVertices.push(0); - } - else - { - strokeVertices.push(startPos); strokeVertices.push(startPos*-slope-strokeSize); strokeVertices.push(0); - strokeVertices.push(startPos); strokeVertices.push(startPos*-slope+strokeSize); strokeVertices.push(0); - strokeVertices.push(startPos+stippleLength); strokeVertices.push((startPos+stippleLength)*-slope-strokeSize); strokeVertices.push(0); - - strokeVertices.push(startPos); strokeVertices.push(startPos*-slope+strokeSize); strokeVertices.push(0); - strokeVertices.push(startPos+stippleLength); strokeVertices.push((startPos+stippleLength)*-slope-strokeSize); strokeVertices.push(0); - strokeVertices.push(startPos+stippleLength); strokeVertices.push((startPos+stippleLength)*-slope+strokeSize); strokeVertices.push(0); - } - - numStrokes += 6; - - startPos += (stippleLength+gap); - } -// - return numStrokes; - } - */ - - this.collidesWithPoint = function( x, y ) { - if(x < this._xOffset) return false; - if(x > (this._xOffset + this._width)) return false; - if(y < this._yOffset) return false; - if(y > (this._yOffset + this._height)) return false; - - return true; - } - }; - -Line.prototype = new GeomObj(); - -if (typeof exports === "object") { - exports.Line = Line; -} + collidesWithPoint: { + value: function(x, y) { + if(x < this._xOffset) return false; + if(x > (this._xOffset + this._width)) return false; + if(y < this._yOffset) return false; + if(y > (this._yOffset + this._height)) return false; + return true; + } + } +}); -- cgit v1.2.3