diff options
Diffstat (limited to 'assets/canvas-runtime.js')
-rw-r--r-- | assets/canvas-runtime.js | 186 |
1 files changed, 88 insertions, 98 deletions
diff --git a/assets/canvas-runtime.js b/assets/canvas-runtime.js index b4563ea5..6e9d1121 100644 --- a/assets/canvas-runtime.js +++ b/assets/canvas-runtime.js | |||
@@ -4,11 +4,12 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | 4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. |
5 | </copyright> */ | 5 | </copyright> */ |
6 | 6 | ||
7 | 7 | // namespace for the Ninja Canvas Runtime | |
8 | var NinjaCvsRt = NinjaCvsRt || {}; | ||
8 | 9 | ||
9 | /////////////////////////////////////////////////////////////////////// | 10 | /////////////////////////////////////////////////////////////////////// |
10 | //Loading webGL/canvas data | 11 | //Loading webGL/canvas data |
11 | function initWebGl (rootElement, directory) { | 12 | NinjaCvsRt.initWebGl = function (rootElement, directory) { |
12 | var cvsDataMngr, ninjaWebGlData = JSON.parse((document.querySelectorAll(['script[data-ninja-webgl]'])[0].innerHTML.replace('(', '')).replace(')', '')); | 13 | var cvsDataMngr, ninjaWebGlData = JSON.parse((document.querySelectorAll(['script[data-ninja-webgl]'])[0].innerHTML.replace('(', '')).replace(')', '')); |
13 | if (ninjaWebGlData && ninjaWebGlData.data) { | 14 | if (ninjaWebGlData && ninjaWebGlData.data) { |
14 | for (var n=0; ninjaWebGlData.data[n]; n++) { | 15 | for (var n=0; ninjaWebGlData.data[n]; n++) { |
@@ -16,7 +17,7 @@ function initWebGl (rootElement, directory) { | |||
16 | } | 17 | } |
17 | } | 18 | } |
18 | //Creating data manager | 19 | //Creating data manager |
19 | cvsDataMngr = new CanvasDataManager(); | 20 | cvsDataMngr = new NinjaCvsRt.CanvasDataManager(); |
20 | //Loading data to canvas(es) | 21 | //Loading data to canvas(es) |
21 | cvsDataMngr.loadGLData(rootElement, ninjaWebGlData.data, directory); | 22 | cvsDataMngr.loadGLData(rootElement, ninjaWebGlData.data, directory); |
22 | }; | 23 | }; |
@@ -25,7 +26,7 @@ function initWebGl (rootElement, directory) { | |||
25 | // Class ShapeRuntime | 26 | // Class ShapeRuntime |
26 | // Manages runtime shape display | 27 | // Manages runtime shape display |
27 | /////////////////////////////////////////////////////////////////////// | 28 | /////////////////////////////////////////////////////////////////////// |
28 | function CanvasDataManager() | 29 | NinjaCvsRt.CanvasDataManager = function () |
29 | { | 30 | { |
30 | this.loadGLData = function(root, valueArray, assetPath ) | 31 | this.loadGLData = function(root, valueArray, assetPath ) |
31 | { | 32 | { |
@@ -54,32 +55,13 @@ function CanvasDataManager() | |||
54 | var canvas = this.findCanvasWithID( id, root ); | 55 | var canvas = this.findCanvasWithID( id, root ); |
55 | if (canvas) | 56 | if (canvas) |
56 | { | 57 | { |
57 | new GLRuntime( canvas, jObj, assetPath ); | 58 | new NinjaCvsRt.GLRuntime( canvas, jObj, assetPath ); |
58 | } | 59 | } |
59 | } | 60 | } |
60 | } | 61 | } |
61 | } | 62 | } |
62 | }; | 63 | }; |
63 | 64 | ||
64 | this.collectGLData = function( elt, dataArray ) | ||
65 | { | ||
66 | if (elt.elementModel && elt.elementModel.shapeModel && elt.elementModel.shapeModel.GLWorld) | ||
67 | { | ||
68 | var data = elt.elementModel.shapeModel.GLWorld.export( true ); | ||
69 | dataArray.push( data ); | ||
70 | } | ||
71 | |||
72 | if (elt.children) | ||
73 | { | ||
74 | var nKids = elt.children.length; | ||
75 | for (var i=0; i<nKids; i++) | ||
76 | { | ||
77 | var child = elt.children[i]; | ||
78 | this.collectGLData( child, dataArray ); | ||
79 | } | ||
80 | } | ||
81 | }; | ||
82 | |||
83 | this.findCanvasWithID = function( id, elt ) | 65 | this.findCanvasWithID = function( id, elt ) |
84 | { | 66 | { |
85 | var cid = elt.getAttribute( "data-RDGE-id" ); | 67 | var cid = elt.getAttribute( "data-RDGE-id" ); |
@@ -102,7 +84,7 @@ function CanvasDataManager() | |||
102 | // Class GLRuntime | 84 | // Class GLRuntime |
103 | // Manages runtime fora WebGL canvas | 85 | // Manages runtime fora WebGL canvas |
104 | /////////////////////////////////////////////////////////////////////// | 86 | /////////////////////////////////////////////////////////////////////// |
105 | function GLRuntime( canvas, jObj, assetPath ) | 87 | NinjaCvsRt.GLRuntime = function ( canvas, jObj, assetPath ) |
106 | { | 88 | { |
107 | /////////////////////////////////////////////////////////////////////// | 89 | /////////////////////////////////////////////////////////////////////// |
108 | // Instance variables | 90 | // Instance variables |
@@ -307,17 +289,17 @@ function GLRuntime( canvas, jObj, assetPath ) | |||
307 | switch (type) | 289 | switch (type) |
308 | { | 290 | { |
309 | case 1: | 291 | case 1: |
310 | obj = new RuntimeRectangle(); | 292 | obj = new NinjaCvsRt.RuntimeRectangle(); |
311 | obj.import( jObj, parent ); | 293 | obj.import( jObj, parent ); |
312 | break; | 294 | break; |
313 | 295 | ||
314 | case 2: // circle | 296 | case 2: // circle |
315 | obj = new RuntimeOval(); | 297 | obj = new NinjaCvsRt.RuntimeOval(); |
316 | obj.import( jObj, parent ); | 298 | obj.import( jObj, parent ); |
317 | break; | 299 | break; |
318 | 300 | ||
319 | case 3: // line | 301 | case 3: // line |
320 | obj = new RuntimeLine(); | 302 | obj = new NinjaCvsRt.RuntimeLine(); |
321 | obj.import( jObj, parent ); | 303 | obj.import( jObj, parent ); |
322 | break; | 304 | break; |
323 | 305 | ||
@@ -457,7 +439,7 @@ function GLRuntime( canvas, jObj, assetPath ) | |||
457 | // Class RuntimeGeomObj | 439 | // Class RuntimeGeomObj |
458 | // Super class for all geometry classes | 440 | // Super class for all geometry classes |
459 | /////////////////////////////////////////////////////////////////////// | 441 | /////////////////////////////////////////////////////////////////////// |
460 | function RuntimeGeomObj() | 442 | NinjaCvsRt.RuntimeGeomObj = function () |
461 | { | 443 | { |
462 | /////////////////////////////////////////////////////////////////////// | 444 | /////////////////////////////////////////////////////////////////////// |
463 | // Constants | 445 | // Constants |
@@ -517,12 +499,12 @@ function RuntimeGeomObj() | |||
517 | var shaderName = matObj.material; | 499 | var shaderName = matObj.material; |
518 | switch (shaderName) | 500 | switch (shaderName) |
519 | { | 501 | { |
520 | case "flat": mat = new RuntimeFlatMaterial(); break; | 502 | case "flat": mat = new NinjaCvsRt.RuntimeFlatMaterial(); break; |
521 | case "radialGradient": mat = new RuntimeRadialGradientMaterial(); break; | 503 | case "radialGradient": mat = new NinjaCvsRt.RuntimeRadialGradientMaterial(); break; |
522 | case "linearGradient": mat = new RuntimeLinearGradientMaterial(); break; | 504 | case "linearGradient": mat = new NinjaCvsRt.RuntimeLinearGradientMaterial(); break; |
523 | case "bumpMetal": mat = new RuntimeBumpMetalMaterial(); break; | 505 | case "bumpMetal": mat = new NinjaCvsRt.RuntimeBumpMetalMaterial(); break; |
524 | case "uber": mat = new RuntimeUberMaterial(); break; | 506 | case "uber": mat = new NinjaCvsRt.RuntimeUberMaterial(); break; |
525 | case "plasma": mat = new RuntimePlasmaMaterial(); break; | 507 | case "plasma": mat = new NinjaCvsRt.RuntimePlasmaMaterial(); break; |
526 | 508 | ||
527 | case "deform": | 509 | case "deform": |
528 | case "water": | 510 | case "water": |
@@ -539,7 +521,7 @@ function RuntimeGeomObj() | |||
539 | case "zinvert": | 521 | case "zinvert": |
540 | case "keleidoscope": | 522 | case "keleidoscope": |
541 | case "radialBlur": | 523 | case "radialBlur": |
542 | case "pulse": mat = new RuntimePulseMaterial(); break; | 524 | case "pulse": mat = new NinjaCvsRt.RuntimePulseMaterial(); break; |
543 | 525 | ||
544 | default: | 526 | default: |
545 | console.log( "material type: " + materialType + " is not supported" ); | 527 | console.log( "material type: " + materialType + " is not supported" ); |
@@ -624,8 +606,8 @@ function RuntimeGeomObj() | |||
624 | var rtnVec; | 606 | var rtnVec; |
625 | if (!len) len = 1.0; | 607 | if (!len) len = 1.0; |
626 | 608 | ||
627 | var sum = 0.0; | 609 | var sum = 0.0, i = 0; |
628 | for (var i=0; i<dimen; i++) | 610 | for (i = 0; i<dimen; i++) |
629 | sum += vec[i]*vec[i]; | 611 | sum += vec[i]*vec[i]; |
630 | sum = Math.sqrt( sum ); | 612 | sum = Math.sqrt( sum ); |
631 | 613 | ||
@@ -633,7 +615,7 @@ function RuntimeGeomObj() | |||
633 | { | 615 | { |
634 | var scale = len/sum; | 616 | var scale = len/sum; |
635 | rtnVec = []; | 617 | rtnVec = []; |
636 | for (var i=0; i<dimen; i++) | 618 | for (i = 0; i<dimen; i++) |
637 | rtnVec[i] = vec[i]*scale; | 619 | rtnVec[i] = vec[i]*scale; |
638 | } | 620 | } |
639 | 621 | ||
@@ -683,10 +665,10 @@ function RuntimeGeomObj() | |||
683 | /////////////////////////////////////////////////////////////////////// | 665 | /////////////////////////////////////////////////////////////////////// |
684 | // Class RuntimeRectangle | 666 | // Class RuntimeRectangle |
685 | /////////////////////////////////////////////////////////////////////// | 667 | /////////////////////////////////////////////////////////////////////// |
686 | function RuntimeRectangle() | 668 | NinjaCvsRt.RuntimeRectangle = function () |
687 | { | 669 | { |
688 | // inherit the members of RuntimeGeomObj | 670 | // inherit the members of NinjaCvsRt.RuntimeGeomObj |
689 | this.inheritedFrom = RuntimeGeomObj; | 671 | this.inheritedFrom = NinjaCvsRt.RuntimeGeomObj; |
690 | this.inheritedFrom(); | 672 | this.inheritedFrom(); |
691 | 673 | ||
692 | this.import = function( jObj ) | 674 | this.import = function( jObj ) |
@@ -801,13 +783,14 @@ function RuntimeRectangle() | |||
801 | 783 | ||
802 | // render the fill | 784 | // render the fill |
803 | ctx.beginPath(); | 785 | ctx.beginPath(); |
786 | var c = null, inset = 0; | ||
804 | if (this._fillColor) | 787 | if (this._fillColor) |
805 | { | 788 | { |
806 | var c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")"; | 789 | c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")"; |
807 | ctx.fillStyle = c; | 790 | ctx.fillStyle = c; |
808 | 791 | ||
809 | ctx.lineWidth = lw; | 792 | ctx.lineWidth = lw; |
810 | var inset = Math.ceil( lw ) + 0.5; | 793 | inset = Math.ceil( lw ) + 0.5; |
811 | this.renderPath( inset, ctx ); | 794 | this.renderPath( inset, ctx ); |
812 | ctx.fill(); | 795 | ctx.fill(); |
813 | ctx.closePath(); | 796 | ctx.closePath(); |
@@ -817,11 +800,11 @@ function RuntimeRectangle() | |||
817 | ctx.beginPath(); | 800 | ctx.beginPath(); |
818 | if (this._strokeColor) | 801 | if (this._strokeColor) |
819 | { | 802 | { |
820 | var c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")"; | 803 | c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")"; |
821 | ctx.strokeStyle = c; | 804 | ctx.strokeStyle = c; |