From c14b8d9fd1acde98ffc427b0bbdba7d1442c39a4 Mon Sep 17 00:00:00 2001
From: Nivesh Rajbhandari
Date: Thu, 3 May 2012 17:07:40 -0700
Subject: Converting canvas runtime to use prototypes for geom obj, rectangle,
 oval and line.

Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>
---
 assets/canvas-runtime.js | 1336 +++++++++++++++++++++++-----------------------
 1 file changed, 672 insertions(+), 664 deletions(-)

(limited to 'assets/canvas-runtime.js')

diff --git a/assets/canvas-runtime.js b/assets/canvas-runtime.js
index 104c22cc..17f8cda8 100644
--- a/assets/canvas-runtime.js
+++ b/assets/canvas-runtime.js
@@ -305,16 +305,19 @@ NinjaCvsRt.GLRuntime = function ( canvas, jObj,  assetPath )
 		{
 			case 1:
 				obj = new NinjaCvsRt.RuntimeRectangle();
+                obj._materials = [];
 				obj.importJSON( jObj );
 				break;
 
 			case 2:		// circle
 				obj = new NinjaCvsRt.RuntimeOval();
+                obj._materials = [];
 				obj.importJSON( jObj );
 				break;
 
 			case 3:		// line
 				obj = new NinjaCvsRt.RuntimeLine();
+                obj._materials = [];
 				obj.importJSON( jObj );
 				break;
 
@@ -481,204 +484,205 @@ NinjaCvsRt.RuntimeGeomObj = function ()
 
 	// array of materials
 	this._materials = [];
+};
 
-    ///////////////////////////////////////////////////////////////////////
-    // Property accessors
-    ///////////////////////////////////////////////////////////////////////
-
-	this.geomType	= function()		{  return this.GEOM_TYPE_UNDEFINED;	};
-
-	this.setWorld	= function(w)		{  this._world = w;					};
-	this.getWorld	= function()		{  return this._world;				};
+//NinjaCvsRt.RuntimeGeomObj.prototype = Object.create(Object.prototype, {});
+///////////////////////////////////////////////////////////////////////
+// Property accessors
+///////////////////////////////////////////////////////////////////////
 
-    ///////////////////////////////////////////////////////////////////////
-    // Methods
-    ///////////////////////////////////////////////////////////////////////    
-	this.addChild = function( child )
-	{
-		if (!this._children)  this._children = [];
-		this._children.push( child );
-	};
+NinjaCvsRt.RuntimeGeomObj.prototype.geomType	= function()		{  return this.GEOM_TYPE_UNDEFINED;	};
 
-    this.importJSON = function()
-    {
-	};
+NinjaCvsRt.RuntimeGeomObj.prototype.setWorld	= function(w)		{  this._world = w;					};
+NinjaCvsRt.RuntimeGeomObj.prototype.getWorld	= function()		{  return this._world;				};
 
-	this.importMaterials = function(jObj)
-	{
-		if (!jObj || !jObj.materials)  return;
 
-		var nMaterials = jObj.nMaterials;
-		var matArray = jObj.materials;
-		for (var i=0;  i<nMaterials;  i++)
-		{
-			var mat;
-			var matObj = matArray[i].material;
-			var matNodeName = matArray[i].materialNodeName;
-			var shaderName = matObj.material;
-			switch (shaderName)
-			{
-				case "flat":			mat = new NinjaCvsRt.RuntimeFlatMaterial();				break;
-				case "radialGradient":  mat = new NinjaCvsRt.RuntimeRadialGradientMaterial();		break;
-				case "linearGradient":  mat = new NinjaCvsRt.RuntimeLinearGradientMaterial();		break;
-				case "bumpMetal":		mat = new NinjaCvsRt.RuntimeBumpMetalMaterial();			break;
-				case "uber":			mat = new NinjaCvsRt.RuntimeUberMaterial();				break;
-				case "plasma":			mat = new NinjaCvsRt.RuntimePlasmaMaterial();				break;
-
-				case "deform":
-				case "water":
-				case "paris":
-				case "raiders":
-				case "tunnel":
-				case "reliefTunnel":
-				case "squareTunnel":
-				case "twist":
-				case "fly":
-				case "julia":
-				case "mandel":
-				case "star":
-				case "zinvert":
-				case "keleidoscope":
-				case "radialBlur":
-				case "pulse":			mat = new NinjaCvsRt.RuntimePulseMaterial();				break;
-
-				default:
-					console.log( "material type: " + shaderName + " is not supported" );
-					break;
-			}
+///////////////////////////////////////////////////////////////////////
+// Methods
+///////////////////////////////////////////////////////////////////////
+NinjaCvsRt.RuntimeGeomObj.prototype.addChild = function( child )
+{
+    if (!this._children)  this._children = [];
+    this._children.push( child );
+};
 
-			if (mat)
-			{
-				mat.importJSON( matObj );
-				mat._materialNodeName = matNodeName;
-				this._materials.push( mat );
-			}
-		}
-	};
+NinjaCvsRt.RuntimeGeomObj.prototype.importJSON = function()
+{
+};
 
-	////////////////////////////////////////////////////////////////////
-	// vector function
+NinjaCvsRt.RuntimeGeomObj.prototype.importMaterials = function(jObj)
+{
+    if (!jObj || !jObj.materials)  return;
 
-	this.vecAdd = function( dimen,  a, b )
-	{
-        var rtnVec;
-        if ((a.length < dimen) || (b.length < dimen))
+    var nMaterials = jObj.nMaterials;
+    var matArray = jObj.materials;
+    for (var i=0;  i<nMaterials;  i++)
+    {
+        var mat;
+        var matObj = matArray[i].material;
+        var matNodeName = matArray[i].materialNodeName;
+        var shaderName = matObj.material;
+        switch (shaderName)
         {
-            throw new Error( "dimension error in vecAdd" );
+            case "flat":			mat = new NinjaCvsRt.RuntimeFlatMaterial();				break;
+            case "radialGradient":  mat = new NinjaCvsRt.RuntimeRadialGradientMaterial();		break;
+            case "linearGradient":  mat = new NinjaCvsRt.RuntimeLinearGradientMaterial();		break;
+            case "bumpMetal":		mat = new NinjaCvsRt.RuntimeBumpMetalMaterial();			break;
+            case "uber":			mat = new NinjaCvsRt.RuntimeUberMaterial();				break;
+            case "plasma":			mat = new NinjaCvsRt.RuntimePlasmaMaterial();				break;
+
+            case "deform":
+            case "water":
+            case "paris":
+            case "raiders":
+            case "tunnel":
+            case "reliefTunnel":
+            case "squareTunnel":
+            case "twist":
+            case "fly":
+            case "julia":
+            case "mandel":
+            case "star":
+            case "zinvert":
+            case "keleidoscope":
+            case "radialBlur":
+            case "pulse":			mat = new NinjaCvsRt.RuntimePulseMaterial();				break;
+
+            default:
+                console.log( "material type: " + shaderName + " is not supported" );
+                break;
         }
 
-        rtnVec = [];
-        for (var i=0;  i<dimen;  i++)
-            rtnVec[i] = a[i] + b[i];
+        if (mat)
+        {
+            mat.importJSON( matObj );
+            mat._materialNodeName = matNodeName;
+            this._materials.push( mat );
+        }
+    }
+};
 
-        return rtnVec;
-    };
+////////////////////////////////////////////////////////////////////
+// vector function
+NinjaCvsRt.RuntimeGeomObj.prototype.vecAdd = function( dimen,  a, b )
+{
+    var rtnVec;
+    if ((a.length < dimen) || (b.length < dimen))
+    {
+        throw new Error( "dimension error in vecAdd" );
+    }
 
+    rtnVec = [];
+    for (var i=0;  i<dimen;  i++)
+        rtnVec[i] = a[i] + b[i];
 
-	this.vecSubtract =  function( dimen, a, b )
-	{
-        var rtnVec;
-        if ((a.length < dimen) || (b.length < dimen))
-        {
-            throw new Error( "dimension error in vecSubtract" );
-        }
+    return rtnVec;
+};
 
-        rtnVec = [];
-        for (var i=0;  i<dimen;  i++)
-            rtnVec[i] = a[i] - b[i];
 
-        return rtnVec;
-    };
+NinjaCvsRt.RuntimeGeomObj.prototype.vecSubtract =  function( dimen, a, b )
+{
+    var rtnVec;
+    if ((a.length < dimen) || (b.length < dimen))
+    {
+        throw new Error( "dimension error in vecSubtract" );
+    }
 
-    this.vecDot = function( dimen,  v0, v1 )
-	{
-        if ((v0.length < dimen) || (v1.length < dimen))
-        {
-            throw new Error( "dimension error in vecDot" );
-        }
+    rtnVec = [];
+    for (var i=0;  i<dimen;  i++)
+        rtnVec[i] = a[i] - b[i];
 
-        var sum = 0.0;
-        for (var i=0;  i<dimen;  i++)
-            sum += v0[i] * v1[i];
+    return rtnVec;
+};
 
-        return sum;
-    };
+NinjaCvsRt.RuntimeGeomObj.prototype.vecDot = function( dimen,  v0, v1 )
+{
+    if ((v0.length < dimen) || (v1.length < dimen))
+    {
+        throw new Error( "dimension error in vecDot" );
+    }
 
-	this.vecMag = function( dimen, vec )
-	{
-        var sum = 0.0;
-        for (var i=0;  i<dimen;  i++)
-            sum += vec[i]*vec[i];
-        return Math.sqrt( sum );
-    };
+    var sum = 0.0;
+    for (var i=0;  i<dimen;  i++)
+        sum += v0[i] * v1[i];
 
-	this.vecScale = function(dimen, vec, scale)
-	{
-        for (var i=0;  i<dimen;  i++)
-            vec[i] *= scale;
+    return sum;
+};
 
-        return vec;
-    };
+NinjaCvsRt.RuntimeGeomObj.prototype.vecMag = function( dimen, vec )
+{
+    var sum = 0.0;
+    for (var i=0;  i<dimen;  i++)
+        sum += vec[i]*vec[i];
+    return Math.sqrt( sum );
+};
 
-    this.vecNormalize = function(dimen, vec, len)
-	{
-        var rtnVec;
-		if (!len)  len = 1.0;
+NinjaCvsRt.RuntimeGeomObj.prototype.vecScale = function(dimen, vec, scale)
+{
+    for (var i=0;  i<dimen;  i++)
+        vec[i] *= scale;
 
-        var sum = 0.0, i = 0;
-        for (i = 0;  i<dimen;  i++)
-            sum += vec[i]*vec[i];
-        sum = Math.sqrt( sum );
+    return vec;
+};
 
-        if (Math.abs(sum) >= 0.001)
-        {
-            var scale = len/sum;
-            rtnVec = [];
-            for (i = 0;  i<dimen;  i++)
-                rtnVec[i] = vec[i]*scale;
-        }
+NinjaCvsRt.RuntimeGeomObj.prototype.vecNormalize = function(dimen, vec, len)
+{
+    var rtnVec;
+    if (!len)  len = 1.0;
 
-        return rtnVec;
-    };
+    var sum = 0.0, i = 0;
+    for (i = 0;  i<dimen;  i++)
+        sum += vec[i]*vec[i];
+    sum = Math.sqrt( sum );
 
-	this.transformPoint = function( srcPt, mat )
+    if (Math.abs(sum) >= 0.001)
     {
-        var pt = srcPt.slice(0);
-        var	x = this.vecDot(3,  pt, [mat[0], mat[4], mat[ 8]] ) + mat[12],
-            y = this.vecDot(3,  pt, [mat[1], mat[5], mat[ 9]] ) + mat[13],
-            z = this.vecDot(3,  pt, [mat[2], mat[6], mat[10]] ) + mat[14];
+        var scale = len/sum;
+        rtnVec = [];
+        for (i = 0;  i<dimen;  i++)
+            rtnVec[i] = vec[i]*scale;
+    }
 
-        return [x, y, z];
-    };
-	
-	this.MatrixIdentity = function(dimen)
-	{
-		var mat = [];
+    return rtnVec;
+};
 
-		for (var i = 0; i<dimen*dimen; i++)  {
-			mat.push(0);
-		}
+NinjaCvsRt.RuntimeGeomObj.prototype.transformPoint = function( srcPt, mat )
+{
+    var pt = srcPt.slice(0);
+    var	x = this.vecDot(3,  pt, [mat[0], mat[4], mat[ 8]] ) + mat[12],
+        y = this.vecDot(3,  pt, [mat[1], mat[5], mat[ 9]] ) + mat[13],
+        z = this.vecDot(3,  pt, [mat[2], mat[6], mat[10]] ) + mat[14];
 
-		var index = 0;
-		for (var j = 0; j<dimen; j++) {
-			mat[index] = 1.0;
-			index += dimen + 1;
-		}
+    return [x, y, z];
+};
 	
-		return mat;	
-	};
+NinjaCvsRt.RuntimeGeomObj.prototype.MatrixIdentity = function(dimen)
+{
+    var mat = [];
 
-	this.MatrixRotationZ = function( angle )
-	{
-		var mat = this.MatrixIdentity(4);
-		//glmat4.rotateZ(mat, angle);
-		var sn = Math.sin(angle),
-			cs = Math.cos(angle);
-		mat[0] = cs;	mat[4] = -sn;
-		mat[1] = sn;	mat[5] =  cs;
-
-		return mat;
-	};
+    for (var i = 0; i<dimen*dimen; i++)  {
+        mat.push(0);
+    }
+
+    var index = 0;
+    for (var j = 0; j<dimen; j++) {
+        mat[index] = 1.0;
+        index += dimen + 1;
+    }
+
+    return mat;
+};
+
+NinjaCvsRt.RuntimeGeomObj.prototype.MatrixRotationZ = function( angle )
+{
+    var mat = this.MatrixIdentity(4);
+    //glmat4.rotateZ(mat, angle);
+    var sn = Math.sin(angle),
+        cs = Math.cos(angle);
+    mat[0] = cs;	mat[4] = -sn;
+    mat[1] = sn;	mat[5] =  cs;
+
+    return mat;
 };
 
 ///////////////////////////////////////////////////////////////////////
@@ -686,212 +690,213 @@ NinjaCvsRt.RuntimeGeomObj = function ()
 ///////////////////////////////////////////////////////////////////////
 NinjaCvsRt.RuntimeRectangle = function ()
 {
+};
 	// inherit the members of NinjaCvsRt.RuntimeGeomObj
-	this.inheritedFrom = NinjaCvsRt.RuntimeGeomObj;
-	this.inheritedFrom();
-
-	this.importJSON = function( jObj )
-	{
-		this._xOffset			= jObj.xoff;
-		this._yOffset			= jObj.yoff;
-		this._width				= jObj.width;
-		this._height			= jObj.height;
-		this._strokeWidth		= jObj.strokeWidth;
-		this._strokeColor		= jObj.strokeColor;
-		this._fillColor			= jObj.fillColor;
-		this._tlRadius			= jObj.tlRadius;
-		this._trRadius			= jObj.trRadius;
-		this._blRadius			= jObj.blRadius;
-		this._brRadius			= jObj.brRadius;
-		this._innerRadius		= jObj.innerRadius;
-		this._strokeStyle		= jObj.strokeStyle;
-		var strokeMaterialName	= jObj.strokeMat;
-		var fillMaterialName	= jObj.fillMat;
-		this.importMaterials( jObj.materials );
-	};
+//	this.inheritedFrom = NinjaCvsRt.RuntimeGeomObj;
+//	this.inheritedFrom();
+NinjaCvsRt.RuntimeRectangle.prototype = Object.create(NinjaCvsRt.RuntimeGeomObj.prototype, {});
 
-	this.renderPath = function( inset, ctx )
-	{
-		// various declarations
-		var pt,  rad,  ctr,  startPt, bPts;
-		var width  = Math.round(this._width),
-			height = Math.round(this._height),
-            hw = 0.5*width,
-            hh = 0.5*height;
-
-        pt = [inset, inset];	// top left corner
-
-        var tlRad = this._tlRadius; //top-left radius
-        var trRad = this._trRadius;
-        var blRad = this._blRadius;
-        var brRad = this._brRadius;
-        // limit the radii to half the rectangle dimension
-        var minDimen = hw < hh ? hw : hh;
-        if (tlRad > minDimen)  tlRad = minDimen;
-        if (blRad > minDimen)  blRad = minDimen;
-        if (brRad > minDimen)  brRad = minDimen;
-        if (trRad > minDimen)  trRad = minDimen;
-
-		var world = this.getWorld();
-		var vpw = world.getViewportWidth(), vph = world.getViewportHeight();
-		var cop = [0.5*vpw, 0.5*vph, 0.0];
-		var xCtr = cop[0] + this._xOffset,					yCtr = cop[1] - this._yOffset;
-		var xLeft = xCtr - 0.5*this._width,					yTop = yCtr - 0.5*this._height;
-		var xDist = cop[0] - xLeft,							yDist = cop[1] - yTop;
-		var xOff = 0.5*vpw - xDist,							yOff  = 0.5*vph - yDist;
-
-		if ((tlRad <= 0) && (blRad <= 0) && (brRad <= 0) && (trRad <= 0))
-		{
-			ctx.rect(pt[0]+xOff, pt[1]+yOff, width - 2*inset, height - 2*inset);
-		}
-		else
-		{
-			// get the top left point
-			rad = tlRad - inset;
-			if (rad < 0)  rad = 0;
-			pt[1] += rad;
-			if (Math.abs(rad) < 0.001)  pt[1] = inset;
-			ctx.moveTo( pt[0]+xOff,  pt[1]+yOff );
-
-			// get the bottom left point
-			pt = [inset, height - inset];
-			rad = blRad - inset;
-			if (rad < 0)  rad = 0;
-			pt[1] -= rad;
-			ctx.lineTo( pt[0]+xOff,  pt[1]+yOff );
-
-			// get the bottom left curve
-			if (rad > 0.001)
-				ctx.quadraticCurveTo( inset+xOff, height-inset+yOff,  inset+rad+xOff, height-inset+yOff );
-
-			// do the bottom of the rectangle
-			pt = [width - inset,  height - inset];
-			rad = brRad - inset;
-			if (rad < 0)  rad = 0;
-			pt[0] -= rad;
-			ctx.lineTo( pt[0]+xOff, pt[1]+yOff );
-
-			// get the bottom right arc
-			if (rad > 0.001)
-				ctx.quadraticCurveTo( width-inset+xOff, height-inset+yOff,  width-inset+xOff, height-inset-rad+yOff );
-
-			// get the right of the rectangle
-			pt = [width - inset,  inset];
-			rad = trRad - inset;
-			if (rad < 0)  rad = 0;
-			pt[1] += rad;
-			ctx.lineTo( pt[0]+xOff, pt[1]+yOff );
-
-			// do the top right corner
-			if (rad > 0.001)
-				ctx.quadraticCurveTo( width-inset+xOff, inset+yOff,  width-inset-rad+xOff, inset+yOff );
-
-			// do the top of the rectangle
-			pt = [inset, inset];
-			rad = tlRad - inset;
-			if (rad < 0)  rad = 0;
-			pt[0] += rad;
-			ctx.lineTo( pt[0]+xOff, pt[1]+yOff);
-
-			// do the top left corner
-			if (rad > 0.001)
-				ctx.quadraticCurveTo( inset+xOff, inset+yOff, inset+xOff, inset+rad+yOff );
-			else
-				ctx.lineTo( inset+xOff, 2*inset+yOff );
-		}
-	};
+NinjaCvsRt.RuntimeRectangle.prototype.importJSON = function( jObj )
+{
+    this._xOffset			= jObj.xoff;
+    this._yOffset			= jObj.yoff;
+    this._width				= jObj.width;
+    this._height			= jObj.height;
+    this._strokeWidth		= jObj.strokeWidth;
+    this._strokeColor		= jObj.strokeColor;
+    this._fillColor			= jObj.fillColor;
+    this._tlRadius			= jObj.tlRadius;
+    this._trRadius			= jObj.trRadius;
+    this._blRadius			= jObj.blRadius;
+    this._brRadius			= jObj.brRadius;
+    this._innerRadius		= jObj.innerRadius;
+    this._strokeStyle		= jObj.strokeStyle;
+    var strokeMaterialName	= jObj.strokeMat;
+    var fillMaterialName	= jObj.fillMat;
+    this.importMaterials( jObj.materials );
+};
 
-    this.render = function()
+NinjaCvsRt.RuntimeRectangle.prototype.renderPath = function( inset, ctx )
+{
+    // various declarations
+    var pt,  rad,  ctr,  startPt, bPts;
+    var width  = Math.round(this._width),
+        height = Math.round(this._height),
+        hw = 0.5*width,
+        hh = 0.5*height;
+
+    pt = [inset, inset];	// top left corner
+
+    var tlRad = this._tlRadius; //top-left radius
+    var trRad = this._trRadius;
+    var blRad = this._blRadius;
+    var brRad = this._brRadius;
+    // limit the radii to half the rectangle dimension
+    var minDimen = hw < hh ? hw : hh;
+    if (tlRad > minDimen)  tlRad = minDimen;
+    if (blRad > minDimen)  blRad = minDimen;
+    if (brRad > minDimen)  brRad = minDimen;
+    if (trRad > minDimen)  trRad = minDimen;
+
+    var world = this.getWorld();
+    var vpw = world.getViewportWidth(), vph = world.getViewportHeight();
+    var cop = [0.5*vpw, 0.5*vph, 0.0];
+    var xCtr = cop[0] + this._xOffset,					yCtr = cop[1] - this._yOffset;
+    var xLeft = xCtr - 0.5*this._width,					yTop = yCtr - 0.5*this._height;
+    var xDist = cop[0] - xLeft,							yDist = cop[1] - yTop;
+    var xOff = 0.5*vpw - xDist,							yOff  = 0.5*vph - yDist;
+
+    if ((tlRad <= 0) && (blRad <= 0) && (brRad <= 0) && (trRad <= 0))
     {
-        // get the world
-        var world = this.getWorld();
-        if (!world)  throw( "null world in rectangle render" );
-
-         // get the context
-		var ctx = world.get2DContext();
-		if (!ctx)  return;
-
-		// get some dimensions
-		var lw = this._strokeWidth;
-		var	w = world.getViewportWidth(),
-			h = world.getViewportHeight();
-
-        var c,
-            inset,
-            gradient,
-            colors,
-            len,
-            n,
-            position,
-            cs;
-        // render the fill
-        ctx.beginPath();
-        if (this._fillColor) {
-            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);
-                }
-                colors = this._fillColor.color;
-
-                len = colors.length;
-
-                for(n=0; n<len; n++) {
-                    position = colors[n].position/100;
-                    cs = colors[n].value;
-                    gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")");
-                }
-
-                ctx.fillStyle = gradient;
+        ctx.rect(pt[0]+xOff, pt[1]+yOff, width - 2*inset, height - 2*inset);
+    }
+    else
+    {
+        // get the top left point
+        rad = tlRad - inset;
+        if (rad < 0)  rad = 0;
+        pt[1] += rad;
+        if (Math.abs(rad) < 0.001)  pt[1] = inset;
+        ctx.moveTo( pt[0]+xOff,  pt[1]+yOff );
+
+        // get the bottom left point
+        pt = [inset, height - inset];
+        rad = blRad - inset;
+        if (rad < 0)  rad = 0;
+        pt[1] -= rad;
+        ctx.lineTo( pt[0]+xOff,  pt[1]+yOff );
+
+        // get the bottom left curve
+        if (rad > 0.001)
+            ctx.quadraticCurveTo( inset+xOff, height-inset+yOff,  inset+rad+xOff, height-inset+yOff );
+
+        // do the bottom of the rectangle
+        pt = [width - inset,  height - inset];
+        rad = brRad - inset;
+        if (rad < 0)  rad = 0;
+        pt[0] -= rad;
+        ctx.lineTo( pt[0]+xOff, pt[1]+yOff );
+
+        // get the bottom right arc
+        if (rad > 0.001)
+            ctx.quadraticCurveTo( width-inset+xOff, height-inset+yOff,  width-inset+xOff, height-inset-rad+yOff );
+
+        // get the right of the rectangle
+        pt = [width - inset,  inset];
+        rad = trRad - inset;
+        if (rad < 0)  rad = 0;
+        pt[1] += rad;
+        ctx.lineTo( pt[0]+xOff, pt[1]+yOff );
+
+        // do the top right corner
+        if (rad > 0.001)
+            ctx.quadraticCurveTo( width-inset+xOff, inset+yOff,  width-inset-rad+xOff, inset+yOff );
+
+        // do the top of the rectangle
+        pt = [inset, inset];
+        rad = tlRad - inset;
+        if (rad < 0)  rad = 0;
+        pt[0] += rad;
+        ctx.lineTo( pt[0]+xOff, pt[1]+yOff);
+
+        // do the top left corner
+        if (rad > 0.001)
+            ctx.quadraticCurveTo( inset+xOff, inset+yOff, inset+xOff, inset+rad+yOff );
+        else
+            ctx.lineTo( inset+xOff, 2*inset+yOff );
+    }
+};
 
+NinjaCvsRt.RuntimeRectangle.prototype.render = function()
+{
+    // get the world
+    var world = this.getWorld();
+    if (!world)  throw( "null world in rectangle render" );
+
+     // get the context
+    var ctx = world.get2DContext();
+    if (!ctx)  return;
+
+    // get some dimensions
+    var lw = this._strokeWidth;
+    var	w = world.getViewportWidth(),
+        h = world.getViewportHeight();
+
+    var c,
+        inset,
+        gradient,
+        colors,
+        len,
+        n,
+        position,
+        cs;
+    // render the fill
+    ctx.beginPath();
+    if (this._fillColor) {
+        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 {
-                c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")";
-                ctx.fillStyle = c;
+                gradient = ctx.createLinearGradient(inset/2, h/2, w-inset, h/2);
             }
+            colors = this._fillColor.color;
 
-            ctx.lineWidth	= lw;
-            this.renderPath( inset, ctx );
-            ctx.fill();
-            ctx.closePath();
-        }
+            len = colors.length;
 
-        // render the stroke
-        ctx.beginPath();
-        if (this._strokeColor) {
-            inset = Math.ceil( 0.5*lw ) - 0.5;
+            for(n=0; n<len; n++) {
+                position = colors[n].position/100;
+                cs = colors[n].value;
+                gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")");
+            }
 
-            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);
-                }
-                colors = this._strokeColor.color;
+            ctx.fillStyle = gradient;
 
-                len = colors.length;
+        } else {
+            c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")";
+            ctx.fillStyle = c;
+        }
 
-                for(n=0; n<len; n++) {
-                    position = colors[n].position/100;
-                    cs = colors[n].value;
-                    gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")");
-                }
+        ctx.lineWidth	= lw;
+        this.renderPath( inset, ctx );
+        ctx.fill();
+        ctx.closePath();
+    }
 
-                ctx.strokeStyle = gradient;
+    // render the stroke
+    ctx.beginPath();
+    if (this._strokeColor) {
+        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 {
-                c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")";
-                ctx.strokeStyle = c;
+                gradient = ctx.createLinearGradient(0, h/2, w, h/2);
             }
+            colors = this._strokeColor.color;
 
-            ctx.lineWidth	= lw;
-            this.renderPath( inset, ctx );
-            ctx.stroke();
-            ctx.closePath();
+            len = colors.length;
+
+            for(n=0; n<len; n++) {
+                position = colors[n].position/100;
+                cs = colors[n].value;
+                gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")");
+            }
+
+            ctx.strokeStyle = gradient;
+
+        } else {
+            c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")";
+            ctx.strokeStyle = c;
         }
-    };
+
+        ctx.lineWidth	= lw;
+        this.renderPath( inset, ctx );
+        ctx.stroke();
+        ctx.closePath();
+    }
 };
 
 ///////////////////////////////////////////////////////////////////////
@@ -899,96 +904,98 @@ NinjaCvsRt.RuntimeRectangle = function ()
 ///////////////////////////////////////////////////////////////////////
 NinjaCvsRt.RuntimeLine = function ()
 {
-	this.inheritedFrom = NinjaCvsRt.RuntimeGeomObj;
-	this.inheritedFrom();
+};
+// inherit the members of NinjaCvsRt.RuntimeGeomObj
+//	this.inheritedFrom = NinjaCvsRt.RuntimeGeomObj;
+//	this.inheritedFrom();
+NinjaCvsRt.RuntimeLine.prototype = Object.create(NinjaCvsRt.RuntimeGeomObj.prototype, {});
 
-	this.importJSON = function( jObj )
-	{
-		this._xOffset			= jObj.xoff;
-		this._yOffset			= jObj.yoff;
-		this._width				= jObj.width;
-		this._height			= jObj.height;
-		this._xAdj			    = jObj.xAdj;
-		this._yAdj			    = jObj.yAdj;
-		this._strokeWidth		= jObj.strokeWidth;
-		this._slope 		    = jObj.slope;
-		this._strokeStyle		= jObj.strokeStyle;
-		this._strokeColor		= jObj.strokeColor;
-		var strokeMaterialName	= jObj.strokeMat;
-        this.importMaterials( jObj.materials );
-    };
+NinjaCvsRt.RuntimeLine.prototype.importJSON = function( jObj )
+{
+    this._xOffset			= jObj.xoff;
+    this._yOffset			= jObj.yoff;
+    this._width				= jObj.width;
+    this._height			= jObj.height;
+    this._xAdj			    = jObj.xAdj;
+    this._yAdj			    = jObj.yAdj;
+    this._strokeWidth		= jObj.strokeWidth;
+    this._slope 		    = jObj.slope;
+    this._strokeStyle		= jObj.strokeStyle;
+    this._strokeColor		= jObj.strokeColor;
+    var strokeMaterialName	= jObj.strokeMat;
+    this.importMaterials( jObj.materials );
+};
 
-	this.render = function()
-	{
-		// get the world
-		var world = this.getWorld();
-		if (!world)  throw( "null world in buildBuffers" );
-
-		 // get the context
-		var ctx = world.get2DContext();
-		if (!ctx)  return;
- 	
-		// set up the stroke style
-		var lineWidth = this._strokeWidth,
-            w = this._width,
-            h = this._height;
-
-        var c,
-            gradient,
-            colors,
-            len,
-            n,
-            position,
-            cs;
+NinjaCvsRt.RuntimeLine.prototype.render = function()
+{
+    // get the world
+    var world = this.getWorld();
+    if (!world)  throw( "null world in buildBuffers" );
+
+     // get the context
+    var ctx = world.get2DContext();
+    if (!ctx)  return;
+
+    // set up the stroke style
+    var lineWidth = this._strokeWidth,
+        w = this._width,
+        h = this._height;
+
+    var c,
+        gradient,
+        colors,
+        len,
+        n,
+        position,
+        cs;
+
+    ctx.beginPath();
+    ctx.lineWidth	= lineWidth;
+    if (this._strokeColor) {
+        if(this._strokeColor.gradientMode) {
+            if(this._strokeColor.gradientMode === "radial") {
+                gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(w/2, h/2));
+            } else {
+                gradient = ctx.createLinearGradient(0, h/2, w, h/2);
+            }
+            colors = this._strokeColor.color;
 
-		ctx.beginPath();
-		ctx.lineWidth	= lineWidth;
-		if (this._strokeColor) {
-            if(this._strokeColor.gradientMode) {
-                if(this._strokeColor.gradientMode === "radial") {
-                    gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(w/2, h/2));
-                } else {
-                    gradient = ctx.createLinearGradient(0, h/2, w, h/2);
-                }
-                colors = this._strokeColor.color;
+            len = colors.length;
 
-                len = colors.length;
+            for(n=0; n<len; n++) {
+                position = colors[n].position/100;
+                cs = colors[n].value;
+                gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")");
+            }
 
-                for(n=0; n<len; n++) {
-                    position = colors[n].position/100;
-                    cs = colors[n].value;
-                    gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")");
-                }
+            ctx.strokeStyle = gradient;
 
-                ctx.strokeStyle = gradient;
+        } else {
+            c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")";
+            ctx.strokeStyle = c;
+        }
 
-            } else {
-                c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")";
-                ctx.strokeStyle = c;
-            }
+        // get the points
+        var p0,  p1;
+        if(this._slope === "vertical") {
+            p0 = [0.5*w, 0];
+            p1 = [0.5*w, h];
+        } else if(this._slope === "horizontal") {
+            p0 = [0, 0.5*h];
+            p1 = [w, 0.5*h];
+        } else if(this._slope > 0) {
+            p0 = [this._xAdj, this._yAdj];
+            p1 = [w - this._xAdj,  h - this._yAdj];
+        } else {
+            p0 = [this._xAdj, h - this._yAdj];
+            p1 = [w - this._xAdj,  this._yAdj];
+        }
 
-			// get the points
-			var p0,  p1;
-			if(this._slope === "vertical") {
-				p0 = [0.5*w, 0];
-				p1 = [0.5*w, h];
-			} else if(this._slope === "horizontal") {
-				p0 = [0, 0.5*h];
-				p1 = [w, 0.5*h];
-			} else if(this._slope > 0) {
-				p0 = [this._xAdj, this._yAdj];
-				p1 = [w - this._xAdj,  h - this._yAdj];
-			} else {
-				p0 = [this._xAdj, h - this._yAdj];
-				p1 = [w - this._xAdj,  this._yAdj];
-			}
-			
-			// draw the line
-			ctx.moveTo( p0[0],  p0[1] );
-			ctx.lineTo( p1[0],  p1[1] );
-			ctx.stroke();
-		}
-    };
+        // draw the line
+        ctx.moveTo( p0[0],  p0[1] );
+        ctx.lineTo( p1[0],  p1[1] );
+        ctx.stroke();
+    }
 };
 
 ///////////////////////////////////////////////////////////////////////
@@ -996,180 +1003,205 @@ NinjaCvsRt.RuntimeLine = function ()
 ///////////////////////////////////////////////////////////////////////
 NinjaCvsRt.RuntimeOval = function ()
 {
+};
 	// inherit the members of NinjaCvsRt.RuntimeGeomObj
-	this.inheritedFrom = NinjaCvsRt.RuntimeGeomObj;
-	this.inheritedFrom();
+//	this.inheritedFrom = NinjaCvsRt.RuntimeGeomObj;
+//	this.inheritedFrom();
+NinjaCvsRt.RuntimeOval.prototype = Object.create(NinjaCvsRt.RuntimeGeomObj.prototype, {});
 
-	this.importJSON = function( jObj )
-	{
-		this._xOffset			= jObj.xoff;
-		this._yOffset			= jObj.yoff;
-		this._width				= jObj.width;
-		this._height			= jObj.height;
-		this._strokeWidth		= jObj.strokeWidth;
-		this._strokeColor		= jObj.strokeColor;
-		this._fillColor			= jObj.fillColor;
-		this._innerRadius		= jObj.innerRadius;
-		this._strokeStyle		= jObj.strokeStyle;
-		var strokeMaterialName	= jObj.strokeMat;
-		var fillMaterialName	= jObj.fillMat;
-		this.importMaterials( jObj.materials );
-	};
-
-	this.render = function()
-	{
-		// get the world
-		var world = this.getWorld();
-		if (!world)  throw( "null world in buildBuffers" );
-
-		 // get the context
-		var ctx = world.get2DContext();
-		if (!ctx)  return;
-
-		// declare some variables
-		var p0, p1;
-		var x0, y0, x1, y1;
-
-		// create the matrix
-		var lineWidth = this._strokeWidth;
-		var innerRad  = this._innerRadius;
-		var xScale = 0.5*this._width - lineWidth,
-			yScale = 0.5*this._height - lineWidth;
-
-		// translate
-		var xCtr = 0.5*world.getViewportWidth() + this._xOffset,
-			yCtr = 0.5*world.getViewportHeight() + this._yOffset;
-		var mat = this.MatrixIdentity( 4 );
-		mat[0] = xScale;					mat[12] = xCtr;
-						mat[5] = yScale;	mat[13] = yCtr;
-		/*
-		var mat = [
-							[ xScale,     0.0,  0.0,  xCtr],
-							[    0.0,  yScale,  0.0,  yCtr],
-							[    0.0,     0.0,  1.0,   0.0],
-							[    0.0,     0.0,  0.0,   1.0]
-						];
-		*/
-
-		// get a bezier representation of the circle
-		var bezPts = this.circularArcToBezier( [0,0,0],  [1,0,0], 2.0*Math.PI );
-		if (bezPts)
-		{
-			var n = bezPts.length;
-            var gradient,
-                colors,
-                len,
-                j,
-                position,
-                cs,
-                c;
-
-            // set up the fill style
-            ctx.beginPath();
-            ctx.lineWidth = 0;
-            if (this._fillColor) {
-                if(this._fillColor.gradientMode) {
-                    if(this._fillColor.gradientMode === "radial") {
-                        gradient = ctx.createRadialGradient(xCtr, yCtr, 0,
-                                                            xCtr, yCtr, Math.max(this._width, this._height)/2);
-                    } else {
-                        gradient = ctx.createLinearGradient(lineWidth/2, this._height/2, this._width-lineWidth, this._height/2);
-                    }
-                    colors = this._fillColor.color;
+NinjaCvsRt.RuntimeOval.prototype.importJSON = function( jObj )
+{
+    this._xOffset			= jObj.xoff;
+    this._yOffset			= jObj.yoff;
+    this._width				= jObj.width;
+    this._height			= jObj.height;
+    this._strokeWidth		= jObj.strokeWidth;
+    this._strokeColor		= jObj.strokeColor;
+    this._fillColor			= jObj.fillColor;
+    this._innerRadius		= jObj.innerRadius;
+    this._strokeStyle		= jObj.strokeStyle;
+    var strokeMaterialName	= jObj.strokeMat;
+    var fillMaterialName	= jObj.fillMat;
+    this.importMaterials( jObj.materials );
+};
 
-                    len = colors.length;
+NinjaCvsRt.RuntimeOval.prototype.render = function()
+{
+    // get the world
+    var world = this.getWorld();
+    if (!world)  throw( "null world in buildBuffers" );
+
+     // get the context
+    var ctx = world.get2DContext();
+    if (!ctx)  return;
+
+    // declare some variables
+    var p0, p1;
+    var x0, y0, x1, y1;
+
+    // create the matrix
+    var lineWidth = this._strokeWidth;
+    var innerRad  = this._innerRadius;
+    var xScale = 0.5*this._width - lineWidth,
+        yScale = 0.5*this._height - lineWidth;
+
+    // translate
+    var xCtr = 0.5*world.getViewportWidth() + this._xOffset,
+        yCtr = 0.5*world.getViewportHeight() + this._yOffset;
+    var mat = this.MatrixIdentity( 4 );
+    mat[0] = xScale;					mat[12] = xCtr;
+                    mat[5] = yScale;	mat[13] = yCtr;
+    /*
+    var mat = [
+                        [ xScale,     0.0,  0.0,  xCtr],
+                        [    0.0,  yScale,  0.0,  yCtr],
+                        [    0.0,     0.0,  1.0,   0.0],
+                        [    0.0,     0.0,  0.0,   1.0]
+                    ];
+    */
+
+    // get a bezier representation of the circle
+    var bezPts = this.circularArcToBezier( [0,0,0],  [1,0,0], 2.0*Math.PI );
+    if (bezPts)
+    {
+        var n = bezPts.length;
+        var gradient,
+            colors,
+            len,
+            j,
+            position,
+            cs,
+            c;
 
-                    for(j=0; j<len; j++) {
-                        position = colors[j].position/100;
-                        cs = colors[j].value;
-                        gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")");
-                    }
+        // set up the fill style
+        ctx.beginPath();
+        ctx.lineWidth = 0;
+        if (this._fillColor) {
+            if(this._fillColor.gradientMode) {
+                if(this._fillColor.gradientMode === "radial") {
+                    gradient = ctx.createRadialGradient(xCtr, yCtr, 0,
+                                                        xCtr, yCtr, Math.max(this._width, this._height)/2);
+                } else {
+                    gradient = ctx.createLinearGradient(lineWidth/2, this._height/2, this._width-lineWidth, this._height/2);
+                }
+                colors = this._fillColor.color;
 
-                    ctx.fillStyle = gradient;
+                len = colors.length;
 
-                } else {
-                    c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")";
-                    ctx.fillStyle = c;
+                for(j=0; j<len; j++) {
+                    position = colors[j].position/100;
+                    cs = colors[j].value;
+                    gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")");
                 }
-                // draw the fill
+
+                ctx.fillStyle = gradient;
+
+            } else {
+                c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")";
+                ctx.fillStyle = c;
+            }
+            // draw the fill
 //				ctx.beginPath();
-                var p = this.transformPoint( bezPts[0],   mat );
-                ctx.moveTo( p[0],  p[1] );
-                var index = 1;
-                while (index < n) {
-                    p0   = this.transformPoint( bezPts[index],  mat );
-                    p1 = this.transformPoint( bezPts[index+1],  mat );
+            var p = this.transformPoint( bezPts[0],   mat );
+            ctx.moveTo( p[0],  p[1] );
+            var index = 1;
+            while (index < n) {
+                p0   = this.transformPoint( bezPts[index],  mat );
+                p1 = this.transformPoint( bezPts[index+1],  mat );
+
+                x0 = p0[0];  y0 = p0[1];
+                x1 = p1[0];  y1 = p1[1];
+                ctx.quadraticCurveTo( x0,  y0,  x1, y1 );
+                index += 2;
+            }
 
-                    x0 = p0[0];  y0 = p0[1];
-                    x1 = p1[0];  y1 = p1[1];
-                    ctx.quadraticCurveTo( x0,  y0,  x1, y1 );
-                    index += 2;
-                }
+            if (innerRad > 0.001) {
+                xScale = 0.5*innerRad*this._width;
+                yScale = 0.5*innerRad*this._height;
+                mat[0] = xScale;
+                mat[5] = yScale;
+
+                // get the bezier points
+                var bezPtsInside = this.circularArcToBezier( [0,0,0], [1,0,0], -2.0*Math.PI );
+                if (bezPtsInside) {
+                    n = bezPtsInside.length;
+                    p = this.transformPoint( bezPtsInside[0],   mat );
+                    ctx.moveTo( p[0],  p[1] );
+                    index = 1;
+                    while (index < n) {
+                        p0 = this.transformPoint( bezPtsInside[index],    mat );
+                        p1 = this.transformPoint( bezPtsInside[index+1],  mat );
 
-                if (innerRad > 0.001) {
-                    xScale = 0.5*innerRad*this._width;
-                    yScale = 0.5*innerRad*this._height;
-                    mat[0] = xScale;
-                    mat[5] = yScale;
-
-                    // get the bezier points
-                    var bezPtsInside = this.circularArcToBezier( [0,0,0], [1,0,0], -2.0*Math.PI );
-                    if (bezPtsInside) {
-                        n = bezPtsInside.length;
-                        p = this.transformPoint( bezPtsInside[0],   mat );
-                        ctx.moveTo( p[0],  p[1] );
-                        index = 1;
-                        while (index < n) {
-                            p0 = this.transformPoint( bezPtsInside[index],    mat );
-                            p1 = this.transformPoint( bezPtsInside[index+1],  mat );
-
-                            x0 = p0[0];
-                            y0 = p0[1];
-                            x1 = p1[0];
-                            y1 = p1[1];
-                            ctx.quadraticCurveTo( x0,  y0,  x1, y1 );
-                            index += 2;
-                        }
+                        x0 = p0[0];
+                        y0 = p0[1];
+                        x1 = p1[0];
+                        y1 = p1[1];
+                        ctx.quadraticCurveTo( x0,  y0,  x1, y1 );
+                        index += 2;
                     }
                 }
-
-                // fill the path
-                ctx.fill();
             }
 
-            // calculate the stroke matrix
-            xScale = 0.5*this._width  - 0.5*lineWidth;
-            yScale = 0.5*this._height - 0.5*lineWidth;
-            mat[0] = xScale;
-            mat[5] = yScale;
-
-            // set up the stroke style
-            ctx.beginPath();
-            ctx.lineWidth	= lineWidth;
-            if (this._strokeColor) {
-                if(this._strokeColor.gradientMode) {
-                    if(this._strokeColor.gradientMode === "radial") {
-                        gradient = ctx.createRadialGradient(xCtr, yCtr, Math.min(xScale, yScale),
-                                                            xCtr, yCtr, 0.5*Math.max(this._height, this._width));
-                    } else {
-                        gradient = ctx.createLinearGradient(0, this._height/2, this._width, this._height/2);
-                    }
-                    colors = this._strokeColor.color;
+            // fill the path
+            ctx.fill();
+        }
 
-                    len = colors.length;
+        // calculate the stroke matrix
+        xScale = 0.5*this._width  - 0.5*lineWidth;
+        yScale = 0.5*this._height - 0.5*lineWidth;
+        mat[0] = xScale;
+        mat[5] = yScale;
 
-                    for(j=0; j<len; j++) {
-                        position = colors[j].position/100;
-                        cs = colors[j].value;
-                        gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")");
-                    }
+        // set up the stroke style
+        ctx.beginPath();
+        ctx.lineWidth	= lineWidth;
+        if (this._strokeColor) {
+            if(this._strokeColor.gradientMode) {
+                if(this._strokeColor.gradientMode === "radial") {
+                    gradient = ctx.createRadialGradient(xCtr, yCtr, Math.min(xScale, yScale),
+                                                        xCtr, yCtr, 0.5*Math.max(this._height, this._width));
+                } else {
+                    gradient = ctx.createLinearGradient(0, this._height/2, this._width, this._height/2);
+                }
+                colors = this._strokeColor.color;
 
-                    ctx.strokeStyle = gradient;
+                len = colors.length;
 
-                } else {
-                    c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")";
-                    ctx.strokeStyle = c;
+                for(j=0; j<len; j++) {
+                    position = colors[j].position/100;
+                    cs = colors[j].value;
+                    gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")");
                 }
+
+                ctx.strokeStyle = gradient;
+
+            } else {
+                c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")";
+                ctx.strokeStyle = c;
+            }
+            // draw the stroke
+            p = this.transformPoint( bezPts[0],   mat );
+            ctx.moveTo( p[0],  p[1] );
+            index = 1;
+            while (index < n) {
+                p0   = this.transformPoint( bezPts[index],  mat );
+                p1 = this.transformPoint( bezPts[index+1],  mat );
+
+                x0 = p0[0];
+                y0 = p0[1];
+                x1 = p1[0];
+                y1 = p1[1];
+                ctx.quadraticCurveTo( x0,  y0,  x1, y1 );
+                index += 2;
+            }
+
+            if (innerRad > 0.001) {
+                // calculate the stroke matrix
+                xScale = 0.5*innerRad*this._width  - 0.5*lineWidth;
+                yScale = 0.5*innerRad*this._height - 0.5*lineWidth;
+                mat[0] = xScale;
+                mat[5] = yScale;
+
                 // draw the stroke
                 p = this.transformPoint( bezPts[0],   mat );
                 ctx.moveTo( p[0],  p[1] );
@@ -1185,90 +1217,66 @@ NinjaCvsRt.RuntimeOval = function ()
                     ctx.quadraticCurveTo( x0,  y0,  x1, y1 );
                     index += 2;
                 }
-
-                if (innerRad > 0.001) {
-                    // calculate the stroke matrix
-                    xScale = 0.5*innerRad*this._width  - 0.5*lineWidth;
-                    yScale = 0.5*innerRad*this._height - 0.5*lineWidth;
-                    mat[0] = xScale;
-                    mat[5] = yScale;
-
-                    // draw the stroke
-                    p = this.transformPoint( bezPts[0],   mat );
-                    ctx.moveTo( p[0],  p[1] );
-                    index = 1;
-                    while (index < n) {
-                        p0   = this.transformPoint( bezPts[index],  mat );
-                        p1 = this.transformPoint( bezPts[index+1],  mat );
-
-                        x0 = p0[0];
-                        y0 = p0[1];
-                        x1 = p1[0];
-                        y1 = p1[1];
-                        ctx.quadraticCurveTo( x0,  y0,  x1, y1 );
-                        index += 2;
-                    }
-                }
-
-                // render the stroke
-                ctx.stroke();
             }
-		}
-    };
 
-    ///////////////////////////////////////////////////////////////////////
-	// this function returns the quadratic Bezier approximation to the specified
-	// circular arc.  The input can be 2D or 3D, determined by the minimum dimension
-	// of the center and start point.
-	// includedAngle is in radians, can be positiveor negative
-	this.circularArcToBezier= function( ctr_, startPt_, includedAngle )
-	{
-        var dimen = 3;
-        var ctr = ctr_.slice();
-        var startPt = startPt_.slice();
+            // render the stroke
+            ctx.stroke();
+        }
+    }
+};
 
-        // make sure the start point is good
-        var pt = this.vecSubtract(dimen, startPt, ctr);
-        var rad = this.vecMag(dimen, pt);
+///////////////////////////////////////////////////////////////////////
+// this function returns the quadratic Bezier approximation to the specified
+// circular arc.  The input can be 2D or 3D, determined by the minimum dimension
+// of the center and start point.
+// includedAngle is in radians, can be positiveor negative
+NinjaCvsRt.RuntimeOval.prototype.circularArcToBezier= function( ctr_, startPt_, includedAngle )
+{
+    var dimen = 3;
+    var ctr = ctr_.slice();
+    var startPt = startPt_.slice();
 
-        if ((dimen != 3) || (rad <= 0) || (includedAngle === 0))
-        {
-            if (dimen != 3)  console.log( "circularArcToBezier works for 3 dimensional points only.  Was " + dimen );
-            return [ startPt.slice(0), startPt.slice(0), startPt.slice(0) ];
-        }
+    // make sure the start point is good
+    var pt = this.vecSubtract(dimen, startPt, ctr);
+    var rad = this.vecMag(dimen, pt);
 
-        // determine the number of segments.  45 degree span maximum.
-        var nSegs = Math.ceil( Math.abs(includedAngle)/(0.25*Math.PI) );
-        if (nSegs <= 0)  return [ startPt.slice(0), startPt.slice(0), startPt.slice(0) ];
-        var dAngle = includedAngle/nSegs;
+    if ((dimen != 3) || (rad <= 0) || (includedAngle === 0))
+    {
+        if (dimen != 3)  console.log( "circularArcToBezier works for 3 dimensional points only.  Was " + dimen );
+        return [ startPt.slice(0), startPt.slice(0), startPt.slice(0) ];
+    }
 
-        // determine the length of the center control point from the circle center
-        var cs = Math.cos( 0.5*Math.abs(dAngle) ),  sn = Math.sin( 0.5*Math.abs(dAngle) );
-        var  c = rad*sn;
-        var  h = c*sn/cs;
-        var  d = rad*cs + h;
+    // determine the number of segments.  45 degree span maximum.
+    var nSegs = Math.ceil( Math.abs(includedAngle)/(0.25*Math.PI) );
+    if (nSegs <= 0)  return [ startPt.slice(0), startPt.slice(0), startPt.slice(0) ];
+    var dAngle = includedAngle/nSegs;
 
-        var rtnPts = [ this.vecAdd(dimen, pt, ctr) ];
-        var rotMat = this.MatrixRotationZ( dAngle );
-        for ( var i=0;  i<nSegs;  i++)
-        {
-            // get the next end point
-            var pt2 = this.transformPoint( pt, rotMat );
+    // determine the length of the center control point from the circle center
+    var cs = Math.cos( 0.5*Math.abs(dAngle) ),  sn = Math.sin( 0.5*Math.abs(dAngle) );
+    var  c = rad*sn;
+    var  h = c*sn/cs;
+    var  d = rad*cs + h;
 
-            // get the next center control point
-            var midPt = this.vecAdd(3, pt, pt2);
-            this.vecScale(dimen, midPt, 0.5);
-            midPt = this.vecNormalize( dimen, midPt, d );
+    var rtnPts = [ this.vecAdd(dimen, pt, ctr) ];
+    var rotMat = this.MatrixRotationZ( dAngle );
+    for ( var i=0;  i<nSegs;  i++)
+    {
+        // get the next end point
+        var pt2 = this.transformPoint( pt, rotMat );
 
-            // save the next segment
-            rtnPts.push( this.vecAdd(dimen, midPt, ctr) );
-            rtnPts.push( this.vecAdd(dimen,   pt2, ctr) );
+        // get the next center control point
+        var midPt = this.vecAdd(3, pt, pt2);
+        this.vecScale(dimen, midPt, 0.5);
+        midPt = this.vecNormalize( dimen, midPt, d );
 
-            // advance for the next segment
-            pt = pt2;
-        }
-        return rtnPts;
-	};
+        // save the next segment
+        rtnPts.push( this.vecAdd(dimen, midPt, ctr) );
+        rtnPts.push( this.vecAdd(dimen,   pt2, ctr) );
+
+        // advance for the next segment
+        pt = pt2;
+    }
+    return rtnPts;
 };
 
 ///////////////////////////////////////////////////////////////////////
-- 
cgit v1.2.3


From 78b3363a1ef802e95a158b5a3584305f84def09c Mon Sep 17 00:00:00 2001
From: Nivesh Rajbhandari
Date: Thu, 10 May 2012 15:47:03 -0700
Subject: Updating canvas-runtime to use object literal notation.

Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>
---
 assets/canvas-runtime.js | 3088 +++++++++++++++++++++++-----------------------
 1 file changed, 1558 insertions(+), 1530 deletions(-)

(limited to 'assets/canvas-runtime.js')

diff --git a/assets/canvas-runtime.js b/assets/canvas-runtime.js
index 17f8cda8..eeafaab6 100644
--- a/assets/canvas-runtime.js
+++ b/assets/canvas-runtime.js
@@ -17,7 +17,7 @@ NinjaCvsRt.initWebGl = function (rootElement, directory) {
 		}
 	}
 	//Creating data manager
-	cvsDataMngr = new NinjaCvsRt.CanvasDataManager();
+	cvsDataMngr = Object.create(NinjaCvsRt.CanvasDataManager, {});
 	//Loading data to canvas(es)
 	cvsDataMngr.loadGLData(rootElement, ninjaWebGlData.data, directory);
 };
@@ -26,1111 +26,1202 @@ NinjaCvsRt.initWebGl = function (rootElement, directory) {
 // Class ShapeRuntime
 //      Manages runtime shape display
 ///////////////////////////////////////////////////////////////////////
-NinjaCvsRt.CanvasDataManager = function () 
-{
-	this.loadGLData = function(root,  valueArray,  assetPath )
-	{
-		if (assetPath)
-			this._assetPath = assetPath.slice();
-
-		var value = valueArray;
-		var nWorlds = value.length;
-		for (var i=0;  i<nWorlds;  i++)
-		{
-			var importStr = value[i];
-
-			// there should be some version information in
-			// the form of 'v0.0;'  Pull that off.  (the trailing ';' should
-			// be in the first 24 characters).
-			var index = importStr.indexOf( ';' );
-			if ((importStr[0] === 'v') && (index < 24))
-			{
-				// JSON format.  pull off the version info
-				importStr = importStr.substr( index+1 );
-
-				var jObj = JSON.parse( importStr );
-				var id = jObj.id;
-				if (id)
-				{
-					var canvas = this.findCanvasWithID( id, root );
-					if (canvas)
-					{
-						new NinjaCvsRt.GLRuntime( canvas, jObj,  assetPath );
-					}
-				}
-			}
-		}
-	};
-
-	this.findCanvasWithID = function( id,  elt )
-	{
-		var cid = elt.getAttribute( "data-RDGE-id" );
-		if (cid == id)  return elt;
-
-		if (elt.children)
-		{
-			var nKids = elt.children.length;
-			for (var i=0;  i<nKids;  i++)
-			{
-				var child = elt.children[i];
-				var foundElt = this.findCanvasWithID( id, child );
-				if (foundElt)  return foundElt;
-			}
-		}
-	};
-};
+NinjaCvsRt.CanvasDataManager = Object.create(Object.prototype, {
+
+    loadGLData: {
+        value: function(root, valueArray, assetPath) {
+            if (assetPath)
+                this._assetPath = assetPath.slice();
+
+            var value = valueArray;
+            var nWorlds = value.length;
+            for (var i=0;  i<nWorlds;  i++)
+            {
+                var importStr = value[i];
+
+                // there should be some version information in
+                // the form of 'v0.0;'  Pull that off.  (the trailing ';' should
+                // be in the first 24 characters).
+                var index = importStr.indexOf( ';' );
+                if ((importStr[0] === 'v') && (index < 24))
+                {
+                    // JSON format.  pull off the version info
+                    importStr = importStr.substr( index+1 );
+
+                    var jObj = JSON.parse( importStr );
+                    var id = jObj.id;
+                    if (id)
+                    {
+                        var canvas = this.findCanvasWithID( id, root );
+                        if (canvas)
+                        {
+//                            new NinjaCvsRt.GLRuntime( canvas, jObj,  assetPath );
+                            var glRt = Object.create(NinjaCvsRt.GLRuntime, {});
+                            glRt.renderWorld(canvas, jObj, this._assetPath);
+                        }
+                    }
+                }
+            }
+	    }
+    },
+
+    findCanvasWithID: {
+        value: function(id, elt) {
+            var cid = elt.getAttribute( "data-RDGE-id" );
+            if (cid == id)  return elt;
+
+            if (elt.children)
+            {
+                var nKids = elt.children.length;
+                for (var i=0;  i<nKids;  i++)
+                {
+                    var child = elt.children[i];
+                    var foundElt = this.findCanvasWithID( id, child );
+                    if (foundElt)  return foundElt;
+                }
+            }
+        }
+    }
+});
 
 ///////////////////////////////////////////////////////////////////////
 // Class GLRuntime
 //      Manages runtime fora WebGL canvas
 ///////////////////////////////////////////////////////////////////////
-NinjaCvsRt.GLRuntime = function ( canvas, jObj,  assetPath )
-{
+NinjaCvsRt.GLRuntime = Object.create(Object.prototype, {
     ///////////////////////////////////////////////////////////////////////
     // Instance variables
     ///////////////////////////////////////////////////////////////////////
-	this._canvas		= canvas;
-	this._context		= null;
+    _canvas: { value: null, writable: true },
+    _context : { value: null, writable: true },
 	//this._importStr		= importStr;
-	this._jObj			= jObj;
+    _jObj: { value: null, writable: true },
 
-	this.renderer		= null;
-	this.myScene		= null;
-	this.light			= null;
-	this.light2			= null;
-	this._rootNode		= null;
+    _renderer: { value: null, writable: true },
+    myScene: { value: null, writable: true },
+    light: { value: null, writable: true },
+    light2: { value: null, writable: true },
+    _rootNode: { value: null, writable: true },
 
-	this._firstRender	= true;
-	this._initialized	= false;
+    _firstRender: { value: true, writable: true },
+    _renderCount: { value: -1, writable: true },
+    _initialized: { value: false, writable: true },
 
-	this._useWebGL		= false;
-	this._assetPath     = undefined;
+    _useWebGL: { value: false, writable: true },
+    _assetPath: { value: undefined, writable: true },
 
-	// view parameters
-	this._fov = 45.0;
-	this._zNear = 0.1;
-	this._zFar = 100.0;
-	this._viewDist = 5.0;
+    // view parameters
+    _fov: { value: 45.0, writable: true },
+    _zNear: { value: 0.1, writable: true },
+    _zFar: { value: 100.0, writable: true },
+    _viewDist: { value: 5.0, writable: true },
 
-	this.elapsed = 0;
+    elapsed: { value: 0, writable: true },
 
-	this._aspect = canvas.width/canvas.height;
+    _aspect: { value: 1, writable: true },
 
 	//this._geomRoot = null;
-	this._rootChildren = [];
+    _rootChildren: { value: [], writable: true },
 
 	// all "live" materials
-	this._materials = [];
+    _materials: { value: [], writable: true },
+
+    renderWorld: {
+        value: function(canvas, jObj, assetPath) {
+            this._materials = [];
+            this._rootChildren = [];
+            this._canvas = canvas;
+            this._aspect = this._canvas.width/this._canvas.height;
+
+            this._jObj= jObj;
+
+            // provide the mapping for the asset directory
+            if (assetPath) {
+                this._assetPath = assetPath.slice();
+                if (this._assetPath[this._assetPath.length - 1] != '/')
+                    this._assetPath += '/';
+            }
 
-    // provide the mapping for the asset directory
-    if (assetPath) {
-        this._assetPath = assetPath.slice();
-        if (this._assetPath[this._assetPath.length - 1] != '/')
-            this._assetPath += '/';
-    }
+            if(this._assetPath !== undefined) {
+                RDGE.globals.engine.setAssetPath(this._assetPath);
+            }
 
-	if(this._assetPath !== undefined) {
-		RDGE.globals.engine.setAssetPath(this._assetPath);
-	}
+            // start RDGE or load Canvas 2D objects
+            if (jObj.scenedata)  this._useWebGL = true;
+            if (this._useWebGL)
+            {
+                var id = this._canvas.getAttribute( "data-RDGE-id" );
+                this._canvas.rdgeid = id;
+                RDGE.globals.engine.registerCanvas(this._canvas, this);
+                RDGE.RDGEStart( this._canvas );
+            }
+            else
+            {
+                this.loadScene();
+            }
+        }
+    },
 
     ///////////////////////////////////////////////////////////////////////
 	// accessors
     ///////////////////////////////////////////////////////////////////////
-	this.getZNear			= function()		{  return this._zNear;			};
-	this.getZFar			= function()		{  return this._zFar;			};
-	this.getFOV				= function()		{  return this._fov;			};
-	this.getAspect			= function()		{  return this._aspect;			};
-	this.getViewDistance	= function()		{  return this._viewDist;		};
+    getZNear: { value: function() { return this._zNear; }},
+    getZFar: { value: function() { return this._zFar; }},
+    getFOV: { value: function() { return this._fov; }},
+    getAspect: { value: function() { return this._aspect; }},
+    getViewDistance: { value: function() { return this._viewDist; }},
+
+    get2DContext: { value: function() { return this._context; }},
+
+    getViewportWidth: { value: function() { return this._canvas.width; }},
+    getViewportHeight: { value: function() { return this._canvas.height; }},
+
+    loadScene: {
+        value: function() {
+            var jObj = this._jObj;
+            if (!jObj.children)	// || (jObj.children.length != 1))
+                throw new Error( "ill-formed JSON for runtime load: " + jObj );
+            var nChildren = jObj.children.length;
+
+            // parse the data
+            var child;
+            if (jObj.scenedata)
+            {
+                this._useWebGL = true;
+
+                var rdgeStr = jObj.scenedata;
+                this.myScene.importJSON( rdgeStr );
+                for (var i=0;  i<nChildren;  i++)
+                {
+                    child = jObj.children[i];
+                    this.importObjects( child );
+                }
+                //this.linkMaterials( this._geomRoot );
+                this.linkMaterials( this._rootChildren );
+                this.initMaterials();
+                this.linkLights();
+            }
+            else
+            {
+                this._context = this._canvas.getContext( "2d" );
+                for (var i=0;  i<nChildren;  i++)
+                {
+                    child = jObj.children[i];
+                    this.importObjects( child );
+                }
+                this.render();
+            }
+        }
+    },
 
-	this.get2DContext		= function()		{  return this._context;		};
+    init: {
+        value: function() {
+            var ctx1 = RDGE.globals.engine.ctxMan.handleToObject(this._canvas.rdgeCtxHandle),
+                ctx2 = RDGE.globals.engine.getContext();
+            if (ctx1 != ctx2)  console.log( "***** different contexts *****" );
+            this.renderer = ctx1.renderer;
 
-	this.getViewportWidth	= function()		{  return this._canvas.width;	};
-	this.getViewportHeight	= function()		{  return this._canvas.height;	};
+            // create a camera, set its perspective, and then point it at the origin
+            var cam = new RDGE.camera();
+            this._camera = cam;
+            cam.setPerspective(this.getFOV(), this.getAspect(), this.getZNear(), this.getZFar());
+            cam.setLookAt([0, 0, this.getViewDistance()], [0, 0, 0], RDGE.vec3.up());
 
-    ///////////////////////////////////////////////////////////////////////
-	// accessors
-    ///////////////////////////////////////////////////////////////////////
-	this.loadScene = function()
-	{
-		var jObj = this._jObj;
-		if (!jObj.children)	// || (jObj.children.length != 1))
-			throw new Error( "ill-formed JSON for runtime load: " + jObj );
-		var nChildren = jObj.children.length;
-
-		// parse the data
-		var child;
-		if (jObj.scenedata)
-		{
-			this._useWebGL = true;
-
-			var rdgeStr = jObj.scenedata;
-			this.myScene.importJSON( rdgeStr );
-			for (var i=0;  i<nChildren;  i++)
-			{
-				child = jObj.children[i];
-				this.importObjects( child );
-			}
-			//this.linkMaterials( this._geomRoot );
-			this.linkMaterials( this._rootChildren );
-			this.initMaterials();
-			this.linkLights();
-		}
-		else
-		{
-			this._context = this._canvas.getContext( "2d" );
-			for (var i=0;  i<nChildren;  i++)
-			{
-				child = jObj.children[i];
-				this.importObjects( child );
-			}
-			this.render();
-		}
-	};
-
-	this.init = function()
-    { 
-		var ctx1 = RDGE.globals.engine.ctxMan.handleToObject(this._canvas.rdgeCtxHandle),
-			ctx2 = RDGE.globals.engine.getContext();
-		if (ctx1 != ctx2)  console.log( "***** different contexts *****" );
-		this.renderer = ctx1.renderer;
-      
-		// create a camera, set its perspective, and then point it at the origin
-		var cam = new RDGE.camera();
-		this._camera = cam;
-		cam.setPerspective(this.getFOV(), this.getAspect(), this.getZNear(), this.getZFar());
-		cam.setLookAt([0, 0, this.getViewDistance()], [0, 0, 0], RDGE.vec3.up());
-        
-		// make this camera the active camera
-		this.renderer.cameraManager().setActiveCamera(cam);
-
-		// change clear color
-		this.renderer.setClearColor([1.0, 1.0, 1.0, 0.0]);
-        
-		// create an empty scene graph
-		this.myScene = new RDGE.SceneGraph();
-
-		// load the scene graph data
-		this.loadScene();
-        
-		// Add the scene to the engine - necessary if you want the engine to draw for you
-		var name = "myScene" + this._canvas.getAttribute( "data-RDGE-id" ); 
-		RDGE.globals.engine.AddScene(name, this.myScene);
-
-		this._initialized = true;
-	};
-    
-	// main code for handling user interaction and updating t