From a5ee11857f923d3e49b44c0a8c480e9d0b026d5b Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Wed, 22 Feb 2012 23:18:12 -0800 Subject: CSS Panel Update --- js/lib/NJUtils.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) (limited to 'js/lib') diff --git a/js/lib/NJUtils.js b/js/lib/NJUtils.js index 887743c5..49dfd706 100755 --- a/js/lib/NJUtils.js +++ b/js/lib/NJUtils.js @@ -19,16 +19,18 @@ exports.NJUtils = Object.create(Object.prototype, { ///// Quick "getElementById" $ : { - value: function(id) { - return document.getElementById(id); + value: function(id, doc) { + doc = doc || document; + return doc.getElementById(id); } }, ///// Quick "getElementsByClassName" which also returns as an Array ///// Can return as NodeList by passing true as second argument $$ : { - value: function(className, asNodeList) { - var list = document.getElementsByClassName(className); + value: function(className, asNodeList, doc) { + doc = doc || document; + var list = doc.getElementsByClassName(className); return (asNodeList) ? list : this.toArray(list); } }, -- cgit v1.2.3 From 91a9e02bff0397ec9b1f55fdf61cef72eb0d8a0f Mon Sep 17 00:00:00 2001 From: hwc487 Date: Tue, 8 May 2012 15:53:35 -0700 Subject: Radial gradients to match CSS --- js/lib/geom/circle.js | 3 ++ js/lib/geom/rectangle.js | 13 ++----- js/lib/geom/shape-primitive.js | 27 ++++++++++++++ js/lib/rdge/materials/material.js | 4 +++ js/lib/rdge/materials/radial-gradient-material.js | 43 ++++++++++++++++++++++- 5 files changed, 78 insertions(+), 12 deletions(-) (limited to 'js/lib') diff --git a/js/lib/geom/circle.js b/js/lib/geom/circle.js index 0f1f49a9..afeed449 100755 --- a/js/lib/geom/circle.js +++ b/js/lib/geom/circle.js @@ -279,6 +279,7 @@ var Circle = function GLCircle() { if (fillPrim) { fillMaterial = this.makeFillMaterial(); + fillMaterial.fitToPrimitive( fillPrim ); this._primArray.push( fillPrim ); this._materialNodeArray.push( fillMaterial.getMaterialNode() ); @@ -286,6 +287,7 @@ var Circle = function GLCircle() { if (strokePrim0) { strokeMaterial0 = this.makeStrokeMaterial(); + strokeMaterial0.fitToPrimitive( strokePrim0 ); this._primArray.push( strokePrim0 ); this._materialNodeArray.push( strokeMaterial0.getMaterialNode() ); @@ -293,6 +295,7 @@ var Circle = function GLCircle() { if (strokePrim1) { strokeMaterial2 = this.makeStrokeMaterial(); + strokeMaterial2.fitToPrimitive( strokePrim1 ); this._primArray.push( strokePrim1 ); this._materialNodeArray.push( strokeMaterial2.getMaterialNode() ); diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js index 490a9a6f..296ed024 100755 --- a/js/lib/geom/rectangle.js +++ b/js/lib/geom/rectangle.js @@ -57,13 +57,10 @@ var Rectangle = function GLRectangle() { this._strokeStyle = strokeStyle; this._matrix = Matrix.I(4); - //this._matrix[12] = xoffset; - //this._matrix[13] = yoffset; } // the overall radius includes the fill and the stroke. separate the two based onthe stroke width // this._fillRad = this._radius - this._strokeWidth; - // var err = 0.05; var err = 0; this._fillWidth = this._width - this._strokeWidth + err; this._fillHeight = this._height - this._strokeWidth + err; @@ -116,18 +113,10 @@ var Rectangle = function GLRectangle() { return this._strokeColor; }; - //this.setStrokeColor = function(c) { - // this._strokeColor = c; - // }; - this.getFillColor = function() { return this._fillColor; }; - //this.setFillColor = function(c) { - // this._fillColor = c.slice(0); - // }; - this.getTLRadius = function() { return this._tlRadius; }; @@ -324,6 +313,7 @@ var Rectangle = function GLRectangle() { // stroke var strokeMaterial = this.makeStrokeMaterial(); var strokePrim = this.createStroke([x,y], 2*xFill, 2*yFill, strokeSize, tlRadius, blRadius, brRadius, trRadius, strokeMaterial); + strokeMaterial.fitToPrimitive( strokePrim ); this._primArray.push( strokePrim ); this._materialNodeArray.push( strokeMaterial.getMaterialNode() ); @@ -337,6 +327,7 @@ var Rectangle = function GLRectangle() { 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 ); this._primArray.push( fillPrim ); this._materialNodeArray.push( fillMaterial.getMaterialNode() ); diff --git a/js/lib/geom/shape-primitive.js b/js/lib/geom/shape-primitive.js index 97873d32..9864a8e9 100644 --- a/js/lib/geom/shape-primitive.js +++ b/js/lib/geom/shape-primitive.js @@ -49,6 +49,33 @@ ShapePrimitive.create = function(coords, normals, uvs, indices, primType, ver return prim; }; +ShapePrimitive.getBounds = function( prim ) +{ + var verts = prim.bufferStreams[0]; + var nVerts = verts.length; + var xMin = verts[0], xMax = verts[0], + yMin = verts[1], yMax = verts[1], + zMin = verts[2], zMax = verts[2]; + + for (var index=3; index xMax) xMax = verts[index]; + + index++; + if (verts[index] < yMin) yMin = verts[index]; + else if (verts[index] > yMax) yMax = verts[index]; + + index++; + if (verts[index] < zMin) zMin = verts[index]; + else if (verts[index] > zMax) zMax = verts[index]; + + index++; + } + + return [xMin, yMin, zMin, xMax, yMax, zMax]; +}; + if (typeof exports === "object") { exports.ShapePrimitive = ShapePrimitive; } \ No newline at end of file diff --git a/js/lib/rdge/materials/material.js b/js/lib/rdge/materials/material.js index 276c7687..b96768b3 100755 --- a/js/lib/rdge/materials/material.js +++ b/js/lib/rdge/materials/material.js @@ -228,6 +228,10 @@ var Material = function GLMaterial( world ) { // animated materials should implement the update method }; + this.fitToPrimitive = function( prim ) { + // some materials need to preserve an aspect ratio - or someting else. + }; + this.registerTexture = function( texture ) { // the world needs to know about the texture map var world = this.getWorld(); diff --git a/js/lib/rdge/materials/radial-gradient-material.js b/js/lib/rdge/materials/radial-gradient-material.js index dd40d31d..a671ee42 100755 --- a/js/lib/rdge/materials/radial-gradient-material.js +++ b/js/lib/rdge/materials/radial-gradient-material.js @@ -6,6 +6,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot var MaterialParser = require("js/lib/rdge/materials/material-parser").MaterialParser; var Material = require("js/lib/rdge/materials/material").Material; +var ShapePrimitive = require("js/lib/geom/shape-primitive").ShapePrimitive; var RadialGradientMaterial = function RadialGradientMaterial() { /////////////////////////////////////////////////////////////////////// @@ -24,6 +25,9 @@ var RadialGradientMaterial = function RadialGradientMaterial() { this._colorStop4 = 1.0; // this._colorCount = 4; + var s = Math.sqrt( 2.0 ); + this._textureTransform = [s,0,0, 0,s,0, 0,0,1]; + /////////////////////////////////////////////////////////////////////// // Property Accessors /////////////////////////////////////////////////////////////////////// @@ -231,9 +235,45 @@ var RadialGradientMaterial = function RadialGradientMaterial() { this._shader['default'].u_colorStop3.set([s]); s = this.getColorStop4(); this._shader['default'].u_colorStop4.set([s]); + + this._shader['default'].u_texTransform.set( this._textureTransform ); } }; + this.fitToPrimitive = function( prim ) + { + var bounds = ShapePrimitive.getBounds( prim ); + if (bounds) + { + var dx = Math.abs( bounds[3] - bounds[0] ), + dy = Math.abs( bounds[4] - bounds[1] ); + if (dy == 0) dy = 1.0; + if (dx == 0) dx = 1.0; + var xScale = 2.0, yScale = 2.0; + if (dx > dy) + yScale *= dy/dx; + else + xScale *= dx/dy; + + // build the matrix - the translation to the origin, the scale, + // and the translation back to the center (hard coded at (0.5, 0.5) for now). + // the matrix is build directly instead of with matrix multiplications + // for efficiency, not to mention that the multiplication function does + // not exist for mat3's. + // the matrix as laid out below looks transposed - order is columnwise. + var xCtr = 0.5, yCtr = 0.5; + this._textureTransform = [ + xScale, 0.0, 0.0, + 0.0, yScale, 0.0, + xCtr*(1-xScale), yCtr*(1 - yScale), 1.0 + ]; + + if (this._shader && this._shader['default']) + this._shader['default'].u_texTransform.set( this._textureTransform ); + + } + }; + this.exportJSON = function () { var jObj = { @@ -316,7 +356,8 @@ var radialGradientMaterialDef = 'u_colorStop1': { 'type': 'float' }, 'u_colorStop2': { 'type': 'float' }, 'u_colorStop3': { 'type': 'float' }, - 'u_colorStop4': { 'type': 'float' } + 'u_colorStop4': { 'type': 'float' }, + 'u_texTransform': { 'type' : 'mat3' } //'u_colorCount': {'type' : 'int' } }, -- cgit v1.2.3 From 24417212f9fad7e992697e9370047fcf2f037913 Mon Sep 17 00:00:00 2001 From: hwc487 Date: Tue, 8 May 2012 16:14:28 -0700 Subject: WebGL linear gradients to match CSS --- js/lib/rdge/materials/linear-gradient-material.js | 43 +++++++++++++++++++++-- 1 file changed, 41 insertions(+), 2 deletions(-) (limited to 'js/lib') diff --git a/js/lib/rdge/materials/linear-gradient-material.js b/js/lib/rdge/materials/linear-gradient-material.js index 51a7430c..0df9511e 100755 --- a/js/lib/rdge/materials/linear-gradient-material.js +++ b/js/lib/rdge/materials/linear-gradient-material.js @@ -6,6 +6,7 @@ var MaterialParser = require("js/lib/rdge/materials/material-parser").MaterialParser; var Material = require("js/lib/rdge/materials/material").Material; +var ShapePrimitive = require("js/lib/geom/shape-primitive").ShapePrimitive; var LinearGradientMaterial = function LinearGradientMaterial() { /////////////////////////////////////////////////////////////////////// @@ -245,9 +246,46 @@ var LinearGradientMaterial = function LinearGradientMaterial() { this._shader['default'].u_colorStop4.set([s]); this.setAngle(this.getAngle()); - } + + this._shader['default'].u_texTransform.set( [1,0,0, 0,1,0, 0,0,1] ); + } }; + this.fitToPrimitive = function( prim ) + { + /* + var bounds = ShapePrimitive.getBounds( prim ); + if (bounds) + { + var dx = Math.abs( bounds[3] - bounds[0] ), + dy = Math.abs( bounds[4] - bounds[1] ); + if (dy == 0) dy = 1.0; + if (dx == 0) dx = 1.0; + var xScale = 2.0, yScale = 2.0; + if (dx > dy) + yScale *= dy/dx; + else + xScale *= dx/dy; + + // build the matrix - the translation to the origin, the scale, + // and the translation back to the center (hard coded at (0.5, 0.5) for now). + // the matrix is build directly instead of with matrix multiplications + // for efficiency, not to mention that the multiplication function does + // not exist for mat3's. + // the matrix as laid out below looks transposed - order is columnwise. + var xCtr = 0.5, yCtr = 0.5; + this._textureTransform = [ + xScale, 0.0, 0.0, + 0.0, yScale, 0.0, + 0.0, 0.0, 1.0 + ]; + + if (this._shader && this._shader['default']) + this._shader['default'].u_texTransform.set( this._textureTransform ); + } + */ + }; + this.exportJSON = function () { var jObj = { @@ -367,7 +405,8 @@ var linearGradientMaterialDef = 'u_colorStop2': { 'type' : 'float' }, 'u_colorStop3': { 'type' : 'float' }, 'u_colorStop4': { 'type' : 'float' }, - 'u_cos_sin_angle' : { 'type' : 'vec2' } + 'u_cos_sin_angle': { 'type' : 'vec2' }, + 'u_texTransform': { 'type' : 'mat3' } //'u_colorCount': {'type' : 'int' } }, -- cgit v1.2.3 From 3e82beb51fe3f596147e9d7f1c405d9a8c4df63b Mon Sep 17 00:00:00 2001 From: hwc487 Date: Tue, 8 May 2012 16:15:49 -0700 Subject: code cleanup for linear gradients. --- js/lib/rdge/materials/linear-gradient-material.js | 41 ----------------------- 1 file changed, 41 deletions(-) (limited to 'js/lib') diff --git a/js/lib/rdge/materials/linear-gradient-material.js b/js/lib/rdge/materials/linear-gradient-material.js index 0df9511e..79f323db 100755 --- a/js/lib/rdge/materials/linear-gradient-material.js +++ b/js/lib/rdge/materials/linear-gradient-material.js @@ -133,12 +133,6 @@ var LinearGradientMaterial = function LinearGradientMaterial() { } }; - // this.getColorCount = function() { return this._colorCount; }; - // this.setColorCount = function(c) { this._colorCount = c; - // if (this._shader && this._shader['default']) - // this._shader['default'].u_colorCount.set([c]); - // }; - this.getAngle = function () { return this._angle; }; @@ -251,41 +245,6 @@ var LinearGradientMaterial = function LinearGradientMaterial() { } }; - this.fitToPrimitive = function( prim ) - { - /* - var bounds = ShapePrimitive.getBounds( prim ); - if (bounds) - { - var dx = Math.abs( bounds[3] - bounds[0] ), - dy = Math.abs( bounds[4] - bounds[1] ); - if (dy == 0) dy = 1.0; - if (dx == 0) dx = 1.0; - var xScale = 2.0, yScale = 2.0; - if (dx > dy) - yScale *= dy/dx; - else - xScale *= dx/dy; - - // build the matrix - the translation to the origin, the scale, - // and the translation back to the center (hard coded at (0.5, 0.5) for now). - // the matrix is build directly instead of with matrix multiplications - // for efficiency, not to mention that the multiplication function does - // not exist for mat3's. - // the matrix as laid out below looks transposed - order is columnwise. - var xCtr = 0.5, yCtr = 0.5; - this._textureTransform = [ - xScale, 0.0, 0.0, - 0.0, yScale, 0.0, - 0.0, 0.0, 1.0 - ]; - - if (this._shader && this._shader['default']) - this._shader['default'].u_texTransform.set( this._textureTransform ); - } - */ - }; - this.exportJSON = function () { var jObj = { -- cgit v1.2.3 From 6b65188b7a4a21ae1e575282fd5b6198b22ca7b7 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Thu, 10 May 2012 15:07:52 -0700 Subject: Fixing the live preview for the new document. Signed-off-by: Valerio Virgillito --- js/lib/NJUtils.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'js/lib') diff --git a/js/lib/NJUtils.js b/js/lib/NJUtils.js index 5aaeb5f2..d0f547f5 100755 --- a/js/lib/NJUtils.js +++ b/js/lib/NJUtils.js @@ -18,8 +18,9 @@ exports.NJUtils = Montage.create(Component, { ///// Quick "getElementById" $ : { - value: function(id) { - return document.getElementById(id); + value: function(id, doc) { + var _doc = doc || document; + return _doc.getElementById(id); } }, -- cgit v1.2.3 From 02e5fbb819f02d26a8a7179cf04021a0f6c6ddf6 Mon Sep 17 00:00:00 2001 From: hwc487 Date: Mon, 14 May 2012 16:41:04 -0700 Subject: base canvas 2d rendering of radial gradient on size of the filled region only --- js/lib/geom/rectangle.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'js/lib') diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js index cf0e7fc8..4415af43 100755 --- a/js/lib/geom/rectangle.js +++ b/js/lib/geom/rectangle.js @@ -537,7 +537,8 @@ exports.Rectangle = Object.create(GeomObj, { if(this._fillColor.gradientMode) { if(this._fillColor.gradientMode === "radial") { - gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(w, h)/2); + var ww = w - 2*lw, hh = h - 2*lw; + gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2-this._strokeWidth, h/2, Math.max(ww, hh)/2); } else { gradient = ctx.createLinearGradient(inset/2, h/2, w-inset, h/2); } -- cgit v1.2.3 From cb37bee07085690d72e69a82e76cae9166e5f0f1 Mon Sep 17 00:00:00 2001 From: hwc487 Date: Tue, 15 May 2012 16:02:27 -0700 Subject: Gradient matching between WebGL and Canvas2D --- js/lib/geom/circle.js | 119 +++++--------- js/lib/geom/rectangle.js | 183 +++++++++++----------- js/lib/rdge/materials/radial-gradient-material.js | 31 ++-- 3 files changed, 156 insertions(+), 177 deletions(-) (limited to 'js/lib') diff --git a/js/lib/geom/circle.js b/js/lib/geom/circle.js index b60ad58f..2ca4c1f5 100755 --- a/js/lib/geom/circle.js +++ b/js/lib/geom/circle.js @@ -505,9 +505,9 @@ exports.Circle = Object.create(GeomObj, { if(this._fillColor.gradientMode) { if(this._fillColor.gradientMode === "radial") { gradient = ctx.createRadialGradient(xCtr, yCtr, 0, - xCtr, yCtr, Math.max(this._width, this._height)/2); + xCtr, yCtr, Math.max(this._width, this._height)/2 - lineWidth); } else { - gradient = ctx.createLinearGradient(lineWidth/2, this._height/2, this._width-lineWidth, this._height/2); + gradient = ctx.createLinearGradient(lineWidth, this._height/2, this._width-lineWidth, this._height/2); } colors = this._fillColor.color; @@ -804,79 +804,44 @@ exports.Circle = Object.create(GeomObj, { } }, - /* - this.getNearPoint = function( pt, dir ) { - var world = this.getWorld(); - if (!world) throw( "null world in getNearPoint" ); - - // get a point on the plane of the circle - // the point is in NDC, as is the input parameters - var mat = this.getMatrix(); - var plane = [0,0,1,0]; - plane = MathUtils.transformPlane( plane, mat ); - var projPt = MathUtils.vecIntersectPlane ( pt, dir, plane ); - - // transform the projected point back to the XY plane - //var invMat = mat.inverse(); - var invMat = glmat4.inverse( mat, [] ); - var planePt = MathUtils.transformPoint( projPt, invMat ); - - // 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, - xRadNDC = this._width/vpw, yRadNDC = this._height/vph; - var projMat = world.makePerspectiveMatrix(); - var z = -world.getViewDistance(); - var planePtNDC = planePt.slice(0); - planePtNDC[2] = z; - planePtNDC = MathUtils.transformHomogeneousPoint( planePtNDC, projMat ); - planePtNDC = MathUtils.applyHomogeneousCoordinate( planePtNDC ); - - // get the gl coordinates - 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; - - var angle = Math.atan2( planePtNDC[1] - yNDC, planePtNDC[0] - xNDC ); - var degrees = angle*180.0/Math.PI; - var objPt = [Math.cos(angle)*xRadNDC + xNDC, Math.sin(angle)*yRadNDC + yNDC, 0]; - - // convert to GL coordinates - objPt[0] = -z*(r-l)/(2.0*zn)*objPt[0]; - objPt[1] = -z*(t-b)/(2.0*zn)*objPt[1]; - - // re-apply the transform - objPt = MathUtils.transformPoint( objPt, mat ); - - return objPt; - }; - */ - recalcTexMapCoords: { - value: function(vrts, uvs) { - var n = vrts.length/3; - var ivrt = 0, iuv = 0; - var uMin = 1.e8, uMax = -1.e8, - vMin = 1.e8, vMax = -1.e8; - - for (var i=0; i uMax) uMax = uvs[iuv]; - - iuv++; ivrt++; - uvs[iuv] = 0.5*(vrts[ivrt]/this._ovalHeight + 1); - if (uvs[iuv] < vMin) vMin = uvs[iuv]; - if (uvs[iuv] > vMax) vMax = uvs[iuv]; - iuv++; ivrt += 2; - } - - //console.log( "remap: " + uvs ); - //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 ); + } + } }); \ No newline at end of file diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js index 4415af43..8fc80c60 100755 --- a/js/lib/geom/rectangle.js +++ b/js/lib/geom/rectangle.js @@ -508,98 +508,99 @@ exports.Rectangle = Object.create(GeomObj, { }, 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") { + 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-this._strokeWidth, h/2, Math.max(ww, hh)/2); - } else { - gradient = ctx.createLinearGradient(inset/2, h/2, w-inset, h/2); - } - colors = this._fillColor.color; - - len = colors.length; - - for(n=0; n --- js/lib/drawing/world.js | 6 +- js/lib/geom/brush-stroke.js | 2 +- js/lib/geom/circle.js | 1433 ++++++++++++++++++++++--------------------- js/lib/geom/geom-obj.js | 852 +++++++++++++------------ js/lib/geom/line.js | 914 ++++++++++++++------------- js/lib/geom/rectangle.js | 1409 ++++++++++++++++++++++-------------------- js/lib/geom/sub-path.js | 2 +- 7 files changed, 2395 insertions(+), 2223 deletions(-) (limited to 'js/lib') diff --git a/js/lib/drawing/world.js b/js/lib/drawing/world.js index 7ce23921..0dde9af4 100755 --- a/js/lib/drawing/world.js +++ b/js/lib/drawing/world.js @@ -874,17 +874,17 @@ World.prototype.importObjectJSON = function( jObj, parentGeomObj ) switch (type) { case 1: - obj = new Rectangle(); + obj = Object.create(Rectangle, {}); obj.importJSON( jObj ); break; case 2: // circle - obj = new Circle(); + obj = Object.create(Circle, {}); obj.importJSON( jObj ); break; case 3: // line - obj = new Line(); + obj = Object.create(Line, {}); obj.importJSON( jObj ); break; diff --git a/js/lib/geom/brush-stroke.js b/js/lib/geom/brush-stroke.js index 1fae0c1d..6facdd5d 100755 --- a/js/lib/geom/brush-stroke.js +++ b/js/lib/geom/brush-stroke.js @@ -768,7 +768,7 @@ var BrushStroke = function GLBrushStroke() { }; //function BrushStroke ...class definition -BrushStroke.prototype = new GeomObj(); +BrushStroke.prototype = Object.create(GeomObj, {}); BrushStroke.prototype._CatmullRomSplineInterpolate = function(ctrlPts, t) { diff --git a/js/lib/geom/circle.js b/js/lib/geom/circle.js index 0f1f49a9..425b869a 100755 --- a/js/lib/geom/circle.js +++ b/js/lib/geom/circle.js @@ -4,9 +4,9 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. */ -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 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; @@ -16,744 +16,790 @@ var vecUtils = require("js/helper-classes/3D/vec-utils").VecUtils; // Derived from class GLGeomObj // The position and dimensions of the stroke, fill, and inner Radius should be in pixels /////////////////////////////////////////////////////////////////////// -var Circle = function GLCircle() { - - this.init = function( world, xOffset, yOffset, width, height, strokeSize, strokeColor, fillColor, innerRadius, strokeMaterial, fillMaterial, strokeStyle) { - /////////////////////////////////////////////////////////////////////// - // Instance variables - /////////////////////////////////////////////////////////////////////// - this._width = 2.0; - this._height = 2.0; - this._xOffset = 0; - this._yOffset = 0; - - this._radius = 2.0; - this._strokeWidth = 0.25; - this._innerRadius = 0; - - this._ovalHeight = this._ovalHeight = 2.0 * this._radius; - - this._strokeStyle = "Solid"; - - this._aspectRatio = 1.0; - - if (arguments.length > 0) { - this._width = width; - this._height = height; - this._xOffset = xOffset; - this._yOffset = yOffset; - - this._strokeWidth = strokeSize; - this._innerRadius = innerRadius; - this._strokeColor = strokeColor; - this._fillColor = fillColor; - - this._strokeStyle = strokeStyle; - - this._matrix = Matrix.I(4); - //this._matrix[12] = xOffset; - //this._matrix[13] = yOffset; - } - - this.m_world = world; - - if(strokeMaterial){ - this._strokeMaterial = strokeMaterial; - } else { - this._strokeMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ); - } +exports.Circle = 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 }, + + _radius: { value : 2.0, writable: true }, + _strokeWidth: { value : 0.25, writable: true }, + _innerRadius: { value : 0, writable: true }, + _ovalHeight: { value : 4.0, writable: true }, + _strokeStyle: { value : "Solid", writable: true }, + _aspectRatio: { value : 1.0, writable: true }, + + init: { + value: function(world, xOffset, yOffset, width, height, strokeSize, strokeColor, fillColor, innerRadius, strokeMaterial, fillMaterial, strokeStyle) { + if(arguments.length > 0) { + this._width = width; + this._height = height; + this._xOffset = xOffset; + this._yOffset = yOffset; + this._ovalHeight = 2.0 * this._radius; + + this._strokeWidth = strokeSize; + this._innerRadius = innerRadius; + this._strokeColor = strokeColor; + this._fillColor = fillColor; + + this._strokeStyle = strokeStyle; + + this._matrix = Matrix.I(4); + //this._matrix[12] = xOffset; + //this._matrix[13] = yOffset; + } + + this.m_world = world; - if(fillMaterial) { - this._fillMaterial = fillMaterial; - } else { - this._fillMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ); + if(strokeMaterial) { + this._strokeMaterial = strokeMaterial; + } else { + this._strokeMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ); + } + + if(fillMaterial) { + this._fillMaterial = fillMaterial; + } else { + this._fillMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ); + } } - }; + }, /////////////////////////////////////////////////////////////////////// // Property Accessors /////////////////////////////////////////////////////////////////////// - this.getStrokeWidth = function() { - return this._strokeWidth; - }; - - this.setStrokeWidth = function(w) { - this._strokeWidth = w; - }; - - this.getStrokeMaterial = function() { - return this._strokeMaterial; - }; + // TODO - Use getters/setters in the future + getStrokeWidth: { + value: function() { + return this._strokeWidth; + } + }, - this.setStrokeMaterial = function(m) { - this._strokeMaterial = m; - }; + setStrokeWidth: { + value: function(w) { + this._strokeWidth = w; + } + }, - this.getFillMaterial = function() { - return this._fillMaterial; - }; + getStrokeMaterial: { + value: function() { + return this._strokeMaterial; + } + }, - this.setFillMaterial = function(m) { - this._fillMaterial = m; - }; + setStrokeMaterial: { + value: function(m) { + this._strokeMaterial = m; + } + }, - this.getRadius = function() { - return this._radius; - }; + getFillMaterial: { + value: function() { + return this._fillMaterial; + } + }, - this.setRadius = function(r) { - this._radius = r; - }; + setFillMaterial: { + value: function(m) { + this._fillMaterial = m; + } + }, - this.getWorld = function() { - return this._world; - }; + getRadius: { + value: function() { + return this._radius; + } + }, - this.setWorld = function(w) { - this._world = w; - }; + setRadius: { + value: function(r) { + this._radius = r; + } + }, - this.getInnerRadius = function() { - return this._innerRadius; - }; + getInnerRadius: { + value: function() { + return this._innerRadius; + } + }, - this.setInnerRadius = function(r) { - this._innerRadius = r; - }; + setInnerRadius: { + value: function(r) { + this._innerRadius = r; + } + }, - this.getStrokeStyle = function() { - return this._strokeStyle; - }; - this.setStrokeStyle = function(s) { - this._strokeStyle = s; - }; + getStrokeStyle: { + value: function() { + return this._strokeStyle; + } + }, - this.getWidth = function() { - return this._width; - }; + setStrokeStyle: { + value: function(s) { + this._strokeStyle = s; + } + }, - this.setWidth = function(w) { - this._width = w; - }; + getWidth: { + value: function() { + return this._width; + } + }, - this.getHeight = function() { - return this._height; - }; + setWidth: { + value: function(w) { + this._width = w; + } + }, - this.setHeight = function(h) { - this._height = h; - }; + getHeight: { + value: function() { + return this._height; + } + }, - this.geomType = function() { - return this.GEOM_TYPE_CIRCLE; - }; + setHeight: { + value: function(h) { + this._height = h; + } + }, - /////////////////////////////////////////////////////////////////////// - // Methods - /////////////////////////////////////////////////////////////////////// + geomType: { + value: function() { + return this.GEOM_TYPE_CIRCLE; + } + }, /////////////////////////////////////////////////////////////////////// // update the "color of the material - this.getFillColor = function() - { - return this._fillColor; - } - -// this.setFillColor = function(c) -// { -// this._fillColor = c; -// } - - this.getStrokeColor = function() - { - return this._strokeColor; - } - -// this.setStrokeColor = function(c) -// { -// this._strokeColor = c; -// } - /////////////////////////////////////////////////////////////////////// - - 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 ); + getFillColor: { + value: function() { + return this._fillColor; + } + }, - // create the gl buffer - var gl = world.getGLContext(); +// setFillColor: { +// value: function(c) { +// this._fillColor = c; +// } +// }, - // determine the number of triangles to generate - var nTriangles = 60; // yes, we will do better than this + getStrokeColor: { + value: function() { + return this._strokeColor; + } + }, - // 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, - 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; +// setStrokeColor: { +// value: function(c) { +// this._strokeColor = c; +// } +// }, + /////////////////////////////////////////////////////////////////////// - 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; + /////////////////////////////////////////////////////////////////////// + // Methods + /////////////////////////////////////////////////////////////////////// + buildBuffers: { + value: 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(); + + // determine the number of triangles to generate + var nTriangles = 60; // yes, we will do better than this + + // 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, + 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), + 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 radii + var xRad = -z*(r-l)/(2.0*zn)*xRadNDC, + yRad = -z*(t-b)/(2.0*zn)*yRadNDC; + + // save the overall dimensions to be used in the uv calculations + this._ovalWidth = xRad; this._ovalHeight = yRad; + + // 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 inner radius + var xInnRad = -z*(r-l)/(2.0*zn)*xInnRadNDC, + yInnRad = -z*(t-b)/(2.0*zn)*yInnRadNDC; + + // get a matrix to rotate a point around the circle + var angle = 2.0 * Math.PI/Number(nTriangles); + var mat = Matrix.RotationZ( angle ); + var reverseRotMat = Matrix.RotationZ( -angle ); + + // calculate matrices to scale the circle and stroke to fit the bounds of the ellipse + var strokeScaleMat = Matrix.I(4); + strokeScaleMat[0] = xRad; + strokeScaleMat[5] = yRad; + + var fillScaleMat = Matrix.I(4); + fillScaleMat[0] = xRad - xStroke; + fillScaleMat[5] = yRad - yStroke; + + var innerRadiusScaleMat = Matrix.I(4); + innerRadiusScaleMat[0] = xInnRad; + innerRadiusScaleMat[5] = yInnRad; + + var innerStrokeScaleMat = Matrix.I(4); + innerStrokeScaleMat[0] = xInnRad - xStroke; + innerStrokeScaleMat[5] = yInnRad - yStroke; + + var fillPrim, strokePrim0, strokePrim1; + var fillMaterial, strokeMaterial0, strokeMaterial2; + + this._primArray = []; + this._materialArray = []; + this._materialTypeArray = []; + this._materialNodeArray = []; + + ///////////////////////////////////////////////////////////// + // Strokes + if(this._strokeWidth > 0) { + var numStrokes = 1; + if(this._innerRadius !== 0) { + strokePrim0 = this.generateOvalRing(x, y, reverseRotMat, innerStrokeScaleMat, innerRadiusScaleMat, nTriangles); + } - // calculate the object coordinates from their NDC coordinates - var z = -world.getViewDistance(); + strokePrim1 = this.generateOvalRing(x, y, reverseRotMat, fillScaleMat, strokeScaleMat, nTriangles); + } - // 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 radii - var xRad = -z*(r-l)/(2.0*zn)*xRadNDC, - yRad = -z*(t-b)/(2.0*zn)*yRadNDC; - - // save the overall dimensions to be used in the uv calculations - this._ovalWidth = xRad; this._ovalHeight = yRad; - - // 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 inner radius - var xInnRad = -z*(r-l)/(2.0*zn)*xInnRadNDC, - yInnRad = -z*(t-b)/(2.0*zn)*yInnRadNDC; - - // get a matrix to rotate a point around the circle - var angle = 2.0 * Math.PI/Number(nTriangles); - var mat = Matrix.RotationZ( angle ); - var reverseRotMat = Matrix.RotationZ( -angle ); - - // calculate matrices to scale the circle and stroke to fit the bounds of the ellipse - var strokeScaleMat = Matrix.I(4); - strokeScaleMat[0] = xRad; - strokeScaleMat[5] = yRad; - - var fillScaleMat = Matrix.I(4); - fillScaleMat[0] = xRad - xStroke; - fillScaleMat[5] = yRad - yStroke; - - var innerRadiusScaleMat = Matrix.I(4); - innerRadiusScaleMat[0] = xInnRad; - innerRadiusScaleMat[5] = yInnRad; - - var innerStrokeScaleMat = Matrix.I(4); - innerStrokeScaleMat[0] = xInnRad - xStroke; - innerStrokeScaleMat[5] = yInnRad - yStroke; - - var fillPrim, strokePrim0, strokePrim1; - var fillMaterial, strokeMaterial0, strokeMaterial2; - - this._primArray = []; - this._materialArray = []; - this._materialTypeArray = []; - this._materialNodeArray = []; - - ///////////////////////////////////////////////////////////// - // Strokes - if(this._strokeWidth > 0) { - var numStrokes = 1; - if(this._innerRadius !== 0) { - strokePrim0 = this.generateOvalRing(x, y, reverseRotMat, innerStrokeScaleMat, innerRadiusScaleMat, nTriangles); + ///////////////////////////////////////////////////////////// + // Fill + if(this._innerRadius === 0) { + fillPrim = this.generateOval(x, y, mat, fillScaleMat, nTriangles); + } else { + fillPrim = this.generateOvalRing(x, y, reverseRotMat, innerRadiusScaleMat, fillScaleMat, nTriangles); } - strokePrim1 = this.generateOvalRing(x, y, reverseRotMat, fillScaleMat, strokeScaleMat, nTriangles); - } - - ///////////////////////////////////////////////////////////// - // Fill - if(this._innerRadius === 0) { - fillPrim = this.generateOval(x, y, mat, fillScaleMat, nTriangles); - } else { - fillPrim = this.generateOvalRing(x, y, reverseRotMat, innerRadiusScaleMat, fillScaleMat, nTriangles); - } + if (fillPrim) { + fillMaterial = this.makeFillMaterial(); - if (fillPrim) { - fillMaterial = this.makeFillMaterial(); + this._primArray.push( fillPrim ); + this._materialNodeArray.push( fillMaterial.getMaterialNode() ); + } - this._primArray.push( fillPrim ); - this._materialNodeArray.push( fillMaterial.getMaterialNode() ); - } + if (strokePrim0) { + strokeMaterial0 = this.makeStrokeMaterial(); - if (strokePrim0) { - strokeMaterial0 = this.makeStrokeMaterial(); + this._primArray.push( strokePrim0 ); + this._materialNodeArray.push( strokeMaterial0.getMaterialNode() ); + } - this._primArray.push( strokePrim0 ); - this._materialNodeArray.push( strokeMaterial0.getMaterialNode() ); - } + if (strokePrim1) { + strokeMaterial2 = this.makeStrokeMaterial(); - if (strokePrim1) { - strokeMaterial2 = this.makeStrokeMaterial(); + this._primArray.push( strokePrim1 ); + this._materialNodeArray.push( strokeMaterial2.getMaterialNode() ); + } - this._primArray.push( strokePrim1 ); - this._materialNodeArray.push( strokeMaterial2.getMaterialNode() ); - } + world.updateObject(this); + } + }, + + generateOval: { + value: function(xOff, yOff, rotationMat, scaleMat, nTriangles) { + var pt = [1.0, 0.0, 0.0]; + //var pts = scaleMat.multiply(pt); + var pts = glmat4.multiplyVec3( scaleMat, pt, []); + var x = pts[0], y = pts[1], z = 0; + var xs = scaleMat[0], ys = scaleMat[4]; + + var vrts = [], nrms = [], uvs = [], indices = []; + var index = 0; + for (var i=0; i