aboutsummaryrefslogtreecommitdiff
path: root/assets
diff options
context:
space:
mode:
Diffstat (limited to 'assets')
-rw-r--r--assets/canvas-runtime.js271
-rwxr-xr-xassets/shaders/linearGradient.vert.glsl5
-rw-r--r--assets/shaders/radialGradient.vert.glsl4
3 files changed, 263 insertions, 17 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
8var NinjaCvsRt = NinjaCvsRt || {}; 8var NinjaCvsRt = NinjaCvsRt || {};
9 9
10/////////////////////////////////////////////////////////////////////// 10///////////////////////////////////////////////////////////////////////
11//Loading webGL/canvas data on window load
12window.addEventListener('load', loadCanvasData, false);
13//Load data function (on document loaded)
14function 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
12NinjaCvsRt.initWebGl = function (rootElement, directory) { 40NinjaCvsRt.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// **************************************************************************
1815NinjaCvsRt.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 },