Drawing Rotated Ellipses Using a Shear Transformation

This is a demonstration of using a shear transformation to draw rotated ellipses.

It is based on a paper by Nathan Dinsmore entitled "Converting a Rotated Ellipse to a Sheared Axis-aligned Ellipse" - March 1, 2015.

Choose the lengths of the semi-axes and the angle of rotation

The blue ellipses are generated using scaling and rotation of a circle.

The Draw button generates a red axis-aligned ellipse, but does not apply the required shear transformation.

The Shear button animates the shear transformation, the final display showing the sheared axis-aligned ellipse.

If the alt-key is pressed (or the Alt-key checkbox is checked) while using the Draw button or the Shear button, the left-hand ellipse is rotated using three shear transformations.

Log Output

phi is listed in radians in the log output.

Extract of code for the shear method

t0 = Math.atan2(-b * Math.tan(phi), a);
x0 = a * Math.cos(t0) * Math.cos(phi) - b * Math.sin(t0) * Math.sin(phi);
y0 = a * Math.cos(t0) * Math.sin(phi) + b * Math.sin(t0) * Math.cos(phi);
a1 = Math.abs(x0);
b1 = a * b / a1;
lambda = y0 / x0;
ctx.transform(1, lambda, 0, 1, 0, 0); // shear transform
drawEllipse(a1, b1, 0);               // without rotation

Extract of code to perform rotation using three shears

alpha =  Math.tan(phi / 2);
beta  = -Math.sin(phi);
ctx.transform(1, alpha, 0, 1, 0, 0);	// shear transform
ctx.transform(1, 0,  beta, 1, 0, 0);	// shear transform
ctx.transform(1, alpha, 0, 1, 0, 0);	// shear transform
drawEllipse(a, b, 0);			// without rotation

See A Fast Algorithm for General Raster Rotation by Alan W. Paeth.

Monday 26 August, 2019