# ETOOBUSY đźš€ minimal blogging for the impatient

# Ellipses (for SVG): parameter and angles

**TL;DR**

Donâ€™t even get me started on ellipses in SVG.

After tacking the bounding boxes for segments and BĂ©zier curves, our
last path section type is the *ellipse* (well, an arc of ellipse,
actually). Before going to the code, we have to take a look at the math
though, and weâ€™ll start here.

Letâ€™s start saying that itâ€™s addressed in the proposed SVG2
specification, in particular Appendix B. So, you actually donâ€™t need
to look any further for the maths, unless you want to *understand* it.

There can be multiple ways to represent an ellipse, and itâ€™s convenient to know them. Itâ€™s useful to remember that an ellipse is a sort of a circle, but instead of having one single radius, it has two: one in the $X$ direction, another one in the $Y$ direction. We will call them $r_x$ and $r_y$.

I now this is pretty *vague* at this point, but it will become clearer
when we will look at the role that these two parameters play in the
equations.

Note: we will only consider ellipses in the *Real plane*.

# Implicit representation

An ellipse centered in the origin can be described as the set of points $\mathbf{P} = (P_x, P_y) = (x, y)$ that satisfy the following equation:

\[\left(\frac{x}{r_x}\right)^2 + \left(\frac{y}{r_y}\right)^2 = 1\\ x \in \mathbb{R}, y \in \mathbb{R}\]In a sense, this is the equation of a unitary circle in the plane
obtained by properly stretching the two coordinates according to $r_x$
and $r_y$, which is why they are called *radii*.

This equation can be easily generalized to set its center on an arbitrary point $\mathbf{C} = (C_x, C_y)$ of the plane:

\[\left(\frac{x - C_x}{r_x}\right)^2 + \left(\frac{y - C_y}{r_y}\right)^2 = 1\\\]We might also want to see how the equations change when *rotating* the
ellipse, but we will not go down this path here.

# Explicit representation

The implicit equation in the previous section can be used to get an
*explicit form* where we can express $y$ as a function of $x$. Well,
actually as *two* functions of $x$, because the squaring is equally
satisfied both by positive and negative values for $y$:

# Parametric representation

Both coordinates for a point on the ellipse (centered on the origin) can
be expressed in terms of a third *independent parameter* $t$ as follows:

While $t$ can be considered an *angle*, it is **not** the angle between
the vector $\mathbf{v} = \mathbf{P} - \mathbf{O} = (x(t), y(t))$ (with $\mathbf{O}$
representing the origin of the coordinate axes) and the unitary vector
of the $X$ axis (i.e. vector $(1, 0)$). To see this, letâ€™s consider the
following figure, that shows the *polar representation* for the point $\mathbf{P}$:

The graphic was produced online at desmos.com, with some additional labeling (see original here).

We can easily see that:

\[P_x(t) = x(t) = r_x \cdot cos(t) = R(\theta) \cdot cos(\theta) \\ P_y(t) = y(t) = r_y \cdot sin(t) = R(\theta) \cdot sin(\theta) \\ t \in [0, 2\pi[, \theta \in [0, 2\pi[\]so, dividing the two equations:

\[\frac{r_y}{r_y} \cdot tan(t) = tan(\theta) \\\]i.e. $t$ is not the same as $\theta$ for a *non-circular ellipse* (that is,
one where $r_x \ne r_y$).

As a matter of fact, remember that the ellipse is actually a unit circle
that is enlarged/squashed differently in the $X$ and $Y$ directions
thanks to $r_x$ and $r_y$? The parameter $t$ happens to be the angle of
the image of point $\mathbf{P}$ on that unit circle (this is why
parameters $\theta_1$ and $\theta_2$ in Appendix B are defined as
*[â€¦]angle of the elliptical arc prior to the stretch [â€¦]*).

Itâ€™s easy to move the ellipseâ€™s center to an arbitrary point $\mathbf{C} = (C_x, C_y)$ and rotate the ellipse counter-clockwise by an angle $\phi$:

\[x(t) = C_x + cos(\phi) \cdot r_x \cdot cos(t) - sin(\phi) \cdot r_y \cdot sin(t) \\ y(t) = C_y + sin(\phi) \cdot r_x \cdot cos(t) + cos(\phi) \cdot r_y \cdot sin(t)\]# Enough for nowâ€¦

Weâ€™ve seen three ways of representing an ellipse on the $XY$ planeâ€¦ shall we call it a day?

*Comments? Octodon, Twitter, GitHub, Reddit, or drop me a line!*