path: root/js/lib/geom/circle.js

/* <copyright>
Copyright (c) 2012, Motorola Mobility LLC.
All Rights Reserved.

Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are met:

* Redistributions of source code must retain the above copyright notice,
  this list of conditions and the following disclaimer.

* Redistributions in binary form must reproduce the above copyright notice,
  this list of conditions and the following disclaimer in the documentation
  and/or other materials provided with the distribution.

* Neither the name of Motorola Mobility LLC nor the names of its
  contributors may be used to endorse or promote products derived from this
  software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE
LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
POSSIBILITY OF SUCH DAMAGE.
</copyright> */

var GeomObj =           require("js/lib/geom/geom-obj").GeomObj;
var ShapePrimitive =    require("js/lib/geom/shape-primitive").ShapePrimitive;
var MaterialsModel = require("js/models/materials-model").MaterialsModel;
var drawUtils       = require("js/helper-classes/3D/draw-utils").DrawUtils;
var vecUtils        = require("js/helper-classes/3D/vec-utils").VecUtils;

///////////////////////////////////////////////////////////////////////
// Class GLCircle
//      GL representation of a circle.
//      Derived from class GLGeomObj
//      The position and dimensions of the stroke, fill, and inner Radius should be in pixels
///////////////////////////////////////////////////////////////////////
exports.Circle = Object.create(GeomObj, {

    ///////////////////////////////////////////////////////////////////////
    // Instance variables
    ///////////////////////////////////////////////////////////////////////
    _width: { value : 2.0, writable: true },
    _height: { value : 2.0, writable: true },
    _xOffset: { value : 0, writable: true },
    _yOffset: { value : 0, writable: true },

    _radius: { value : 2.0, writable: true },
    _strokeWidth: { value : 0.25, writable: true },
    _innerRadius: { value : 0, writable: true },
    _ovalHeight: { value : 4.0, writable: true },
    _strokeStyle: { value : "Solid", writable: true },
    _aspectRatio: { value : 1.0, writable: true },

    init: {
        value: function(world, xOffset, yOffset, width, height, strokeSize, strokeColor, fillColor, innerRadius, strokeMaterial, fillMaterial, strokeStyle) {
            if(arguments.length > 0) {
                this._width = width;
                this._height = height;
                this._xOffset = xOffset;
                this._yOffset = yOffset;
                this._ovalHeight = 2.0 * this._radius;

                this._strokeWidth = strokeSize;
                this._innerRadius = innerRadius;
                this._strokeColor = strokeColor;
                this._fillColor = fillColor;

                this._strokeStyle = strokeStyle;

                this._matrix = Matrix.I(4);
                //this._matrix[12] = xOffset;
                //this._matrix[13] = yOffset;
            }

            this.m_world = world;

            if(strokeMaterial) {
                this._strokeMaterial = strokeMaterial.dup();
            }

            if(fillMaterial) {
                this._fillMaterial = fillMaterial.dup();
            }

            this.initColors();
        }
    },

    ///////////////////////////////////////////////////////////////////////
    // Property Accessors
    ///////////////////////////////////////////////////////////////////////
    // TODO - Use getters/setters in the future
    getStrokeWidth: {
        value: function() {
            return this._strokeWidth;
        }
    },

    setStrokeWidth: {
        value: function(w) {
            this._strokeWidth = w;
        }
    },

    getStrokeMaterial: {
        value: function() {
            return this._strokeMaterial;
        }
    },

    setStrokeMaterial: {
        value: function(m) {
            this._strokeMaterial = m;
        }
    },

    getFillMaterial: {
        value: function() {
            return this._fillMaterial;
        }
    },

    setFillMaterial: {
        value: function(m) {
            this._fillMaterial = m;
        }
    },

    getRadius: {
        value: function() {
            return this._radius;
        }
    },

    setRadius: {
        value: function(r) {
            this._radius = r;
        }
    },

    getInnerRadius: {
        value: function() {
            return this._innerRadius;
        }
    },

    setInnerRadius: {
        value: function(r) {
            this._innerRadius = r;
        }
    },

    getStrokeStyle: {
        value: function() {
            return this._strokeStyle;
        }
    },

    setStrokeStyle: {
        value: function(s) {
            this._strokeStyle = s;
        }
    },

    getWidth: {
        value: function() {
            return this._width;
        }
    },

    setWidth: {
        value: function(w) {
            this._width = w;
        }
    },

    getHeight: {
        value: function() {
            return this._height;
        }
    },

    setHeight: {
        value: function(h) {
            this._height = h;
        }
    },

    geomType: {
        value: function() {
            return this.GEOM_TYPE_CIRCLE;
        }
    },

    ///////////////////////////////////////////////////////////////////////
    // update the "color of the material
    getFillColor: {
        value: function() {
            return this._fillColor;
        }
    },

//    setFillColor: {
//        value: function(c) {
//            this._fillColor = c;
//        }
//    },

    getStrokeColor: {
        value: function() {
            return this._strokeColor;
        }
    },

//    setStrokeColor: {
//        value: function(c) {
//            this._strokeColor = c;
//        }
//    },
    ///////////////////////////////////////////////////////////////////////

    ///////////////////////////////////////////////////////////////////////
    // Methods
    ///////////////////////////////////////////////////////////////////////
    buildBuffers: {
        value: function() {
            // get the world
            var world = this.getWorld();
            if (!world)  throw( "null world in buildBuffers" );

            if (!world._useWebGL)  return;

            // make sure RDGE has the correct context
            RDGE.globals.engine.setContext( world.getCanvas().rdgeid );

             // create the gl buffer
            var gl = world.getGLContext();

            // determine the number of triangles to generate
            var nTriangles = 60;        // yes, we will do better than this

            // get the normalized device coordinates (NDC) for
            // all position and dimensions.
            var vpw = world.getViewportWidth(),  vph = world.getViewportHeight();
            var xNDC = 2*this._xOffset/vpw,  yNDC = -2*this._yOffset/vph,
                xRadNDC = this._width/vpw,  yRadNDC = this._height/vph,
                xStrokeNDC = 2*this._strokeWidth/vpw,  yStrokeNDC = 2*this._strokeWidth/vph,
                xInnRadNDC = this._innerRadius*xRadNDC,  yInnRadNDC = this._innerRadius*yRadNDC;

            var aspect = world.getAspect();
            var zn = world.getZNear(),  zf = world.getZFar();
            var t = zn * Math.tan(world.getFOV() * Math.PI / 360.0),
                b = -t,
                r = aspect*t,
                l = -r;

            // calculate the object coordinates from their NDC coordinates
            var z = -world.getViewDistance();

            // get the position of the origin
            var x = -z*(r-l)/(2.0*zn)*xNDC,
                y = -z*(t-b)/(2.0*zn)*yNDC;

            // get the x and y radii
            var xRad = -z*(r-l)/(2.0*zn)*xRadNDC,
                yRad = -z*(t-b)/(2.0*zn)*yRadNDC;

            // save the overall dimensions to be used in the uv calculations
            this._ovalWidth = xRad;  this._ovalHeight = yRad;

            // get the x & y stroke size
            var xStroke = -z*(r-l)/(2.0*zn)*xStrokeNDC,
                yStroke = -z*(t-b)/(2.0*zn)*yStrokeNDC;

            // get the inner radius
            var xInnRad = -z*(r-l)/(2.0*zn)*xInnRadNDC,
                yInnRad = -z*(t-b)/(2.0*zn)*yInnRadNDC;

            // get a matrix to rotate a point around the circle
            var angle = 2.0 * Math.PI/Number(nTriangles);
            var mat = Matrix.RotationZ( angle );
            var reverseRotMat = Matrix.RotationZ( -angle );

            // calculate matrices to scale the circle and stroke to fit the bounds of the ellipse
            var strokeScaleMat = Matrix.I(4);
            strokeScaleMat[0] = xRad;
            strokeScaleMat[5] = yRad;

            var fillScaleMat = Matrix.I(4);
            fillScaleMat[0] = xRad - xStroke;
            fillScaleMat[5] = yRad - yStroke;

            var innerRadiusScaleMat = Matrix.I(4);
            innerRadiusScaleMat[0] = xInnRad;
            innerRadiusScaleMat[5] = yInnRad;

            var innerStrokeScaleMat = Matrix.I(4);
            innerStrokeScaleMat[0] = xInnRad - xStroke;
            innerStrokeScaleMat[5] = yInnRad - yStroke;

			var i;
			var fillPrimArray,  strokePrim0Array,  strokePrim1Array;
            var fillMaterial,  strokeMaterial0,  strokeMaterial2;

            this._primArray = [];
            this._materialArray = [];
            this._materialTypeArray = [];
            this._materialNodeArray = [];

            /////////////////////////////////////////////////////////////
            // Strokes
            if(this._strokeWidth > 0) {
                var numStrokes = 1;
                if(this._innerRadius !== 0) {
                    strokeMaterial0 = this.makeStrokeMaterial();
					strokePrim0Array = this.generateOvalRing(x, y, reverseRotMat, innerStrokeScaleMat, innerRadiusScaleMat, nTriangles,  strokeMaterial0);
                }

                strokeMaterial2 = this.makeStrokeMaterial();
				strokePrim1Array = this.generateOvalRing(x, y, reverseRotMat, fillScaleMat, strokeScaleMat, nTriangles,  strokeMaterial2);
            }

			if (strokePrim0Array) {
				strokeMaterial0.fitToPrimitiveArray( strokePrim0Array );
				for (i=0;  i<strokePrim0Array.length;  i++)
				{
					this._primArray.push( strokePrim0Array[i] );
                this._materialNodeArray.push( strokeMaterial0.getMaterialNode() );
            }
			}

			if (strokePrim1Array) {
				strokeMaterial2.fitToPrimitiveArray( strokePrim1Array );
				for (i=0;  i<strokePrim1Array.length;  i++)
				{
					this._primArray.push( strokePrim1Array[i] );
                this._materialNodeArray.push( strokeMaterial2.getMaterialNode() );
            }
			}

            /////////////////////////////////////////////////////////////
            //  Fill
            fillMaterial = this.makeFillMaterial();
            if(this._innerRadius === 0) {
				fillPrimArray = this.generateOval(x, y, mat, fillScaleMat, nTriangles,  fillMaterial);
            } else {
				fillPrimArray = this.generateOvalRing(x, y, reverseRotMat, innerRadiusScaleMat, fillScaleMat, nTriangles,  fillMaterial);
            }

			if (fillPrimArray) {
				fillMaterial.fitToPrimitiveArray( fillPrimArray );
				for (i=0;  i<fillPrimArray.length;  i++)
				{
					this._primArray.push( fillPrimArray[i] );
                this._materialNodeArray.push( fillMaterial.getMaterialNode() );
            }
			}

            world.updateObject(this);
        }
    },

    generateOval: {
        value: function(xOff, yOff, rotationMat, scaleMat, nTriangles,  material) {
            var pt = [1.0, 0.0, 0.0];
            //var pts = scaleMat.multiply(pt);
            var pts = glmat4.multiplyVec3( scaleMat, pt, []);
            var x = pts[0],  y = pts[1], z = 0;
            var xs = scaleMat[0], ys = scaleMat[4];

            var vrts = [], nrms = [], uvs = [], indices = [];
            var index = 0;
            for (var i=0;  i<nTriangles;  i++) {
                //pt = rotationMat.multiply( pt );
                //pts = scaleMat.multiply(pt);
                glmat4.multiplyVec3( rotationMat, pt );
                glmat4.multiplyVec3( scaleMat, pt, pts );

                // push the 3 vertices for the next triangle
                vrts.push(pts[0]+xOff);
                vrts.push(pts[1]+yOff);
                vrts.push(z);

                vrts.push(x+xOff);
                vrts.push(y+yOff);
                vrts.push(z);

                vrts.push(xOff);
                vrts.push(yOff);
                vrts.push(z);

                // push a texture coordinate pair for each vertex
                uvs.push(0.5);
                uvs.push(0.5);
                uvs.push(x/(2.0 * xs) + 0.5,  y/(2.0 * ys) + 0.5);
                uvs.push(pts[0]/(2.0 * xs) + 0.5, pts[1]/(2.0 * ys) + 0.5);

                // push a normal for each vertex
                nrms.push(0.0);
                nrms.push(0.0);
                nrms.push(1);
                nrms.push(0.0);
                nrms.push(0.0);
                nrms.push(1);
                nrms.push(0.0);
                nrms.push(0.0);
                nrms.push(1);

                x = pts[0];  y = pts[1];

                indices[index] = index++;
                indices[index] = index++;
                indices[index] = index++;
            }

            this.recalcTexMapCoords( vrts, uvs );

            //refine the mesh for vertex deformations
			var rtnArray;
			if (material)
			{
				if (material.hasVertexDeformation())
				{
                    var paramRange = material.getVertexDeformationRange();
                    var tolerance = material.getVertexDeformationTolerance();
					var nVertices = vrts.length/3
					nVertices = ShapePrimitive.refineMesh( vrts, nrms, uvs, indices, nVertices,  paramRange,  tolerance );
					var subdividedParts = ShapePrimitive.subdivideOversizedMesh( vrts, nrms, uvs, indices );

					rtnArray = [];
					if (subdividedParts)
					{
						for (var i=0;  i<subdividedParts.length;  i++)
						{
							var obj = subdividedParts[i];
							rtnArray.push( ShapePrimitive.create(obj.vertices, obj.normals, obj.uvs, obj.indices, RDGE.globals.engine.getContext().renderer.TRIANGLES, obj.vertices.length/3) );
                }
            }
					else
						rtnArray = [ ShapePrimitive.create(vrts, nrms, uvs, indices, RDGE.globals.engine.getContext().renderer.TRIANGLES, nVertices) ];
				}
				else
				{
					// create the RDGE primitive
					rtnArray = [ ShapePrimitive.create(vrts, nrms, uvs, indices, RDGE.globals.engine.getContext().renderer.TRIANGLES, nVertices) ];
				}
			}

			return rtnArray;
        }
    },

    generateOvalRing: {
        value: function(xOff, yOff, rotationMat, innerScaleMat, outerScaleMat, nTriangles,  material) {
            var pt = [1.0, 0.0, 0.0];

            var z = 0;
            var pt0s,  pt1s;
            //pt0s = innerScaleMat.multiply(pt);
            //pt1s = outerScaleMat.multiply(pt);
            pt0s = glmat4.multiplyVec3(innerScaleMat, pt, []);
            pt1s = glmat4.multiplyVec3(outerScaleMat, pt, []);

            var vrts = [], nrms = [], uvs = [], indices = [];

            // normals
            var insideAngle  = -15.0*Math.PI/180.0,
                outsideAngle =  15.0*Math.PI/180.0;
            var cs1 = Math.cos(insideAngle),  sn0 = Math.sin(insideAngle),
                cs0 = Math.cos(outsideAngle), sn1 = Math.sin(outsideAngle);
            var nrm0 = [-sn0, 0,  cs0],
                nrm1 = [-sn1, 0,  cs1];

            var index = 0;
            vrts.push( pt0s[0]+xOff);  vrts.push(pt0s[1]+yOff);  vrts.push(z);
            vrts.push( pt1s[0]+xOff);  vrts.push(pt1s[1]+yOff);  vrts.push(z);
            uvs.push(0.5*pt0s[0] + 0.5);  uvs.push(0.5*pt0s[1] + 0.5);
            uvs.push(0.5*pt1s[0] + 0.5);  uvs.push(0.5*pt1s[1] + 0.5);
            nrms.push( nrm0[0] );  nrms.push(nrm0[1] );  nrms.push(nrm0[2] );
            nrms.push( nrm1[0] );  nrms.push(nrm1[1] );  nrms.push(nrm1[2] );
            indices[index] = index++;
            indices[index] = index++;

            for (var i=0;  i<nTriangles;  i++) {
                pt   = glmat4.multiplyVec3( rotationMat, pt );
                glmat4.multiplyVec3( innerScaleMat, pt, pt0s );
                glmat4.multiplyVec3( outerScaleMat, pt, pt1s );

                // vertices
                vrts.push( pt0s[0]+xOff);  vrts.push(pt0s[1]+yOff);  vrts.push(z);
                vrts.push( pt1s[0]+xOff);  vrts.push(pt1s[1]+yOff);  vrts.push(z);

                // textures
                uvs.push(0.5*pt0s[0] + 0.5);  uvs.push(0.5*pt0s[1] + 0.5);
                uvs.push(0.5*pt1s[0] + 0.5);  uvs.push(0.5*pt1s[1] + 0.5);

                // normals
                glmat4.multiplyVec3( rotationMat, nrm0 );
                glmat4.multiplyVec3( rotationMat, nrm1 );
                nrms.push( nrm0[0]);  nrms.push(nrm0[1]);  nrms.push(nrm0[2] );
                nrms.push( nrm1[0]);  nrms.push(nrm1[1]);  nrms.push(nrm1[2] );
                indices[index] = index++;
                indices[index] = index++;
            }

            this.recalcTexMapCoords( vrts, uvs );

            //refine the mesh for vertex deformations
			var rtnArray;
			if (material)
			{
				if (material.hasVertexDeformation())
				{
                    var paramRange = material.getVertexDeformationRange();
                    var tolerance = material.getVertexDeformationTolerance();
					var nVertices = indices.length;
					indices = ShapePrimitive.convertTriangleStripToTriangles( indices );
					nVertices = ShapePrimitive.refineMesh( vrts, nrms, uvs, indices, nVertices,  paramRange,  tolerance );
					var subdividedParts = ShapePrimitive.subdivideOversizedMesh( vrts, nrms, uvs, indices );

					rtnArray = [];
					if (subdividedParts)
					{
						for (var i=0;  i<subdividedParts.length;  i++)
						{
							var obj = subdividedParts[i];
							rtnArray.push( ShapePrimitive.create(obj.vertices, obj.normals, obj.uvs, obj.indices, RDGE.globals.engine.getContext().renderer.TRIANGLES, obj.vertices.length/3) );
                }
            }
					else
						rtnArray = [ ShapePrimitive.create(vrts, nrms, uvs, indices, RDGE.globals.engine.getContext().renderer.TRIANGLES, nVertices) ];
				}
				else
				{
					// create the RDGE primitive
					rtnArray = [ ShapePrimitive.create(vrts, nrms, uvs, indices, RDGE.globals.engine.getContext().renderer.TRIANGLE_STRIP, indices.length) ];
				}
			}

			return rtnArray;
        }
    },

    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, y1,   x1, y1;

            // create the matrix
            var lineWidth = this._strokeWidth;
            var innerRad  = this.getInnerRadius();
            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;
            //ctx.setTransform( xScale, 0.0,  0.0, yScale, xCtr, yCtr );
            var mat = Matrix.create( [
                                [ 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 = MathUtils.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 - lineWidth);
                        } else {
                            gradient = ctx.createLinearGradient(lineWidth, this._height/2, this._width-lineWidth, this._height/2);
                        }
                        colors = this._fillColor.color;

                        len = colors.length;

                        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.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 = MathUtils.transformPoint( bezPts[0],   mat );
                    ctx.moveTo( p[0],  p[1] );
                    var index = 1;
                    while (index < n) {
                        p0   = MathUtils.transformPoint( bezPts[index],  mat );
                        p1 = MathUtils.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 (MathUtils.fpSign(innerRad) > 0) {
                        xScale = 0.5*innerRad*this._width;
                        yScale = 0.5*innerRad*this._height;
                        mat[0] = xScale;
                        mat[5] = yScale;

                        // get the bezier points
                        var bezPts = MathUtils.circularArcToBezier( [0,0,0], [1,0,0], -2.0*Math.PI );
                        if (bezPts) {
                            var n = bezPts.length;
                            p = MathUtils.transformPoint( bezPts[0],   mat );
                            ctx.moveTo( p[0],  p[1] );
                            index = 1;
                            while (index < n) {
                                p0 = MathUtils.transformPoint( bezPts[index],    mat );
                                p1 = MathUtils.transformPoint( bezPts[index+1],  mat );

                                var 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
                if(lineWidth > 0) {
                    ctx.beginPath();
                    ctx.lineWidth   = lineWidth;
                    if (this._strokeColor) {
                        if(this._strokeColor.gradientMode) {
                            if(this._strokeColor.gradientMode === "radial") {
                                gradient = ctx.createRadialGradient(xCtr, yCtr, 0,
                                                                    xCtr, yCtr, 0.5*Math.max(this._height, this._width));
                            } else {
                                gradient = ctx.createLinearGradient(0, this._height/2, this._width, this._height/2);
                            }
                            colors = this._strokeColor.color;

                            len = colors.length;

                            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 = MathUtils.transformPoint( bezPts[0],   mat );
                        ctx.moveTo( p[0],  p[1] );
                        index = 1;
                        while (index < n) {
                            var p0   = MathUtils.transformPoint( bezPts[index],  mat );
                            var p1 = MathUtils.transformPoint( bezPts[index+1],  mat );

                            var x0 = p0[0],  y0 = p0[1],
                                x1 = p1[0],  y1 = p1[1];
                            ctx.quadraticCurveTo( x0,  y0,  x1, y1 );
                            index += 2;
                        }

                        if (MathUtils.fpSign(innerRad) > 0) {
                            // 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 = MathUtils.transformPoint( bezPts[0],   mat );
                            ctx.moveTo( p[0],  p[1] );
                            index = 1;
                            while (index < n) {
                                var p0   = MathUtils.transformPoint( bezPts[index],  mat );
                                var p1 = MathUtils.transformPoint( bezPts[index+1],  mat );

                                var 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();
                    }
                }
            }
        }
    },

    exportJSON: {
        value: function() {
            var jObj =
            {
                'type'          : this.geomType(),
                'xoff'          : this._xOffset,
                'yoff'          : this._yOffset,
                'width'         : this._width,
                'height'        : this._height,
                'strokeWidth'   : this._strokeWidth,
                'strokeColor'   : this._strokeColor,
                'fillColor'     : this._fillColor,
                'innerRadius'   : this._innerRadius,
                'strokeStyle'   : this._strokeStyle,
                'strokeMat'     : this._strokeMaterial ? this._strokeMaterial.getName() :  null,
                'fillMat'       : this._fillMaterial ?  this._fillMaterial.getName() :  null,
                'materials'     : this.exportMaterialsJSON()
            };

            return jObj;
        }
    },

    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;

            if(jObj.strokeMat) {
                var strokeMat = MaterialsModel.getMaterial(jObj.strokeMat).dup();
                if (!strokeMat) {
                    console.log("object material not found in library: " + jObj.strokeMat);
                } else {
                    this._strokeMaterial = strokeMat;
                }
            }

            if(jObj.fillMat) {
                var fillMat = MaterialsModel.getMaterial(jObj.fillMat).dup();
                if (!fillMat) {
                    console.log("object material not found in library: " + jObj.fillMat);
                } else {
                    this._fillMaterial = fillMat;
                }
            }

            this.initColors();
            this.importMaterialsJSON( jObj.materials );
        }
    },

    collidesWithPoint: {
        value: function(x, y) {
//        if(x < this._xOffset) return false;
//        if(x > (this._xOffset + this._width)) return false;
//        if(y < this._yOffset) return false;
//        if(y > (this._yOffset + this._height)) return false;

        return true;
        }
    },

    containsPoint: {
        value: function(pt, dir) {
            var wor