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')

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 the scene   
-	this.update = function(dt)
-    {
-		if (this._initialized)
-		{
-			if (!dt)  dt = 0.2;
-        
-			dt = 0.01;	// use our own internal throttle
-			this.elapsed += dt;
-        
-			// changed the global position uniform of light 0, another way to change behavior of a light
-			RDGE.rdgeGlobalParameters.u_light0Pos.set( [5*Math.cos(this.elapsed), 5*Math.sin(this.elapsed), 20]);
-        
-			// orbit the light nodes around the boxes
-			if (this.light )  this.light.setPosition([1.2*Math.cos(this.elapsed*2.0), 1.2*Math.sin(this.elapsed*2.0), 1.2*Math.cos(this.elapsed*2.0)]);
-			if (this.light2)  this.light2.setPosition([-1.2*Math.cos(this.elapsed*2.0), 1.2*Math.sin(this.elapsed*2.0), -1.2*Math.cos(this.elapsed)]);
-
-			this.updateMaterials();
-
-			// now update all the nodes in the scene
-			this.myScene.update(dt);
-		}
-    };
-
-	this.updateMaterials = function()
-	{
-		var nMats = this._materials.length;
-		for (var i=0;  i<nMats;  i++)
-		{
-			var mat = this._materials[i];
-			mat.update();
-		}
-	};
-
-    // defining the draw function to control how the scene is rendered      
-	this.draw = function()
-    {
-		if (this._initialized)
-		{
-			RDGE.globals.engine.setContext( this._canvas.rdgeid );
-
-			var ctx = RDGE.globals.engine.getContext();
-			var renderer = ctx.renderer;
-			if (renderer.unloadedTextureCount <= 0)
-			{
-				renderer.disableCulling();
-				renderer._clear();
-				this.myScene.render();
-
-				if (this._firstRender)
-				{
-					if (this._canvas.task)
-					{
-						this._firstRender = false;
-						//this._canvas.task.stop();
-					}
-				}
-			}
-		}
-    };
-
-	this.importObjects = function( jObj,  parent )
-	{
-		// read the next object
-		var gObj = this.importObject( jObj, parent );
-
-		// load the children
-		if (jObj.children)
-		{
-			var nKids = jObj.children.length;
-			for (var i=0;  i<nKids;  i++)
-			{
-				var child = jObj.children[i];
-				this.importObjects( child, gObj );
-			}
-		}
-	};
-
-	this.importObject = function( jObj,  parent )
-	{
-		var type = jObj.type;
-		var obj;
-		switch (type)
-		{
-			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;
-
-			default:
-				throw new Error( "Attempting to load unrecognized object type: " + type );
-				break;
-		}
+            // make this camera the active camera
+            this.renderer.cameraManager().setActiveCamera(cam);
 
-		if (obj)
-			this.addObject( obj, parent );
+            // change clear color
+            this.renderer.setClearColor([1.0, 1.0, 1.0, 0.0]);
 
-		return obj;
-	};
+            // create an empty scene graph
+            this.myScene = new RDGE.SceneGraph();
 
-	this.addObject = function( obj, parent )
-	{
-		if (!obj)  return;
-		obj.setWorld( this );
+            // load the scene graph data
+            this.loadScene();
 
-		if (parent == null)
-		{
-			//this._geomRoot = obj;
-			this._rootChildren.push( obj );
-		}
-		else
-			parent.addChild( obj );
-	};
-
-	this.linkLights = function()
-	{
-		var matNode = this.findMaterialNode( "lights", this.myScene.scene );
-		if (matNode)
-		{
-			this.light = matNode.lightChannel[1];
-			this.light2 = matNode.lightChannel[2];
-		}
-	};
-
-	this.linkMaterials = function( objArray )
-	{
-		if (!objArray)  return;
-
-		for (var i=0;  i<objArray.length;  i++)
-		{
-			var obj = objArray[i];
-
-			// get the array of materials from the object
-			var matArray = obj._materials;
-			var nMats = matArray.length;
-			for (var j=0;  j<nMats;  j++)
-			{
-				var mat = matArray[j];
-				var nodeName = mat._materialNodeName;
-				var matNode = this.findMaterialNode( nodeName, this.myScene.scene );
-				if (matNode)
-				{
-					mat._materialNode = matNode;
-					mat._shader = matNode.shaderProgram;
-					this._materials.push( mat );
-				}
-			}
-
-			this.linkMaterials( obj.children );
-		}
-	};
-
-	this.initMaterials = function()
-	{
-		var nMats = this._materials.length;
-		for (var i=0;  i<nMats;  i++)
-		{
-			var mat = this._materials[i];
-			mat.init( this );
-		}
-	};
+            // 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.findMaterialNode = function( nodeName,  node )
-	{
-		if (node.transformNode)
-			node = node.transformNode;
+            this._initialized = true;
+        }
+    },
 
-		if (node.materialNode)
-		{
-			if (nodeName === node.materialNode.name)  return node.materialNode;
-		}
+	// main code for handling user interaction and updating the scene
+    update: {
+        value: function(dt) {
+            if (this._initialized)
+            {
+                if (!dt)  dt = 0.2;
 
-		if (node.children)
-		{
-			var nKids = node.children.length;
-			for (var i=0;  i<nKids;  i++)
-			{
-				var child = node.children[i];
-				var rtnNode = this.findMaterialNode( nodeName, child );
-				if (rtnNode)  return rtnNode;
-			}
-		}
-	};
-
-	this.render = function( obj )
-	{
-		//if (!obj)  obj = this._geomRoot;
-		//obj.render();
-
-		var children;
-		if (obj)
-		{
-			obj.render();
-			children = obj.children;
-		}
-		else
-			children = this._rootChildren;
-
-		if (children)
-		{
-			var nKids = children.length;
-			for (var i=0;  i<nKids;  i++)
-			{
-				var child = children[i];
-				if (child)
-					this.render( child );
-			}
-		}
-	};
-
-	// start RDGE or load Canvas 2D objects
-	if (jObj.scenedata)  this._useWebGL = true;
-	if (this._useWebGL)
-	{
-		var id = canvas.getAttribute( "data-RDGE-id" ); 
-		canvas.rdgeid = id;
-		RDGE.globals.engine.registerCanvas(canvas, this);
-		RDGE.RDGEStart( canvas );
-	}
-	else
-	{
-		this.loadScene();
-	}
-};
+                dt = 0.01;	// use our own internal throttle
+                this.elapsed += dt;
+
+                // changed the global position uniform of light 0, another way to change behavior of a light
+                RDGE.rdgeGlobalParameters.u_light0Pos.set( [5*Math.cos(this.elapsed), 5*Math.sin(this.elapsed), 20]);
+
+                // orbit the light nodes around the boxes
+                if (this.light )  this.light.setPosition([1.2*Math.cos(this.elapsed*2.0), 1.2*Math.sin(this.elapsed*2.0), 1.2*Math.cos(this.elapsed*2.0)]);
+                if (this.light2)  this.light2.setPosition([-1.2*Math.cos(this.elapsed*2.0), 1.2*Math.sin(this.elapsed*2.0), -1.2*Math.cos(this.elapsed)]);
+
+                this.updateMaterials();
+
+                // now update all the nodes in the scene
+                this.myScene.update(dt);
+            }
+        }
+    },
+
+    updateMaterials: {
+        value: function() {
+            var nMats = this._materials.length;
+            for (var i=0;  i<nMats;  i++)
+            {
+                var mat = this._materials[i];
+                mat.update();
+            }
+        }
+    },
+
+    // defining the draw function to control how the scene is rendered
+    draw: {
+        value: function() {
+            if (this._initialized)
+            {
+                RDGE.globals.engine.setContext( this._canvas.rdgeid );
+
+                var ctx = RDGE.globals.engine.getContext();
+                var renderer = ctx.renderer;
+                if (renderer.unloadedTextureCount <= 0)
+                {
+                    renderer.disableCulling();
+                    renderer._clear();
+                    this.myScene.render();
+
+                    if (this._firstRender)
+                    {
+                        if (this._canvas.task)
+                        {
+                            this._firstRender = false;
+                            //this._canvas.task.stop();
+                        }
+                    }
+                }
+            }
+        }
+    },
+
+    importObjects: {
+        value: function(jObj, parent) {
+            // read the next object
+            var gObj = this.importObject( jObj, parent );
+
+            // load the children
+            if (jObj.children)
+            {
+                var nKids = jObj.children.length;
+                for (var i=0;  i<nKids;  i++)
+                {
+                    var child = jObj.children[i];
+                    this.importObjects( child, gObj );
+                }
+            }
+        }
+    },
+
+    importObject: {
+        value: function(jObj, parent) {
+            var type = jObj.type;
+            var obj;
+            switch (type)
+            {
+                case 1:
+                    obj = Object.create(NinjaCvsRt.RuntimeRectangle, {_materials: { value:[], writable:true}});
+                    obj.importJSON( jObj );
+                    break;
+
+                case 2:		// circle
+                    obj = Object.create(NinjaCvsRt.RuntimeOval, {_materials: { value:[], writable:true}});
+                    obj.importJSON( jObj );
+                    break;
+
+                case 3:		// line
+                    obj = Object.create(NinjaCvsRt.RuntimeLine, {_materials: { value:[], writable:true}});
+                    obj.importJSON( jObj );
+                    break;
+
+                default:
+                    throw new Error( "Attempting to load unrecognized object type: " + type );
+                    break;
+            }
+
+            if (obj)
+                this.addObject( obj, parent );
+
+            return obj;
+        }
+    },
+
+    addObject: {
+        value: function(obj, parent) {
+            if (!obj)  return;
+            obj.setWorld( this );
+
+            if (parent == null)
+            {
+                //this._geomRoot = obj;
+                this._rootChildren.push( obj );
+            }
+            else
+                parent.addChild( obj );
+        }
+    },
+
+    linkLights: {
+        value: function() {
+            var matNode = this.findMaterialNode( "lights", this.myScene.scene );
+            if (matNode)
+            {
+                this.light = matNode.lightChannel[1];
+                this.light2 = matNode.lightChannel[2];
+            }
+        }
+    },
+
+    linkMaterials: {
+        value: function(objArray) {
+            if (!objArray)  return;
+
+            for (var i=0;  i<objArray.length;  i++)
+            {
+                var obj = objArray[i];
+
+                // get the array of materials from the object
+                var matArray = obj._materials;
+                var nMats = matArray.length;
+                for (var j=0;  j<nMats;  j++)
+                {
+                    var mat = matArray[j];
+                    var nodeName = mat._materialNodeName;
+                    var matNode = this.findMaterialNode( nodeName, this.myScene.scene );
+                    if (matNode)
+                    {
+                        mat._materialNode = matNode;
+                        mat._shader = matNode.shaderProgram;
+                        this._materials.push( mat );
+                    }
+                }
+
+                this.linkMaterials( obj.children );
+            }
+        }
+    },
+
+    initMaterials: {
+        value: function() {
+            var nMats = this._materials.length;
+            for (var i=0;  i<nMats;  i++)
+            {
+                var mat = this._materials[i];
+                mat.init( this );
+            }
+        }
+    },
+
+    findMaterialNode: {
+        value: function(nodeName, node) {
+            if (node.transformNode)
+                node = node.transformNode;
+
+            if (node.materialNode)
+            {
+                if (nodeName === node.materialNode.name)  return node.materialNode;
+            }
+
+            if (node.children)
+            {
+                var nKids = node.children.length;
+                for (var i=0;  i<nKids;  i++)
+                {
+                    var child = node.children[i];
+                    var rtnNode = this.findMaterialNode( nodeName, child );
+                    if (rtnNode)  return rtnNode;
+                }
+            }
+        }
+    },
+
+    render: {
+        value: function(obj) {
+            //if (!obj)  obj = this._geomRoot;
+            //obj.render();
+
+            var children;
+            if (obj)
+            {
+                obj.render();
+                children = obj.children;
+            }
+            else
+                children = this._rootChildren;
+
+            if (children)
+            {
+                var nKids = children.length;
+                for (var i=0;  i<nKids;  i++)
+                {
+                    var child = children[i];
+                    if (child)
+                        this.render( child );
+                }
+            }
+        }
+    }
+});
 
 ///////////////////////////////////////////////////////////////////////
 // Class RuntimeGeomObj
 //      Super class for all geometry classes
 ///////////////////////////////////////////////////////////////////////
-NinjaCvsRt.RuntimeGeomObj = function ()
-{
+NinjaCvsRt.RuntimeGeomObj = Object.create(Object.prototype, {
     ///////////////////////////////////////////////////////////////////////
     // Constants
     ///////////////////////////////////////////////////////////////////////
-	this.GEOM_TYPE_RECTANGLE		=  1;
-	this.GEOM_TYPE_CIRCLE			=  2;
-	this.GEOM_TYPE_LINE             =  3;
-	this.GEOM_TYPE_PATH			    =  4;
-	this.GEOM_TYPE_CUBIC_BEZIER     =  5;
-	this.GEOM_TYPE_UNDEFINED		= -1;
-	
+    GEOM_TYPE_RECTANGLE: { value: 1, writable: false },
+    GEOM_TYPE_CIRCLE: { value: 2, writable: false },
+    GEOM_TYPE_LINE: { value: 3, writable: false },
+    GEOM_TYPE_PATH: { value: 4, writable: false },
+    GEOM_TYPE_CUBIC_BEZIER: { value: 5, writable: false },
+    GEOM_TYPE_UNDEFINED: { value: -1, writable: false },
+
     ///////////////////////////////////////////////////////////////////////
     // Instance variables
     ///////////////////////////////////////////////////////////////////////
-    this._children;
+    _world: { value: null, writable: true },
+    _children: { value: null, writable: true },
 
     // stroke and fill colors
-    this._strokeColor	= [0,0,0,0];
-    this._fillColor		= [0,0,0,0];
+    _strokeColor: { value: [0,0,0,0], writable: true },
+    _fillColor: { value: [0,0,0,0], writable: true },
 
 	// array of materials
-	this._materials = [];
-};
-
-//NinjaCvsRt.RuntimeGeomObj.prototype = Object.create(Object.prototype, {});
-///////////////////////////////////////////////////////////////////////
-// Property accessors
-///////////////////////////////////////////////////////////////////////
-
-NinjaCvsRt.RuntimeGeomObj.prototype.geomType	= function()		{  return this.GEOM_TYPE_UNDEFINED;	};
+    _materials : { value: null, writable: true },
 
-NinjaCvsRt.RuntimeGeomObj.prototype.setWorld	= function(w)		{  this._world = w;					};
-NinjaCvsRt.RuntimeGeomObj.prototype.getWorld	= function()		{  return this._world;				};
+    ///////////////////////////////////////////////////////////////////////
+    // Property accessors
+    ///////////////////////////////////////////////////////////////////////
+    geomType: {
+        value: function() {
+            return this.GEOM_TYPE_UNDEFINED;
+        }
+    },
 
+    setWorld: {
+        value: function(w) {
+            this._world = w;
+        }
+    },
 
-///////////////////////////////////////////////////////////////////////
-// Methods
-///////////////////////////////////////////////////////////////////////
-NinjaCvsRt.RuntimeGeomObj.prototype.addChild = function( child )
-{
-    if (!this._children)  this._children = [];
-    this._children.push( child );
-};
+    getWorld: {
+        value: function() {
+            return this._world;
+        }
+    },
 
-NinjaCvsRt.RuntimeGeomObj.prototype.importJSON = function()
-{
-};
+    ///////////////////////////////////////////////////////////////////////
+    // Methods
+    ///////////////////////////////////////////////////////////////////////
+    addChild: {
+        value: function(child) {
+            if (!this._children)  this._children = [];
 
-NinjaCvsRt.RuntimeGeomObj.prototype.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;
+            this._children.push( child );
         }
+    },
 
-        if (mat)
-        {
-            mat.importJSON( matObj );
-            mat._materialNodeName = matNodeName;
-            this._materials.push( mat );
+    importJSON: {
+        value: function() {
         }
-    }
-};
+    },
+
+    importMaterials: {
+        value: 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 = Object.create(NinjaCvsRt.RuntimeFlatMaterial, {});			break;
+                    case "radialGradient":  mat = Object.create(NinjaCvsRt.RuntimeRadialGradientMaterial, {});	break;
+                    case "linearGradient":  mat = Object.create(NinjaCvsRt.RuntimeLinearGradientMaterial, {});  break;
+                    case "bumpMetal":		mat = Object.create(NinjaCvsRt.RuntimeBumpMetalMaterial, {});		break;
+                    case "uber":			mat = Object.create(NinjaCvsRt.RuntimeUberMaterial, {});			break;
+                    case "plasma":			mat = Object.create(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 = Object.create(NinjaCvsRt.RuntimePulseMaterial, {});			break;
+
+                    default:
+                        console.log( "material type: " + shaderName + " is not supported" );
+                        break;
+                }
 
-////////////////////////////////////////////////////////////////////
-// 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" );
-    }
+                if (mat)
+                {
+                    mat.importJSON( matObj );
+                    mat._materialNodeName = matNodeName;
+                    this._materials.push( mat );
+                }
+            }
+        }
+    },
 
-    rtnVec = [];
-    for (var i=0;  i<dimen;  i++)
-        rtnVec[i] = a[i] + b[i];
 
-    return rtnVec;
-};
+    ////////////////////////////////////////////////////////////////////
+    // TODO - vector functions should be moved to their own class
+    vecAdd: {
+        value: 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];
 
-NinjaCvsRt.RuntimeGeomObj.prototype.vecSubtract =  function( dimen, a, b )
-{
-    var rtnVec;
-    if ((a.length < dimen) || (b.length < dimen))
-    {
-        throw new Error( "dimension error in vecSubtract" );
-    }
+            return rtnVec;
+        }
+    },
+
+    vecSubtract: {
+        value: function(dimen, a, b) {
+            var rtnVec;
+            if ((a.length < dimen) || (b.length < dimen))
+            {
+                throw new Error( "dimension error in vecSubtract" );
+            }
 
-    rtnVec = [];
-    for (var i=0;  i<dimen;  i++)
-        rtnVec[i] = a[i] - b[i];
+            rtnVec = [];
+            for (var i=0;  i<dimen;  i++)
+                rtnVec[i] = a[i] - b[i];
 
-    return rtnVec;
-};
+            return rtnVec;
+        }
+    },
 
-NinjaCvsRt.RuntimeGeomObj.prototype.vecDot = function( dimen,  v0, v1 )
-{
-    if ((v0.length < dimen) || (v1.length < dimen))
-    {
-        throw new Error( "dimension error in vecDot" );
-    }
+    vecDot: {
+        value: function(dimen, v0, v1) {
+            if ((v0.length < dimen) || (v1.length < dimen))
+            {
+                throw new Error( "dimension error in vecDot" );
+            }
 
-    var sum = 0.0;
-    for (var i=0;  i<dimen;  i++)
-        sum += v0[i] * v1[i];
+            var sum = 0.0;
+            for (var i=0;  i<dimen;  i++)
+                sum += v0[i] * v1[i];
 
-    return sum;
-};
+            return sum;
+        }
+    },
+
+    vecMag: {
+            value: function(dimen, vec) {
+            var sum = 0.0;
+            for (var i=0;  i<dimen;  i++)
+                sum += vec[i]*vec[i];
+            return Math.sqrt( sum );
+        }
+    },
 
-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 );
-};
+    vecScale: {
+        value: function(dimen, vec, scale) {
+            for (var i=0;  i<dimen;  i++)
+                vec[i] *= scale;
 
-NinjaCvsRt.RuntimeGeomObj.prototype.vecScale = function(dimen, vec, scale)
-{
-    for (var i=0;  i<dimen;  i++)
-        vec[i] *= scale;
+            return vec;
+        }
+    },
+
+    vecNormalize: {
+        value: function(dimen, vec, len) {
+            var rtnVec;
+            if (!len)  len = 1.0;
+
+            var sum = 0.0, i = 0;
+            for (i = 0;  i<dimen;  i++)
+                sum += vec[i]*vec[i];
+            sum = Math.sqrt( sum );
+
+            if (Math.abs(sum) >= 0.001)
+            {
+                var scale = len/sum;
+                rtnVec = [];
+                for (i = 0;  i<dimen;  i++)
+                    rtnVec[i] = vec[i]*scale;
+            }
 
-    return vec;
-};
+            return rtnVec;
+        }
+    },
 
-NinjaCvsRt.RuntimeGeomObj.prototype.vecNormalize = function(dimen, vec, len)
-{
-    var rtnVec;
-    if (!len)  len = 1.0;
-
-    var sum = 0.0, i = 0;
-    for (i = 0;  i<dimen;  i++)
-        sum += vec[i]*vec[i];
-    sum = Math.sqrt( sum );
-
-    if (Math.abs(sum) >= 0.001)
-    {
-        var scale = len/sum;
-        rtnVec = [];
-        for (i = 0;  i<dimen;  i++)
-            rtnVec[i] = vec[i]*scale;
-    }
+    transformPoint: {
+        value: 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];
 
-    return rtnVec;
-};
+            return [x, y, z];
+        }
+    },
 
-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];
+    MatrixIdentity: {
+        value: function(dimen) {
+            var mat = [];
 
-    return [x, y, z];
-};
-	
-NinjaCvsRt.RuntimeGeomObj.prototype.MatrixIdentity = function(dimen)
-{
-    var mat = [];
+            for (var i = 0; i<dimen*dimen; i++)  {
+                mat.push(0);
+            }
 
-    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;
+            }
 
-    var index = 0;
-    for (var j = 0; j<dimen; j++) {
-        mat[index] = 1.0;
-        index += dimen + 1;
+            return mat;
+        }
+    },
+
+    MatrixRotationZ: {
+        value: 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;
+        }
     }
+});
 
-    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;
-};
 
 ///////////////////////////////////////////////////////////////////////
 // Class RuntimeRectangle
 ///////////////////////////////////////////////////////////////////////
-NinjaCvsRt.RuntimeRectangle = function ()
-{
-};
-	// inherit the members of NinjaCvsRt.RuntimeGeomObj
-//	this.inheritedFrom = NinjaCvsRt.RuntimeGeomObj;
-//	this.inheritedFrom();
-NinjaCvsRt.RuntimeRectangle.prototype = Object.create(NinjaCvsRt.RuntimeGeomObj.prototype, {});
-
-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 );
-};
-
-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))
-    {
-        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 {
-                gradient = ctx.createLinearGradient(inset/2, h/2, w-inset, h/2);
+NinjaCvsRt.RuntimeRectangle = Object.create(NinjaCvsRt.RuntimeGeomObj, {
+
+    importJSON: {
+        value: 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 );
+        }
+    },
+
+    renderPath: {
+        value: 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);
             }
-            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 + ")");
+            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 );
             }
+        }
+    },
+
+    render: {
+        value: 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 {
+                        gradient = ctx.createLinearGradient(inset/2, h/2, w-inset, h/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(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.fillStyle = gradient;
 
-    // render the stroke
-    ctx.beginPath();
-    if (this._strokeColor) {
-        inset = Math.ceil( 0.5*lw ) - 0.5;
+                } else {
+                    c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")";
+                    ctx.fillStyle = c;
+                }
 
-        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);
+                ctx.lineWidth	= lw;
+                this.renderPath( inset, ctx );
+                ctx.fill();
+                ctx.closePath();
             }
-            colors = this._strokeColor.color;
 
-            len = colors.length;
+            // 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 {
+                        gradient = ctx.createLinearGradient(0, h/2, w, h/2);
+                    }
+                    colors = this._strokeColor.color;
 
-            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 + ")");
-            }
+                    len = colors.length;
 
-            ctx.strokeStyle = gradient;
+                    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 + ")");
+                    }
 
-        } else {
-            c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")";
-            ctx.strokeStyle = c;
-        }
+                    ctx.strokeStyle = gradient;
 
-        ctx.lineWidth	= lw;
-        this.renderPath( inset, ctx );
-        ctx.stroke();
-        ctx.closePath();
+                } 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();
+            }
+        }
     }
-};
+});
 
 ///////////////////////////////////////////////////////////////////////
 // Class RuntimeLine
 ///////////////////////////////////////////////////////////////////////
-NinjaCvsRt.RuntimeLine = function ()
-{
-};
-// inherit the members of NinjaCvsRt.RuntimeGeomObj
-//	this.inheritedFrom = NinjaCvsRt.RuntimeGeomObj;
-//	this.inheritedFrom();
-NinjaCvsRt.RuntimeLine.prototype = Object.create(NinjaCvsRt.RuntimeGeomObj.prototype, {});
-
-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 );
-};
+NinjaCvsRt.RuntimeLine = Object.create(NinjaCvsRt.RuntimeGeomObj, {
+
+    importJSON: {
+        value: 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 );
+        }
+    },
+
+    render: {
+        value: 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;
 
-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;
+                    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();
     }
-};
+});
 
 ///////////////////////////////////////////////////////////////////////
 // Class RuntimeOval
 ///////////////////////////////////////////////////////////////////////
-NinjaCvsRt.RuntimeOval = function ()
-{
-};
-	// inherit the members of NinjaCvsRt.RuntimeGeomObj
-//	this.inheritedFrom = NinjaCvsRt.RuntimeGeomObj;
-//	this.inheritedFrom();
-NinjaCvsRt.RuntimeOval.prototype = Object.create(NinjaCvsRt.RuntimeGeomObj.prototype, {});
-
-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 );
-};
+NinjaCvsRt.RuntimeOval = Object.create(NinjaCvsRt.RuntimeGeomObj, {
+
+    importJSON: {
+        value: 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 );
+        }
+    },
+
+    render: {
+        value: 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],
+