aboutsummaryrefslogtreecommitdiff
path: root/js/lib
diff options
context:
space:
mode:
Diffstat (limited to 'js/lib')
-rwxr-xr-xjs/lib/NJUtils.js9
-rwxr-xr-xjs/lib/geom/circle.js124
-rwxr-xr-xjs/lib/geom/rectangle.js190
-rw-r--r--js/lib/geom/shape-primitive.js27
-rwxr-xr-xjs/lib/rdge/materials/linear-gradient-material.js36
-rwxr-xr-xjs/lib/rdge/materials/material.js4
-rwxr-xr-xjs/lib/rdge/materials/radial-gradient-material.js70
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