Merge pull request #6953 from neko1235/ellipse-rotation

Add rotation to EllipseCurve and Path.

docs/api/extras/core/Path.html

@@ -81,7 +81,7 @@
 		</div>
 		<div>Draw an arc absolutely positioned</div>
 
-		<h3>[method:null ellipse]( [page:Float x], [page:Float y], [page:Float xRadius], [page:Float yRadius], [page:Float startAngle], [page:Float endAngle], [page:Float clockwise] )</h3>
+		<h3>[method:null ellipse]( [page:Float x], [page:Float y], [page:Float xRadius], [page:Float yRadius], [page:Float startAngle], [page:Float endAngle], [page:Float clockwise], [page:Float rotation] )</h3>
 		<div>
 		x, y -- The center of the ellipse offset from the last call
 		xRadius -- The radius of the ellipse in the x axis
@@ -89,10 +89,11 @@
 		startAngle -- The start angle in radians
 		endAngle -- The end angle in radians
 		clockwise -- Sweep the ellipse clockwise. Defaults to false
+		rotation -- The rotation angle of the ellipse in radians, counterclockwise from the positive X axis. Optional, defaults to 0
 		</div>
 		<div>Draw an ellipse offset from the last call</div>
 
-		<h3>[method:null absellipse]( [page:Float x], [page:Float y], [page:Float xRadius], [page:Float yRadius], [page:Float startAngle], [page:Float endAngle], [page:Float clockwise] )</h3>
+		<h3>[method:null absellipse]( [page:Float x], [page:Float y], [page:Float xRadius], [page:Float yRadius], [page:Float startAngle], [page:Float endAngle], [page:Float clockwise], [page:Float rotation] )</h3>
 		<div>
 		x, y -- The absolute center of the ellipse
 		xRadius -- The radius of the ellipse in the x axis
@@ -100,6 +101,7 @@
 		startAngle -- The start angle in radians
 		endAngle -- The end angle in radians
 		clockwise -- Sweep the ellipse clockwise. Defaults to false
+		rotation -- The rotation angle of the ellipse in radians, counterclockwise from the positive X axis. Optional, defaults to 0
 		</div>
 		<div>Draw an ellipse absolutely positioned</div>
 

docs/api/extras/curves/EllipseCurve.html

@@ -21,7 +21,8 @@ var curve = new THREE.EllipseCurve(
 	0,  0,            // ax, aY
 	10, 10,           // xRadius, yRadius
 	0,  2 * Math.PI,  // aStartAngle, aEndAngle
-	false             // aClockwise
+	false,            // aClockwise
+	0                 // aRotation 
 );
 
 var path = new THREE.Path( curve.getPoints( 50 ) );
@@ -35,7 +36,7 @@ var ellipse = new THREE.Line( geometry, material );
 		<h2>Constructor</h2>
 
 
-		<h3>[name]( [page:Float aX], [page:Float aY], [page:Float xRadius], [page:Float yRadius], [page:Radians aStartAngle], [page:Radians aEndAngle], [page:Boolean aClockwise] )</h3>
+		<h3>[name]( [page:Float aX], [page:Float aY], [page:Float xRadius], [page:Float yRadius], [page:Radians aStartAngle], [page:Radians aEndAngle], [page:Boolean aClockwise], [page:Radians aRotation] )</h3>
 		<div>
 			aX – The X center of the ellipse<br/>
 			aY – The Y center of the ellipse<br/>
@@ -43,7 +44,8 @@ var ellipse = new THREE.Line( geometry, material );
 			yRadius – The radius of the ellipse in the y direction<br/>
 			aStartAngle – The start angle of the curve in radians starting from the middle right side<br/>
 			aEndAngle – The end angle of the curve in radians starting from the middle right side<br/>
-			aClockwise – Whether the ellipse is clockwise<br/><br/>
+			aClockwise – Whether the ellipse is clockwise<br/>
+			aRotation – The rotation angle of the ellipse in radians, counterclockwise from the positive X axis (optional)<br/><br/>
 
 			<strong>Note:</strong> When going clockwise it's best to set the start angle to (Math.PI * 2) and then work towards lower numbers.
 		</div>
@@ -58,6 +60,7 @@ var ellipse = new THREE.Line( geometry, material );
 		<h3>[property:Float aStartAngle]</h3>
 		<h3>[property:Float aEndAngle]</h3>
 		<h3>[property:Boolean aClockwise]</h3>
+		<h3>[property:Float aRotation]</h3>
 
 		<h2>Methods</h2>
 

src/extras/core/Path.js

@@ -153,24 +153,24 @@ THREE.Path.prototype.arc = function ( aX, aY, aRadius,
  };
 
 THREE.Path.prototype.ellipse = function ( aX, aY, xRadius, yRadius,
-									  aStartAngle, aEndAngle, aClockwise ) {
+									  aStartAngle, aEndAngle, aClockwise, aRotation ) {
 
 	var lastargs = this.actions[ this.actions.length - 1 ].args;
 	var x0 = lastargs[ lastargs.length - 2 ];
 	var y0 = lastargs[ lastargs.length - 1 ];
 
 	this.absellipse( aX + x0, aY + y0, xRadius, yRadius,
-		aStartAngle, aEndAngle, aClockwise );
+		aStartAngle, aEndAngle, aClockwise, aRotation );
 
  };
 
 
 THREE.Path.prototype.absellipse = function ( aX, aY, xRadius, yRadius,
-									  aStartAngle, aEndAngle, aClockwise ) {
+									  aStartAngle, aEndAngle, aClockwise, aRotation ) {
 
 	var args = Array.prototype.slice.call( arguments );
 	var curve = new THREE.EllipseCurve( aX, aY, xRadius, yRadius,
-									aStartAngle, aEndAngle, aClockwise );
+									aStartAngle, aEndAngle, aClockwise, aRotation );
 	this.curves.push( curve );
 
 	var lastPoint = curve.getPoint( 1 );
@@ -386,13 +386,22 @@ THREE.Path.prototype.getPoints = function( divisions, closedPath ) {
 				xRadius = args[ 2 ],
 				yRadius = args[ 3 ],
 				aStartAngle = args[ 4 ], aEndAngle = args[ 5 ],
-				aClockwise = !! args[ 6 ];
+				aClockwise = !! args[ 6 ],
+				aRotation = args[ 7 ] || 0;
 
 
 			var deltaAngle = aEndAngle - aStartAngle;
 			var angle;
 			var tdivisions = divisions * 2;
 
+			var cos, sin;
+			if ( aRotation !== 0 ) {
+		
+				cos = Math.cos( aRotation );
+				sin = Math.sin( aRotation );
+
+			}
+
 			for ( j = 1; j <= tdivisions; j ++ ) {
 
 				t = j / tdivisions;
@@ -408,6 +417,14 @@ THREE.Path.prototype.getPoints = function( divisions, closedPath ) {
 				tx = aX + xRadius * Math.cos( angle );
 				ty = aY + yRadius * Math.sin( angle );
 
+				if ( aRotation !== 0 ) {
+
+					// Rotate the point about the center of the ellipse.
+					tx = ( tx - aX ) * cos - ( ty - aY ) * sin + aX;
+					ty = ( tx - aX ) * sin + ( ty - aY ) * cos + aY;
+
+				}
+
 				//console.log('t', t, 'angle', angle, 'tx', tx, 'ty', ty);
 
 				points.push( new THREE.Vector2( tx, ty ) );

src/extras/curves/EllipseCurve.js

@@ -2,7 +2,7 @@
  *	Ellipse curve
  **************************************************************/
 
-THREE.EllipseCurve = function ( aX, aY, xRadius, yRadius, aStartAngle, aEndAngle, aClockwise ) {
+THREE.EllipseCurve = function ( aX, aY, xRadius, yRadius, aStartAngle, aEndAngle, aClockwise, aRotation ) {
 
 	this.aX = aX;
 	this.aY = aY;
@@ -14,6 +14,8 @@ THREE.EllipseCurve = function ( aX, aY, xRadius, yRadius, aStartAngle, aEndAngle
 	this.aEndAngle = aEndAngle;
 
 	this.aClockwise = aClockwise;
+	
+	this.aRotation = aRotation || 0;
 
 };
 
@@ -39,11 +41,20 @@ THREE.EllipseCurve.prototype.getPoint = function ( t ) {
 
 	}
 	
-	var vector = new THREE.Vector2();
+	var x = this.aX + this.xRadius * Math.cos( angle );
+	var y = this.aY + this.yRadius * Math.sin( angle );
+
+	if ( this.aRotation !== 0 ) {
+
+		var cos = Math.cos( this.aRotation );
+		var sin = Math.sin( this.aRotation );
 
-	vector.x = this.aX + this.xRadius * Math.cos( angle );
-	vector.y = this.aY + this.yRadius * Math.sin( angle );
+		// Rotate the point about the center of the ellipse.
+		x = ( x - this.aX ) * cos - ( y - this.aY ) * sin + this.aX;
+		y = ( x - this.aX ) * sin + ( y - this.aY ) * cos + this.aY;
+
+	}
 
-	return vector;
+	return new THREE.Vector2( x, y );
 
 };