From 91a9e02bff0397ec9b1f55fdf61cef72eb0d8a0f Mon Sep 17 00:00:00 2001 From: hwc487 Date: Tue, 8 May 2012 15:53:35 -0700 Subject: Radial gradients to match CSS --- assets/shaders/radialGradient.vert.glsl | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'assets') diff --git a/assets/shaders/radialGradient.vert.glsl b/assets/shaders/radialGradient.vert.glsl index c3e1b50a..7994ac12 100644 --- a/assets/shaders/radialGradient.vert.glsl +++ b/assets/shaders/radialGradient.vert.glsl @@ -18,11 +18,13 @@ attribute vec2 texcoord; // matrix uniforms uniform mat4 u_mvMatrix; uniform mat4 u_projMatrix; +uniform mat3 u_texTransform; varying vec2 v_uv; void main(void) { gl_Position = u_projMatrix * u_mvMatrix * vec4(vert,1.0) ; - v_uv = texcoord; + vec3 tmp = u_texTransform * vec3( texcoord, 1.0); + v_uv = tmp.xy; } \ No newline at end of file -- cgit v1.2.3 From 24417212f9fad7e992697e9370047fcf2f037913 Mon Sep 17 00:00:00 2001 From: hwc487 Date: Tue, 8 May 2012 16:14:28 -0700 Subject: WebGL linear gradients to match CSS --- assets/shaders/linearGradient.vert.glsl | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) (limited to 'assets') diff --git a/assets/shaders/linearGradient.vert.glsl b/assets/shaders/linearGradient.vert.glsl index aac9cbee..f0800812 100755 --- a/assets/shaders/linearGradient.vert.glsl +++ b/assets/shaders/linearGradient.vert.glsl @@ -37,6 +37,7 @@ uniform float u_colorStop3; uniform float u_colorStop4; uniform vec2 u_cos_sin_angle; //uniform int u_colorCount; // currently using 4 +uniform mat3 u_texTransform; varying vec2 v_uv; @@ -44,5 +45,7 @@ varying vec2 v_uv; void main(void) { gl_Position = u_projMatrix * u_mvMatrix * vec4(vert,1.0) ; - v_uv = texcoord; + //v_uv = texcoord; + vec3 tmp = u_texTransform * vec3( texcoord, 1.0); + v_uv = tmp.xy; } -- cgit v1.2.3 From 9321b1d7ab2d23e165ac90e9eea3287f72463948 Mon Sep 17 00:00:00 2001 From: hwc487 Date: Thu, 17 May 2012 09:51:11 -0700 Subject: Linear & radial gradients for runtime fixes --- assets/canvas-runtime.js | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'assets') diff --git a/assets/canvas-runtime.js b/assets/canvas-runtime.js index eeafaab6..b6682493 100644 --- a/assets/canvas-runtime.js +++ b/assets/canvas-runtime.js @@ -1456,6 +1456,8 @@ NinjaCvsRt.RuntimeRadialGradientMaterial = Object.create(NinjaCvsRt.RuntimeMater _colorStop3: { value: 0.6, writable: true }, _colorStop4: { value: 1.0, writable: true }, + _textureTransform: { value: [1,0,0, 0,1,0, 0,0,1], writable: true }, + init: { value: function(world) { var material = this._materialNode; @@ -1477,6 +1479,8 @@ NinjaCvsRt.RuntimeRadialGradientMaterial = Object.create(NinjaCvsRt.RuntimeMater this._shader["default"].u_colorStop3.set( [this._colorStop3] ); this._shader["default"].u_colorStop4.set( [this._colorStop4] ); + this._shader["default"].u_texTransform.set( this._textureTransform ); + if (this._angle !== undefined) this._shader["default"].u_cos_sin_angle.set([Math.cos(this._angle), Math.sin(this._angle)]); } @@ -1496,6 +1500,8 @@ NinjaCvsRt.RuntimeRadialGradientMaterial = Object.create(NinjaCvsRt.RuntimeMater this._colorStop3 = jObj.colorStop3; this._colorStop4 = jObj.colorStop4; + this._textureTransform = jObj.textureTransform; + if (this._angle !== undefined) this._angle = jObj.angle; } -- cgit v1.2.3 From 6b03f357f45d76733ae7bf5ff52ffe2fb2a84fda Mon Sep 17 00:00:00 2001 From: hwc487 Date: Fri, 18 May 2012 12:35:58 -0700 Subject: Updates for WebGL/Canvas 2D authortime and runtime gradients. --- assets/canvas-runtime.js | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) (limited to 'assets') diff --git a/assets/canvas-runtime.js b/assets/canvas-runtime.js index b6682493..67d53963 100644 --- a/assets/canvas-runtime.js +++ b/assets/canvas-runtime.js @@ -878,11 +878,12 @@ NinjaCvsRt.RuntimeRectangle = Object.create(NinjaCvsRt.RuntimeGeomObj, { inset = Math.ceil( lw ) - 0.5; if(this._fillColor.gradientMode) { - if(this._fillColor.gradientMode === "radial") { - gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(w, h)/2); - } else { - gradient = ctx.createLinearGradient(inset/2, h/2, w-inset, h/2); - } + if(this._fillColor.gradientMode === "radial") { + var ww = w - 2*lw, hh = h - 2*lw; + gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(ww, hh)/2); + } else { + gradient = ctx.createLinearGradient(inset, h/2, w-inset, h/2); + } colors = this._fillColor.color; len = colors.length; @@ -912,11 +913,10 @@ NinjaCvsRt.RuntimeRectangle = Object.create(NinjaCvsRt.RuntimeGeomObj, { inset = Math.ceil( 0.5*lw ) - 0.5; if(this._strokeColor.gradientMode) { - if(this._strokeColor.gradientMode === "radial") { - gradient = ctx.createRadialGradient(w/2, h/2, Math.min(h, w)/2-inset, w/2, h/2, Math.max(h, w)/2); - } else { - gradient = ctx.createLinearGradient(0, h/2, w, h/2); - } + if(this._strokeColor.gradientMode === "radial") + gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(h, w)/2); + else + gradient = ctx.createLinearGradient(0, h/2, w, h/2); colors = this._strokeColor.color; len = colors.length; @@ -1116,9 +1116,9 @@ NinjaCvsRt.RuntimeOval = Object.create(NinjaCvsRt.RuntimeGeomObj, { if(this._fillColor.gradientMode) { if(this._fillColor.gradientMode === "radial") { gradient = ctx.createRadialGradient(xCtr, yCtr, 0, - xCtr, yCtr, Math.max(this._width, this._height)/2); + xCtr, yCtr, Math.max(this._width, this._height)/2 - lineWidth); } else { - gradient = ctx.createLinearGradient(lineWidth/2, this._height/2, this._width-lineWidth, this._height/2); + gradient = ctx.createLinearGradient(lineWidth, this._height/2, this._width-lineWidth, this._height/2); } colors = this._fillColor.color; @@ -1194,7 +1194,7 @@ NinjaCvsRt.RuntimeOval = Object.create(NinjaCvsRt.RuntimeGeomObj, { if (this._strokeColor) { if(this._strokeColor.gradientMode) { if(this._strokeColor.gradientMode === "radial") { - gradient = ctx.createRadialGradient(xCtr, yCtr, Math.min(xScale, yScale), + gradient = ctx.createRadialGradient(xCtr, yCtr, 0, xCtr, yCtr, 0.5*Math.max(this._height, this._width)); } else { gradient = ctx.createLinearGradient(0, this._height/2, this._width, this._height/2); -- cgit v1.2.3 From 11a5be59ff80e0672e9ecf36679be28effb7696c Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Mon, 21 May 2012 18:28:38 -0700 Subject: Modifying Canvas Data I/O Changing methods to save all data to external files, this will be optional for the user. Currently save will only save to external files, but UI will allow user to save in file. Need to implement loading data on file open for external file, only works for in file currently. Modified the Runtime file to load all data itself to not bulk up the user document. --- assets/canvas-runtime.js | 32 ++++++++++++++++++++++++++++++-- 1 file changed, 30 insertions(+), 2 deletions(-) (limited to 'assets') diff --git a/assets/canvas-runtime.js b/assets/canvas-runtime.js index eeafaab6..9bf22313 100644 --- a/assets/canvas-runtime.js +++ b/assets/canvas-runtime.js @@ -7,10 +7,38 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot // namespace for the Ninja Canvas Runtime var NinjaCvsRt = NinjaCvsRt || {}; +/////////////////////////////////////////////////////////////////////// +//Loading webGL/canvas data on window load +window.addEventListener('load', loadCanvasData, false); +//Load data function (on document loaded) +function loadCanvasData (e) { + //Cleaning up events + window.removeEventListener('load', loadCanvasData, false); + //Getting tag with data, MUST contain attribute + var xhr, tag = document.querySelectorAll(['script[data-ninja-canvas-lib]'])[0]; + //Checking for data to be external file + if (tag.getAttribute('data-ninja-canvas-json') !== null) { + //Loading JSON data + xhr = new XMLHttpRequest(); + xhr.open("GET", tag.getAttribute('data-ninja-canvas-json'), false); + xhr.send(); + //Checking for data + if (xhr.readyState === 4) { + //Calling method to initialize all webGL/canvas(es) + NinjaCvsRt.initWebGl(document.body, tag.getAttribute('data-ninja-canvas-libpath'), xhr.response); + } else { + //TODO: Add error for users + } + } else {//Data in document itself + //Calling method to initialize all webGL/canvas(es) + NinjaCvsRt.initWebGl(document.body, tag.getAttribute('data-ninja-canvas-libpath'), document.querySelectorAll(['script[data-ninja-canvas]'])[0].innerHTML); + } +} + /////////////////////////////////////////////////////////////////////// //Loading webGL/canvas data -NinjaCvsRt.initWebGl = function (rootElement, directory) { - var cvsDataMngr, ninjaWebGlData = JSON.parse((document.querySelectorAll(['script[data-ninja-webgl]'])[0].innerHTML.replace('(', '')).replace(')', '')); +NinjaCvsRt.initWebGl = function (rootElement, directory, data) { + var cvsDataMngr, ninjaWebGlData = JSON.parse((data.replace('(', '')).replace(')', '')); if (ninjaWebGlData && ninjaWebGlData.data) { for (var n=0; ninjaWebGlData.data[n]; n++) { ninjaWebGlData.data[n] = unescape(ninjaWebGlData.data[n]); -- cgit v1.2.3