diff options
Diffstat (limited to 'assets/canvas-runtime.js')
-rw-r--r-- | assets/canvas-runtime.js | 271 |
1 files changed, 256 insertions, 15 deletions
diff --git a/assets/canvas-runtime.js b/assets/canvas-runtime.js index eeafaab6..3ed7ed0f 100644 --- a/assets/canvas-runtime.js +++ b/assets/canvas-runtime.js | |||
@@ -8,9 +8,37 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot | |||
8 | var NinjaCvsRt = NinjaCvsRt || {}; | 8 | var NinjaCvsRt = NinjaCvsRt || {}; |
9 | 9 | ||
10 | /////////////////////////////////////////////////////////////////////// | 10 | /////////////////////////////////////////////////////////////////////// |
11 | //Loading webGL/canvas data on window load | ||
12 | window.addEventListener('load', loadCanvasData, false); | ||
13 | //Load data function (on document loaded) | ||
14 | function loadCanvasData (e) { | ||
15 | //Cleaning up events | ||
16 | window.removeEventListener('load', loadCanvasData, false); | ||
17 | //Getting tag with data, MUST contain attribute | ||
18 | var xhr, tag = document.querySelectorAll(['script[data-ninja-canvas-lib]'])[0]; | ||
19 | //Checking for data to be external file | ||
20 | if (tag.getAttribute('data-ninja-canvas-json') !== null) { | ||
21 | //Loading JSON data | ||
22 | xhr = new XMLHttpRequest(); | ||
23 | xhr.open("GET", tag.getAttribute('data-ninja-canvas-json'), false); | ||
24 | xhr.send(); | ||
25 | //Checking for data | ||
26 | if (xhr.readyState === 4) { | ||
27 | //Calling method to initialize all webGL/canvas(es) | ||
28 | NinjaCvsRt.initWebGl(document.body, tag.getAttribute('data-ninja-canvas-libpath'), xhr.response); | ||
29 | } else { | ||
30 | //TODO: Add error for users | ||
31 | } | ||
32 | } else {//Data in document itself | ||
33 | //Calling method to initialize all webGL/canvas(es) | ||
34 | NinjaCvsRt.initWebGl(document.body, tag.getAttribute('data-ninja-canvas-libpath'), document.querySelectorAll(['script[data-ninja-canvas]'])[0].innerHTML); | ||
35 | } | ||
36 | } | ||
37 | |||
38 | /////////////////////////////////////////////////////////////////////// | ||
11 | //Loading webGL/canvas data | 39 | //Loading webGL/canvas data |
12 | NinjaCvsRt.initWebGl = function (rootElement, directory) { | 40 | NinjaCvsRt.initWebGl = function (rootElement, directory, data) { |
13 | var cvsDataMngr, ninjaWebGlData = JSON.parse((document.querySelectorAll(['script[data-ninja-webgl]'])[0].innerHTML.replace('(', '')).replace(')', '')); | 41 | var cvsDataMngr, ninjaWebGlData = JSON.parse((data.replace('(', '')).replace(')', '')); |
14 | if (ninjaWebGlData && ninjaWebGlData.data) { | 42 | if (ninjaWebGlData && ninjaWebGlData.data) { |
15 | for (var n=0; ninjaWebGlData.data[n]; n++) { | 43 | for (var n=0; ninjaWebGlData.data[n]; n++) { |
16 | ninjaWebGlData.data[n] = unescape(ninjaWebGlData.data[n]); | 44 | ninjaWebGlData.data[n] = unescape(ninjaWebGlData.data[n]); |
@@ -350,6 +378,10 @@ NinjaCvsRt.GLRuntime = Object.create(Object.prototype, { | |||
350 | obj.importJSON( jObj ); | 378 | obj.importJSON( jObj ); |
351 | break; | 379 | break; |
352 | 380 | ||
381 | case 5: //subpath (created by pen tool) | ||
382 | obj = Object.create(NinjaCvsRt.RuntimeSubPath, {_materials: { value:[], writable:true}}); | ||
383 | obj.importJSON (jObj ); | ||
384 | break; | ||
353 | default: | 385 | default: |
354 | throw new Error( "Attempting to load unrecognized object type: " + type ); | 386 | throw new Error( "Attempting to load unrecognized object type: " + type ); |
355 | break; | 387 | break; |
@@ -878,11 +910,12 @@ NinjaCvsRt.RuntimeRectangle = Object.create(NinjaCvsRt.RuntimeGeomObj, { | |||
878 | inset = Math.ceil( lw ) - 0.5; | 910 | inset = Math.ceil( lw ) - 0.5; |
879 | 911 | ||
880 | if(this._fillColor.gradientMode) { | 912 | if(this._fillColor.gradientMode) { |
881 | if(this._fillColor.gradientMode === "radial") { | 913 | if(this._fillColor.gradientMode === "radial") { |
882 | gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(w, h)/2); | 914 | var ww = w - 2*lw, hh = h - 2*lw; |
883 | } else { | 915 | gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(ww, hh)/2); |
884 | gradient = ctx.createLinearGradient(inset/2, h/2, w-inset, h/2); | 916 | } else { |
885 | } | 917 | gradient = ctx.createLinearGradient(inset, h/2, w-inset, h/2); |
918 | } | ||
886 | colors = this._fillColor.color; | 919 | colors = this._fillColor.color; |
887 | 920 | ||
888 | len = colors.length; | 921 | len = colors.length; |
@@ -912,11 +945,10 @@ NinjaCvsRt.RuntimeRectangle = Object.create(NinjaCvsRt.RuntimeGeomObj, { | |||
912 | inset = Math.ceil( 0.5*lw ) - 0.5; | 945 | inset = Math.ceil( 0.5*lw ) - 0.5; |
913 | 946 | ||
914 | if(this._strokeColor.gradientMode) { | 947 | if(this._strokeColor.gradientMode) { |
915 | if(this._strokeColor.gradientMode === "radial") { | 948 | if(this._strokeColor.gradientMode === "radial") |
916 | gradient = ctx.createRadialGradient(w/2, h/2, Math.min(h, w)/2-inset, w/2, h/2, Math.max(h, w)/2); | 949 | gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(h, w)/2); |
917 | } else { | 950 | else |
918 | gradient = ctx.createLinearGradient(0, h/2, w, h/2); | 951 | gradient = ctx.createLinearGradient(0, h/2, w, h/2); |
919 | } | ||
920 | colors = this._strokeColor.color; | 952 | colors = this._strokeColor.color; |
921 | 953 | ||
922 | len = colors.length; | 954 | len = colors.length; |
@@ -1116,9 +1148,9 @@ NinjaCvsRt.RuntimeOval = Object.create(NinjaCvsRt.RuntimeGeomObj, { | |||
1116 | if(this._fillColor.gradientMode) { | 1148 | if(this._fillColor.gradientMode) { |
1117 | if(this._fillColor.gradientMode === "radial") { | 1149 | if(this._fillColor.gradientMode === "radial") { |
1118 | gradient = ctx.createRadialGradient(xCtr, yCtr, 0, | 1150 | gradient = ctx.createRadialGradient(xCtr, yCtr, 0, |
1119 | xCtr, yCtr, Math.max(this._width, this._height)/2); | 1151 | xCtr, yCtr, Math.max(this._width, this._height)/2 - lineWidth); |
1120 | } else { | 1152 | } else { |
1121 | gradient = ctx.createLinearGradient(lineWidth/2, this._height/2, this._width-lineWidth, this._height/2); | 1153 | gradient = ctx.createLinearGradient(lineWidth, this._height/2, this._width-lineWidth, this._height/2); |
1122 | } | 1154 | } |
1123 | colors = this._fillColor.color; | 1155 | colors = this._fillColor.color; |
1124 | 1156 | ||
@@ -1194,7 +1226,7 @@ NinjaCvsRt.RuntimeOval = Object.create(NinjaCvsRt.RuntimeGeomObj, { | |||
1194 | if (this._strokeColor) { | 1226 | if (this._strokeColor) { |
1195 | if(this._strokeColor.gradientMode) { | 1227 | if(this._strokeColor.gradientMode) { |
1196 | if(this._strokeColor.gradientMode === "radial") { | 1228 | if(this._strokeColor.gradientMode === "radial") { |
1197 | gradient = ctx.createRadialGradient(xCtr, yCtr, Math.min(xScale, yScale), | 1229 | gradient = ctx.createRadialGradient(xCtr, yCtr, 0, |
1198 | xCtr, yCtr, 0.5*Math.max(this._height, this._width)); | 1230 | xCtr, yCtr, 0.5*Math.max(this._height, this._width)); |
1199 | } else { | 1231 | } else { |
1200 | gradient = ctx.createLinearGradient(0, this._height/2, this._width, this._height/2); | 1232 | gradient = ctx.createLinearGradient(0, this._height/2, this._width, this._height/2); |
@@ -1456,6 +1488,8 @@ NinjaCvsRt.RuntimeRadialGradientMaterial = Object.create(NinjaCvsRt.RuntimeMater | |||
1456 | _colorStop3: { value: 0.6, writable: true }, | 1488 | _colorStop3: { value: 0.6, writable: true }, |
1457 | _colorStop4: { value: 1.0, writable: true }, | 1489 | _colorStop4: { value: 1.0, writable: true }, |
1458 | 1490 | ||
1491 | _textureTransform: { value: [1,0,0, 0,1,0, 0,0,1], writable: true }, | ||
1492 | |||
1459 | init: { | 1493 | init: { |
1460 | value: function(world) { | 1494 | value: function(world) { |
1461 | var material = this._materialNode; | 1495 | var material = this._materialNode; |
@@ -1477,6 +1511,8 @@ NinjaCvsRt.RuntimeRadialGradientMaterial = Object.create(NinjaCvsRt.RuntimeMater | |||
1477 | this._shader["default"].u_colorStop3.set( [this._colorStop3] ); | 1511 | this._shader["default"].u_colorStop3.set( [this._colorStop3] ); |
1478 | this._shader["default"].u_colorStop4.set( [this._colorStop4] ); | 1512 | this._shader["default"].u_colorStop4.set( [this._colorStop4] ); |
1479 | 1513 | ||
1514 | this._shader["default"].u_texTransform.set( this._textureTransform ); | ||
1515 | |||
1480 | if (this._angle !== undefined) | 1516 | if (this._angle !== undefined) |
1481 | this._shader["default"].u_cos_sin_angle.set([Math.cos(this._angle), Math.sin(this._angle)]); | 1517 | this._shader["default"].u_cos_sin_angle.set([Math.cos(this._angle), Math.sin(this._angle)]); |
1482 | } | 1518 | } |
@@ -1496,6 +1532,8 @@ NinjaCvsRt.RuntimeRadialGradientMaterial = Object.create(NinjaCvsRt.RuntimeMater | |||
1496 | this._colorStop3 = jObj.colorStop3; | 1532 | this._colorStop3 = jObj.colorStop3; |
1497 | this._colorStop4 = jObj.colorStop4; | 1533 | this._colorStop4 = jObj.colorStop4; |
1498 | 1534 | ||
1535 | this._textureTransform = jObj.textureTransform; | ||
1536 | |||
1499 | if (this._angle !== undefined) | 1537 | if (this._angle !== undefined) |
1500 | this._angle = jObj.angle; | 1538 | this._angle = jObj.angle; |
1501 | } | 1539 | } |
@@ -1770,3 +1808,206 @@ NinjaCvsRt.RuntimePlasmaMaterial = Object.create(NinjaCvsRt.RuntimeMaterial, { | |||
1770 | }); | 1808 | }); |
1771 | 1809 | ||
1772 | 1810 | ||
1811 | |||
1812 | // ************************************************************************** | ||
1813 | // Runtime for the pen tool path | ||
1814 | // ************************************************************************** | ||
1815 | NinjaCvsRt.AnchorPoint = Object.create(Object.prototype, { | ||
1816 | ///////////////////////////////////////// | ||
1817 | // Instance variables | ||
1818 | ///////////////////////////////////////// | ||
1819 | _x: {value: 0.0, writable: true}, | ||
1820 | _y: {value: 0.0, writable: true}, | ||
1821 | _z: {value: 0.0, writable: true}, | ||
1822 | |||
1823 | _prevX: {value: 0.0, writable: true}, | ||
1824 | _prevY: {value: 0.0, writable: true}, | ||
1825 | _prevZ: {value: 0.0, writable: true}, | ||
1826 | |||
1827 | _nextX: {value: 0.0, writable: true}, | ||
1828 | _nextY: {value: 0.0, writable: true}, | ||
1829 | _nextZ: {value: 0.0, writable: true}, | ||
1830 | |||
1831 | // *********** setters ************ | ||
1832 | setPos: { | ||
1833 | value: function(x,y,z){ | ||
1834 | this._x = x; | ||
1835 | this._y = y; | ||
1836 | this._z = z; | ||
1837 | } | ||
1838 | }, | ||
1839 | |||
1840 | setPrevPos: { | ||
1841 | value: function (x, y, z) { | ||
1842 | this._prevX = x; | ||
1843 | this._prevY = y; | ||
1844 | this._prevZ = z; | ||
1845 | } | ||
1846 | }, | ||
1847 | |||
1848 | setNextPos: { | ||
1849 | value: function (x, y, z) { | ||
1850 | this._nextX = x; | ||
1851 | this._nextY = y; | ||
1852 | this._nextZ = z; | ||
1853 | } | ||
1854 | }, | ||
1855 | |||
1856 | // *************** getters ****************** | ||
1857 | // (add as needed) | ||
1858 | getPosX: { | ||
1859 | value: function () { | ||
1860 | return this._x; | ||
1861 | } | ||
1862 | }, | ||
1863 | |||
1864 | getPosY: { | ||
1865 | value: function () { | ||
1866 | return this._y; | ||
1867 | } | ||
1868 | }, | ||
1869 | |||
1870 | getPosZ: { | ||
1871 | value: function () { | ||
1872 | return this._z; | ||
1873 | } | ||
1874 | }, | ||
1875 | |||
1876 | getPrevX: { | ||
1877 | value: function () { | ||
1878 | return this._prevX; | ||
1879 | } | ||
1880 | }, | ||
1881 | |||
1882 | getPrevY: { | ||
1883 | value: function () { | ||
1884 | return this._prevY; | ||
1885 | } | ||
1886 | }, | ||
1887 | |||
1888 | getPrevZ: { | ||