diff options
Diffstat (limited to 'js/lib')
-rwxr-xr-x | js/lib/NJUtils.js | 9 | ||||
-rwxr-xr-x | js/lib/geom/circle.js | 124 | ||||
-rwxr-xr-x | js/lib/geom/rectangle.js | 190 | ||||
-rw-r--r-- | js/lib/geom/shape-primitive.js | 27 | ||||
-rwxr-xr-x | js/lib/rdge/materials/linear-gradient-material.js | 36 | ||||
-rwxr-xr-x | js/lib/rdge/materials/material.js | 4 | ||||
-rwxr-xr-x | js/lib/rdge/materials/radial-gradient-material.js | 70 |
7 files changed, 264 insertions, 196 deletions
diff --git a/js/lib/NJUtils.js b/js/lib/NJUtils.js index d0f547f5..90aebb84 100755 --- a/js/lib/NJUtils.js +++ b/js/lib/NJUtils.js | |||
@@ -19,16 +19,17 @@ exports.NJUtils = Montage.create(Component, { | |||
19 | ///// Quick "getElementById" | 19 | ///// Quick "getElementById" |
20 | $ : { | 20 | $ : { |
21 | value: function(id, doc) { | 21 | value: function(id, doc) { |
22 | var _doc = doc || document; | 22 | doc = doc || document; |
23 | return _doc.getElementById(id); | 23 | return doc.getElementById(id); |
24 | } | 24 | } |
25 | }, | 25 | }, |
26 | 26 | ||
27 | ///// Quick "getElementsByClassName" which also returns as an Array | 27 | ///// Quick "getElementsByClassName" which also returns as an Array |
28 | ///// Can return as NodeList by passing true as second argument | 28 | ///// Can return as NodeList by passing true as second argument |
29 | $$ : { | 29 | $$ : { |
30 | value: function(className, asNodeList) { | 30 | value: function(className, asNodeList, doc) { |
31 | var list = document.getElementsByClassName(className); | 31 | doc = doc || document; |
32 | var list = doc.getElementsByClassName(className); | ||
32 | return (asNodeList) ? list : this.toArray(list); | 33 | return (asNodeList) ? list : this.toArray(list); |
33 | } | 34 | } |
34 | }, | 35 | }, |
diff --git a/js/lib/geom/circle.js b/js/lib/geom/circle.js index 425b869a..4a369844 100755 --- a/js/lib/geom/circle.js +++ b/js/lib/geom/circle.js | |||
@@ -311,6 +311,7 @@ exports.Circle = Object.create(GeomObj, { | |||
311 | 311 | ||
312 | if (fillPrim) { | 312 | if (fillPrim) { |
313 | fillMaterial = this.makeFillMaterial(); | 313 | fillMaterial = this.makeFillMaterial(); |
314 | fillMaterial.fitToPrimitive( fillPrim ); | ||
314 | 315 | ||
315 | this._primArray.push( fillPrim ); | 316 | this._primArray.push( fillPrim ); |
316 | this._materialNodeArray.push( fillMaterial.getMaterialNode() ); | 317 | this._materialNodeArray.push( fillMaterial.getMaterialNode() ); |
@@ -318,6 +319,7 @@ exports.Circle = Object.create(GeomObj, { | |||
318 | 319 | ||
319 | if (strokePrim0) { | 320 | if (strokePrim0) { |
320 | strokeMaterial0 = this.makeStrokeMaterial(); | 321 | strokeMaterial0 = this.makeStrokeMaterial(); |
322 | strokeMaterial0.fitToPrimitive( strokePrim0 ); | ||
321 | 323 | ||
322 | this._primArray.push( strokePrim0 ); | 324 | this._primArray.push( strokePrim0 ); |
323 | this._materialNodeArray.push( strokeMaterial0.getMaterialNode() ); | 325 | this._materialNodeArray.push( strokeMaterial0.getMaterialNode() ); |
@@ -325,6 +327,7 @@ exports.Circle = Object.create(GeomObj, { | |||
325 | 327 | ||
326 | if (strokePrim1) { | 328 | if (strokePrim1) { |
327 | strokeMaterial2 = this.makeStrokeMaterial(); | 329 | strokeMaterial2 = this.makeStrokeMaterial(); |
330 | strokeMaterial2.fitToPrimitive( strokePrim1 ); | ||
328 | 331 | ||
329 | this._primArray.push( strokePrim1 ); | 332 | this._primArray.push( strokePrim1 ); |
330 | this._materialNodeArray.push( strokeMaterial2.getMaterialNode() ); | 333 | this._materialNodeArray.push( strokeMaterial2.getMaterialNode() ); |
@@ -502,9 +505,9 @@ exports.Circle = Object.create(GeomObj, { | |||
502 | if(this._fillColor.gradientMode) { | 505 | if(this._fillColor.gradientMode) { |
503 | if(this._fillColor.gradientMode === "radial") { | 506 | if(this._fillColor.gradientMode === "radial") { |
504 | gradient = ctx.createRadialGradient(xCtr, yCtr, 0, | 507 | gradient = ctx.createRadialGradient(xCtr, yCtr, 0, |
505 | xCtr, yCtr, Math.max(this._width, this._height)/2); | 508 | xCtr, yCtr, Math.max(this._width, this._height)/2 - lineWidth); |
506 | } else { | 509 | } else { |
507 | gradient = ctx.createLinearGradient(lineWidth/2, this._height/2, this._width-lineWidth, this._height/2); | 510 | gradient = ctx.createLinearGradient(lineWidth, this._height/2, this._width-lineWidth, this._height/2); |
508 | } | 511 | } |
509 | colors = this._fillColor.color; | 512 | colors = this._fillColor.color; |
510 | 513 | ||
@@ -578,7 +581,7 @@ exports.Circle = Object.create(GeomObj, { | |||
578 | if (this._strokeColor) { | 581 | if (this._strokeColor) { |
579 | if(this._strokeColor.gradientMode) { | 582 | if(this._strokeColor.gradientMode) { |
580 | if(this._strokeColor.gradientMode === "radial") { | 583 | if(this._strokeColor.gradientMode === "radial") { |
581 | gradient = ctx.createRadialGradient(xCtr, yCtr, Math.min(xScale, yScale), | 584 | gradient = ctx.createRadialGradient(xCtr, yCtr, 0, |
582 | xCtr, yCtr, 0.5*Math.max(this._height, this._width)); | 585 | xCtr, yCtr, 0.5*Math.max(this._height, this._width)); |
583 | } else { | 586 | } else { |
584 | gradient = ctx.createLinearGradient(0, this._height/2, this._width, this._height/2); | 587 | gradient = ctx.createLinearGradient(0, this._height/2, this._width, this._height/2); |
@@ -801,79 +804,44 @@ exports.Circle = Object.create(GeomObj, { | |||
801 | } | 804 | } |
802 | }, | 805 | }, |
803 | 806 | ||
804 | /* | 807 | recalcTexMapCoords: { |
805 | this.getNearPoint = function( pt, dir ) { | 808 | value: function(vrts, uvs) { |
806 | var world = this.getWorld(); | 809 | var n = vrts.length/3; |
807 | if (!world) throw( "null world in getNearPoint" ); | 810 | if (n === 0) return; |
808 | 811 | var ivrt = 0, iuv = 0; | |
809 | // get a point on the plane of the circle | 812 | var uMin = 1.e8, uMax = -1.e8, |
810 | // the point is in NDC, as is the input parameters | 813 | vMin = 1.e8, vMax = -1.e8; |
811 | var mat = this.getMatrix(); | 814 | |
812 | var plane = [0,0,1,0]; | 815 | var i, index = 3; |
813 | plane = MathUtils.transformPlane( plane, mat ); | 816 | var xMin = vrts[0], xMax = vrts[0], |
814 | var projPt = MathUtils.vecIntersectPlane ( pt, dir, plane ); | 817 | yMin = vrts[1], yMax = vrts[1]; |
815 | 818 | for (i=1; i<n; i++) | |
816 | // transform the projected point back to the XY plane | 819 | { |
817 | //var invMat = mat.inverse(); | 820 | if (vrts[index] < xMin) xMin = vrts[index]; |
818 | var invMat = glmat4.inverse( mat, [] ); | 821 | else if (vrts[index] > xMax) xMax = vrts[index]; |
819 | var planePt = MathUtils.transformPoint( projPt, invMat ); | 822 | |
820 | 823 | if (vrts[index+1] < yMin) yMin = vrts[index+1]; | |
821 | // get the normalized device coordinates (NDC) for | 824 | else if (vrts[index+1] > yMax) yMax = vrts[index+1]; |
822 | // the position and radii. | 825 | |
823 | var vpw = world.getViewportWidth(), vph = world.getViewportHeight(); | 826 | index += 3; |
824 | var xNDC = 2*this._xOffset/vpw, yNDC = -2*this._yOffset/vph, | 827 | } |
825 | xRadNDC = this._width/vpw, yRadNDC = this._height/vph; | 828 | var ovalWidth = xMax - xMin, |
826 | var projMat = world.makePerspectiveMatrix(); | 829 | ovalHeight = yMax - yMin; |
827 | var z = -world.getViewDistance(); | 830 | for (i=0; i<n; i++) { |
828 | var planePtNDC = planePt.slice(0); | 831 | uvs[iuv] = (vrts[ivrt]-xMin)/ovalWidth; |
829 | planePtNDC[2] = z; | 832 | if (uvs[iuv] < uMin) uMin = uvs[iuv]; |
830 | planePtNDC = MathUtils.transformHomogeneousPoint( planePtNDC, projMat ); | 833 | if (uvs[iuv] > uMax) uMax = uvs[iuv]; |
831 | planePtNDC = MathUtils.applyHomogeneousCoordinate( planePtNDC ); | 834 | |
832 | 835 | iuv++; ivrt++; | |
833 | // get the gl coordinates | 836 | uvs[iuv] = (vrts[ivrt]-yMin)/ovalHeight; |
834 | var aspect = world.getAspect(); | 837 | if (uvs[iuv] < vMin) vMin = uvs[iuv]; |
835 | var zn = world.getZNear(), zf = world.getZFar(); | 838 | if (uvs[iuv] > vMax) vMax = uvs[iuv]; |
836 | var t = zn * Math.tan(world.getFOV() * Math.PI / 360.0), | 839 | iuv++; ivrt += 2; |
837 | b = -t, | 840 | } |
838 | r = aspect*t, | 841 | |
839 | l = -r; | 842 | //console.log( "remap" ); |
840 | 843 | //console.log( "uRange: " + uMin + " => " + uMax ); | |
841 | var angle = Math.atan2( planePtNDC[1] - yNDC, planePtNDC[0] - xNDC ); | 844 | //console.log( "vRange: " + vMin + " => " + vMax ); |
842 | var degrees = angle*180.0/Math.PI; | 845 | } |
843 | var objPt = [Math.cos(angle)*xRadNDC + xNDC, Math.sin(angle)*yRadNDC + yNDC, 0]; | 846 | } |
844 | |||
845 | // convert to GL coordinates | ||
846 | objPt[0] = -z*(r-l)/(2.0*zn)*objPt[0]; | ||
847 | objPt[1] = -z*(t-b)/(2.0*zn)*objPt[1]; | ||
848 | |||
849 | // re-apply the transform | ||
850 | objPt = MathUtils.transformPoint( objPt, mat ); | ||
851 | |||
852 | return objPt; | ||
853 | }; | ||
854 | */ | ||
855 | recalcTexMapCoords: { | ||
856 | value: function(vrts, uvs) { | ||
857 | var n = vrts.length/3; | ||
858 | var ivrt = 0, iuv = 0; | ||
859 | var uMin = 1.e8, uMax = -1.e8, | ||
860 | vMin = 1.e8, vMax = -1.e8; | ||
861 | |||
862 | for (var i=0; i<n; i++) { | ||
863 | uvs[iuv] = 0.5*(vrts[ivrt]/this._ovalWidth + 1); | ||
864 | if (uvs[iuv] < uMin) uMin = uvs[iuv]; | ||
865 | if (uvs[iuv] > uMax) uMax = uvs[iuv]; | ||
866 | |||
867 | iuv++; ivrt++; | ||
868 | uvs[iuv] = 0.5*(vrts[ivrt]/this._ovalHeight + 1); | ||
869 | if (uvs[iuv] < vMin) vMin = uvs[iuv]; | ||
870 | if (uvs[iuv] > vMax) vMax = uvs[iuv]; | ||
871 | iuv++; ivrt += 2; | ||
872 | } | ||
873 | |||
874 | //console.log( "remap: " + uvs ); | ||
875 | //console.log( "uRange: " + uMin + " => " + uMax ); | ||
876 | //console.log( "vRange: " + vMin + " => " + vMax ); | ||
877 | } | ||
878 | } | ||
879 | }); \ No newline at end of file | 847 | }); \ No newline at end of file |
diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js index d75abb05..b85433a0 100755 --- a/js/lib/geom/rectangle.js +++ b/js/lib/geom/rectangle.js | |||
@@ -56,8 +56,6 @@ exports.Rectangle = Object.create(GeomObj, { | |||
56 | this._strokeStyle = strokeStyle; | 56 | this._strokeStyle = strokeStyle; |
57 | 57 | ||
58 | this._matrix = Matrix.I(4); | 58 | this._matrix = Matrix.I(4); |
59 | //this._matrix[12] = xoffset; | ||
60 | //this._matrix[13] = yoffset; | ||
61 | } | 59 | } |
62 | 60 | ||
63 | // the overall radius includes the fill and the stroke. separate the two based on the stroke width | 61 | // the overall radius includes the fill and the stroke. separate the two based on the stroke width |
@@ -124,7 +122,6 @@ exports.Rectangle = Object.create(GeomObj, { | |||
124 | this._fillMaterial = m; | 122 | this._fillMaterial = m; |
125 | } | 123 | } |
126 | }, | 124 | }, |
127 | |||
128 | /////////////////////////////////////////////////////////////////////// | 125 | /////////////////////////////////////////////////////////////////////// |
129 | // update the "color of the material | 126 | // update the "color of the material |
130 | getFillColor: { | 127 | getFillColor: { |
@@ -138,7 +135,6 @@ exports.Rectangle = Object.create(GeomObj, { | |||
138 | // this._fillColor = c; | 135 | // this._fillColor = c; |
139 | // } | 136 | // } |
140 | // }, | 137 | // }, |
141 | |||
142 | getStrokeColor: { | 138 | getStrokeColor: { |
143 | value: function() { | 139 | value: function() { |
144 | return this._strokeColor; | 140 | return this._strokeColor; |
@@ -379,6 +375,7 @@ exports.Rectangle = Object.create(GeomObj, { | |||
379 | // stroke | 375 | // stroke |
380 | var strokeMaterial = this.makeStrokeMaterial(); | 376 | var strokeMaterial = this.makeStrokeMateria |