Steven Dutch, Natural and Applied Sciences, University
of Wisconsin - Green Bay
First-time Visitors: Please visit Site Map and Disclaimer.
Use "Back" to return here.
Far too many drawing programs seem to think the only ellipses people will ever need to draw have horizontal and vertical axes. Judging from the number of inquiries I've seen on support sites, a lot of people want help with this.
Constructing oblique ellipses is not hard, but it does take a modicum of math. Start with the parametric equations for an ellipse:
x = a*cos(t) y = b*sin(t)
t is a parameter that varies from 0 to 2 pi. It does not have any simple geometrical meaning as an angle unless a = b, that is, the ellipse is a circle.
To visualize this quickly, create a spreadsheet with cells for a and b, and a column where t increases from 0 to 6.29 in increments of 0.1. Create columns for x and y and create an x-y plot.
So if you want to rotate the ellipse by an angle theta, the obvious temptation is to write:
x = a*cos(t + theta) y = b*sin(t + theta)
And you'll find that nothing happens. The ellipse looks the same as always. Mathematically, all that happens is you start drawing the ellipse at a different point on its circumference.
To do a true rotation, you'll have to rotate the coordinate system.
If x and y are your original coordinates, the values after rotating by an angle theta are:
x' = x*cos(theta) - y*sin(theta) y' = x*sin(theta) + y*cos(theta)
Now let's plug in the x and y values from our parametric equations to get:
x' = a*cos(t)*cos(theta) - b*sin(t)*sin(theta) y' = a*cos(t)*sin(theta) + b*sin(t)*cos(theta)
Below is a small Javascript illustration. Input the desired parameters to get the ellipse. This uses HTML5 and may not work in older browsers. Raw coordinates are measured left to right and top to bottom, so the rotation sense of theta is clockwise. View Page Source to see the code, which you may feel free to use or adapt as needed.
To draw more than one ellipse, simply enter the data and click "Press to Accept" as many times as desired. To Erase the drawing, click "Clear Canvas."
Length of Major Axis (Pixels); 200-300 Recommended:
Length of Minor Axis (Pixels); 100-200 Recommended:
Rotation Angle (Degrees) counterclockwise from +x axis:
Return to Computer Tips Index
Return to Professor Dutch's Home Page
Created 07 February 2012, Last Update 07 February 2012
Not an official UW Green Bay site