/*
This file contains proprietary software owned by Motorola Mobility, Inc.
No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
*/
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;
} else {
this._strokeMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() );
}
if(fillMaterial) {
this._fillMaterial = fillMaterial;
} else {
this._fillMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() );
}
}
},
///////////////////////////////////////////////////////////////////////
// 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 fillPrim, strokePrim0, strokePrim1;
var fillMaterial, strokeMaterial0, strokeMaterial2;
this._primArray = [];
this._materialArray = [];
this._materialTypeArray = [];
this._materialNodeArray = [];
/////////////////////////////////////////////////////////////
// Strokes
if(this._strokeWidth > 0) {
var numStrokes = 1;
if(this._innerRadius !== 0) {
strokePrim0 = this.generateOvalRing(x, y, reverseRotMat, innerStrokeScaleMat, innerRadiusScaleMat, nTriangles);
}
strokePrim1 = this.generateOvalRing(x, y, reverseRotMat, fillScaleMat, strokeScaleMat, nTriangles);
}
/////////////////////////////////////////////////////////////
// Fill
if(this._innerRadius === 0) {
fillPrim = this.generateOval(x, y, mat, fillScaleMat, nTriangles);
} else {
fillPrim = this.generateOvalRing(x, y, reverseRotMat, innerRadiusScaleMat, fillScaleMat, nTriangles);
}
if (fillPrim) {
fillMaterial = this.makeFillMaterial();
fillMaterial.fitToPrimitive( fillPrim );
this._primArray.push( fillPrim );
this._materialNodeArray.push( fillMaterial.getMaterialNode() );
}
if (strokePrim0) {
strokeMaterial0 = this.makeStrokeMaterial();
strokeMaterial0.fitToPrimitive( strokePrim0 );
this._primArray.push( strokePrim0 );
this._materialNodeArray.push( strokeMaterial0.getMaterialNode() );
}
if (strokePrim1) {
strokeMaterial2 = this.makeStrokeMaterial();
strokeMaterial2.fitToPrimitive( strokePrim1 );
this._primArray.push( strokePrim1 );
this._materialNodeArray.push( strokeMaterial2.getMaterialNode() );
}
world.updateObject(this);
}
},
generateOval: {
value: function(xOff, yOff, rotationMat, scaleMat, nTriangles) {
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 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
ctx.beginPath();
ctx.lineWidth = lineWidth;
if (this._strokeColor) {
if(this._strokeColor.gradientMode) {
if(this._strokeColor.gradientMode === "radial") {
gradient = ctx.createRadialGradient(xCtr, yCtr, Math.min(xScale, yScale),
xCtr, yCtr, 0.5*Math.max(this._height, this._width));
} else {
gradient = ctx.createLinearGradient(0, this._height/2, this._width, this._height/2);
}
colors = this._strokeColor.color;
len = colors.length;
for(j=0; j 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() : MaterialsModel.getDefaultMaterialName(),
'fillMat' : this._fillMaterial ? this._fillMaterial.getName() : MaterialsModel.getDefaultMaterialName(),
'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;
var strokeMaterialName = jObj.strokeMat;
var fillMaterialName = jObj.fillMat;
var strokeMat = MaterialsModel.getMaterial( strokeMaterialName );
if (!strokeMat) {
console.log( "object material not found in library: " + strokeMaterialName );
strokeMat = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() );
}
this._strokeMaterial = strokeMat;
var fillMat = MaterialsModel.getMaterial( fillMaterialName );
if (!fillMat) {
console.log( "object material not found in library: " + fillMaterialName );
fillMat = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() );
}
this._fillMaterial = fillMat;
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 world = this.getWorld();
if (!world) throw( "null world in containsPoint" );
// get a point on the plane of the circle
// the point is in NDC, as is the input parameters
var mat = this.getMatrix();
var plane = [0,0,1,0];
plane = MathUtils.transformPlane( plane, mat );
var projPt = MathUtils.vecIntersectPlane ( pt, dir, plane );
// transform the projected point back to the XY plane
//var invMat = mat.inverse();
var invMat = glmat4.inverse( mat, [] );
var planePt = MathUtils.transformPoint( projPt, invMat );
// get the normalized device coordinates (NDC) for
// the position and radii.
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;
var projMat = world.makePerspectiveMatrix();
var z = -world.getViewDistance();
var planePtNDC = planePt.slice(0);
planePtNDC[2] = z;
planePtNDC = MathUtils.transformHomogeneousPoint( planePtNDC, projMat );
planePtNDC = MathUtils.applyHomogeneousCoordinate( planePtNDC );
// get the gl coordinates
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;
var angle = Math.atan2( planePtNDC[1] - yNDC, planePtNDC[0] - xNDC );
var degrees = angle*180.0/Math.PI;
var objPtNDC = [Math.cos(angle)*xRadNDC + xNDC, Math.sin(angle)*yRadNDC + yNDC, 0];
var ctrNDC = [xNDC, yNDC];
var distToBoundary = VecUtils.vecDist( 2, ctrNDC, objPtNDC ),
distToPt = VecUtils.vecDist( 2, ctrNDC, planePtNDC );
return (MathUtils.fpCmp(distToPt,distToBoundary) <= 0);
}
},
getNearPoint: {
value: function(pt, dir) {
var world = this.getWorld();
if (!world) throw( "null world in getNearPoint" );
// the input point and direction are in GL space
// project to the z == 0 plane
var mat = this.getMatrix();
var plane = [0,0,1,0];
plane = MathUtils.transformPlane( plane, mat );
var projPt = MathUtils.vecIntersectPlane ( pt, dir, plane );
// get the center of the circle in GL space
var ctr = this.getGLCenter();
// transform the projected point to the plane of the circle
var planePt = MathUtils.transformPoint( projPt, mat );
// get a matrix mapping the circle to a 2D coordinate system
var normal = [ mat[8], mat[9], mat[10] ];
var planeMat = drawUtils.getPlaneToWorldMatrix(normal, ctr);
var planeMatInv = glmat4.inverse( planeMat, [] );
var planePt2D = MathUtils.transformPoint( planePt, planeMatInv );
// get 2 points on the axes of the oval
var wPt = this.preViewToGL( [this._xOffset + 0.5*this.getWidth(), this._yOffset, 0] ),
hPt = this.preViewToGL( [this._xOffset, this._yOffset + 0.5*this.getHeight(), 0] );
var w = vecUtils.vecDist( 2, wPt, ctr ),
h = vecUtils.vecDist( 2, hPt, ctr );
var aspect = w/h;
// get the angle of the projected point relative to the circle
var angle = Math.atan2( planePt2D[1], planePt2D[0]/aspect );
var degrees = angle*180.0/Math.PI;
// get the corresponding point on the object
var pt = [ Math.cos(angle)*w, Math.sin(angle)*h, 0 ];
var glPt = MathUtils.transformPoint( pt, planeMat );
return glPt;
}
},
recalcTexMapCoords: {
value: function(vrts, uvs) {
var n = vrts.length/3;
if (n === 0) return;
var ivrt = 0, iuv = 0;
var uMin = 1.e8, uMax = -1.e8,
vMin = 1.e8, vMax = -1.e8;
var i, index = 3;
var xMin = vrts[0], xMax = vrts[0],
yMin = vrts[1], yMax = vrts[1];
for (i=1; i xMax) xMax = vrts[index];
if (vrts[index+1] < yMin) yMin = vrts[index+1];
else if (vrts[index+1] > yMax) yMax = vrts[index+1];
index += 3;
}
var ovalWidth = xMax - xMin,
ovalHeight = yMax - yMin;
for (i=0; i uMax) uMax = uvs[iuv];
iuv++; ivrt++;
uvs[iuv] = (vrts[ivrt]-yMin)/ovalHeight;
if (uvs[iuv] < vMin) vMin = uvs[iuv];
if (uvs[iuv] > vMax) vMax = uvs[iuv];
iuv++; ivrt += 2;
}
//console.log( "remap" );
//console.log( "uRange: " + uMin + " => " + uMax );
//console.log( "vRange: " + vMin + " => " + vMax );
}
}
});