Steven Dutch, Natural and Applied Sciences,University
of Wisconsin - Green Bay

First-time Visitors: Please visitSite 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 the jsDraw2D.js package (free on line), and has not been prettied up to transform coordinate systems. 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):

Return to Computer Tips Index

Return to Professor Dutch's Home Page

*Created 29 November 2010, Last Update
07 January 2011
*

Not an official UW Green Bay site