aboutsummaryrefslogtreecommitdiff
path: root/assets/canvas-runtime.js
diff options
context:
space:
mode:
Diffstat (limited to 'assets/canvas-runtime.js')
-rw-r--r--assets/canvas-runtime.js438
1 files changed, 261 insertions, 177 deletions
diff --git a/assets/canvas-runtime.js b/assets/canvas-runtime.js
index a35f473d..ee9f24a4 100644
--- a/assets/canvas-runtime.js
+++ b/assets/canvas-runtime.js
@@ -121,13 +121,12 @@ NinjaCvsRt.GLRuntime = function ( canvas, jObj, assetPath )
121 // all "live" materials 121 // all "live" materials
122 this._materials = []; 122 this._materials = [];
123 123
124 // provide the mapping for the asset directory 124 // provide the mapping for the asset directory
125 if (assetPath) 125 if (assetPath) {
126 { 126 this._assetPath = assetPath.slice();
127 this._assetPath = assetPath.slice(); 127 if (this._assetPath[this._assetPath.length - 1] != '/')
128 if (this._assetPath[this._assetPath.length-1] != '/') 128 this._assetPath += '/';
129 this._assetPath += '/'; 129 }
130 }
131 130
132 if(this._assetPath !== undefined) { 131 if(this._assetPath !== undefined) {
133 RDGE.globals.engine.setAssetPath(this._assetPath); 132 RDGE.globals.engine.setAssetPath(this._assetPath);
@@ -289,23 +288,23 @@ NinjaCvsRt.GLRuntime = function ( canvas, jObj, assetPath )
289 288
290 this.importObject = function( jObj, parent ) 289 this.importObject = function( jObj, parent )
291 { 290 {
292 var type = jObj.type 291 var type = jObj.type;
293 var obj; 292 var obj;
294 switch (type) 293 switch (type)
295 { 294 {
296 case 1: 295 case 1:
297 obj = new NinjaCvsRt.RuntimeRectangle(); 296 obj = new NinjaCvsRt.RuntimeRectangle();
298 obj.importJSON( jObj, parent ); 297 obj.importJSON( jObj );
299 break; 298 break;
300 299
301 case 2: // circle 300 case 2: // circle
302 obj = new NinjaCvsRt.RuntimeOval(); 301 obj = new NinjaCvsRt.RuntimeOval();
303 obj.importJSON( jObj, parent ); 302 obj.importJSON( jObj );
304 break; 303 break;
305 304
306 case 3: // line 305 case 3: // line
307 obj = new NinjaCvsRt.RuntimeLine(); 306 obj = new NinjaCvsRt.RuntimeLine();
308 obj.importJSON( jObj, parent ); 307 obj.importJSON( jObj );
309 break; 308 break;
310 309
311 default: 310 default:
@@ -514,7 +513,7 @@ NinjaCvsRt.RuntimeGeomObj = function ()
514 case "pulse": mat = new NinjaCvsRt.RuntimePulseMaterial(); break; 513 case "pulse": mat = new NinjaCvsRt.RuntimePulseMaterial(); break;
515 514
516 default: 515 default:
517 console.log( "material type: " + materialType + " is not supported" ); 516 console.log( "material type: " + shaderName + " is not supported" );
518 break; 517 break;
519 } 518 }
520 519
@@ -638,7 +637,7 @@ NinjaCvsRt.RuntimeGeomObj = function ()
638 637
639 return mat; 638 return mat;
640 }; 639 };
641 640
642 this.MatrixRotationZ = function( angle ) 641 this.MatrixRotationZ = function( angle )
643 { 642 {
644 var mat = this.MatrixIdentity(4); 643 var mat = this.MatrixIdentity(4);
@@ -742,7 +741,7 @@ NinjaCvsRt.RuntimeRectangle = function ()
742 ctx.quadraticCurveTo( width-inset, inset, width-inset-rad, inset ); 741 ctx.quadraticCurveTo( width-inset, inset, width-inset-rad, inset );
743 742
744 // do the top of the rectangle 743 // do the top of the rectangle
745 pt = [inset, inset] 744 pt = [inset, inset];
746 rad = tlRad - inset; 745 rad = tlRad - inset;
747 if (rad < 0) rad = 0; 746 if (rad < 0) rad = 0;
748 pt[0] += rad; 747 pt[0] += rad;
@@ -771,34 +770,81 @@ NinjaCvsRt.RuntimeRectangle = function ()
771 var w = world.getViewportWidth(), 770 var w = world.getViewportWidth(),
772 h = world.getViewportHeight(); 771 h = world.getViewportHeight();
773 772
774 // render the fill 773 var c,
775 ctx.beginPath(); 774 inset,
776 var c = null, inset = 0; 775 gradient,
777 if (this._fillColor) 776 colors,
778 { 777 len,
779 c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")"; 778 n,
780 ctx.fillStyle = c; 779 position,
781 780 cs;
782 ctx.lineWidth = lw; 781 // render the fill
783 inset = Math.ceil( lw ) + 0.5; 782 ctx.beginPath();
784 this.renderPath( inset, ctx ); 783 if (this._fillColor) {
785 ctx.fill(); 784 inset = Math.ceil( lw ) + 0.5;
786 ctx.closePath(); 785
787 } 786 if(this._fillColor.gradientMode) {
787 if(this._fillColor.gradientMode === "radial") {
788 gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(w/2, h/2)-inset);
789 } else {
790 gradient = ctx.createLinearGradient(inset, h/2, w-2*inset, h/2);
791 }
792 colors = this._fillColor.color;
788 793
789 // render the stroke 794 len = colors.length;
790 ctx.beginPath();
791 if (this._strokeColor)
792 {
793 c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")";
794 ctx.strokeStyle = c;
795 795
796 ctx.lineWidth = lw; 796 for(n=0; n<len; n++) {
797 inset = Math.ceil( 0.5*lw ) + 0.5; 797 position = colors[n].position/100;
798 this.renderPath( inset, ctx ); 798 cs = colors[n].value;
799 ctx.stroke(); 799 gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")");
800 ctx.closePath(); 800 }
801 } 801
802 ctx.fillStyle = gradient;
803
804 } else {
805 c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")";
806 ctx.fillStyle = c;
807 }
808
809 ctx.lineWidth = lw;
810 this.renderPath( inset, ctx );
811 ctx.fill();
812 ctx.closePath();
813 }
814
815 // render the stroke
816 ctx.beginPath();
817 if (this._strokeColor) {
818 inset = Math.ceil( 0.5*lw ) + 0.5;
819
820 if(this._strokeColor.gradientMode) {
821 if(this._strokeColor.gradientMode === "radial") {
822 gradient = ctx.createRadialGradient(w/2, h/2, Math.min(h/2, w/2)-inset, w/2, h/2, Math.max(h/2, w/2));
823 } else {
824 gradient = ctx.createLinearGradient(0, h/2, w, h/2);
825 }
826 colors = this._strokeColor.color;
827
828 len = colors.length;
829
830 for(n=0; n<len; n++) {
831 position = colors[n].position/100;
832 cs = colors[n].value;
833 gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")");
834 }
835
836 ctx.strokeStyle = gradient;
837
838 } else {
839 c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")";
840 ctx.strokeStyle = c;
841 }
842
843 ctx.lineWidth = lw;
844 this.renderPath( inset, ctx );
845 ctx.stroke();
846 ctx.closePath();
847 }
802 }; 848 };
803}; 849};
804 850
@@ -964,126 +1010,163 @@ NinjaCvsRt.RuntimeOval = function ()
964 if (bezPts) 1010 if (bezPts)
965 { 1011 {
966 var n = bezPts.length; 1012 var n = bezPts.length;
1013 var gradient,
1014 colors,
1015 len,
1016 j,
1017 position,
1018 cs,
1019 c;
1020
1021 // set up the fill style
1022 ctx.beginPath();
1023 ctx.lineWidth = 0;
1024 if (this._fillColor) {
1025 if(this._fillColor.gradientMode) {
1026 if(this._fillColor.gradientMode === "radial") {
1027 gradient = ctx.createRadialGradient(xCtr, yCtr, 0,
1028 xCtr, yCtr, Math.max(yScale, xScale));
1029 } else {
1030 gradient = ctx.createLinearGradient(0, this._height/2, this._width, this._height/2);
1031 }
1032 colors = this._fillColor.color;
1033
1034 len = colors.length;
1035
1036 for(j=0; j<len; j++) {
1037 position = colors[j].position/100;
1038 cs = colors[j].value;
1039 gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")");
1040 }
1041
1042 ctx.fillStyle = gradient;
967 1043
968 // set up the fill style 1044 } else {
969 ctx.beginPath(); 1045 c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")";
970 ctx.lineWidth = 0; 1046 ctx.fillStyle = c;
971 var c; 1047 }
972 if (this._fillColor) 1048 // draw the fill
973 { 1049// ctx.beginPath();
974 c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")"; 1050 var p = this.transform