:::yell $\cos$ and $\sin$ are what you use when you want to draw a circle, or animate something moving in a circle. ::: In the post on [unit vectors](./unit-vectors), we defined the unit $n$-sphere and found a parametrization of it. In the [previous post](./arclength), we encountered the **arclength parametrization**, which for most purposes is more convenient than other parametrizations. In this post, we discuss the arclength parametrization of the unit circle $\cl{S}{S^1}$, which is given by the $\cos$ and $\sin$ functions. This will be useful for drawing things along a circle or animating something that's rotating. ## Radians We need to start by naming the length of the unit circle. :::definition We write $\Twopi$ (pronounced either "circle", "var-pi", or "two-pi") for the arclength, or :dfn[circumference], of the unit circle \[ \cl{S}{S^1} \Defeq \{(x, y) \in \VecR2 \mid x^2 + y^2 = 1 \}. \] In the [exercises](./arclength#exercises) of the previous unit, you calculated that $\Twopi\approx6.28\dotsc$ ::: By scaling, it follows that the circumference of a circle of radius $r$ is given by $\Twopi r$. For example, the circumference of a circle of radius $4$ is $4\Twopi\approx25.13\dots$. Equivalently, we could define $\Twopi$ as the ratio of _any_ circle's circumference to its radius. :::remark You may be more used to the constant $\pi=\Twopi/2\approx3.14\dots$, which is the ratio of a circle's circumference to its **diameter** (twice the radius). It turns out the ancient Greeks made a mistake in defining $\pi$: while diameter is relevant in real-life situations, mathematically it's much more convenient to index circles by their radius rather than their diameter. This is not something to get too worked up about, however: although $\Twopi$ is an important number, numbers are not that important in mathematics. Many sources use the letter $\tau$ instead of $\varpi$. This is patently absurd: on top of having completely the wrong vibes to be a circle constant, $\tau$ is a B-tier Greek letter while $\Twopi$ is an S-tier constant. ::: ## cos and sin :::definition We define the functions $\cos$ and $\sin$ such that \[ \ivec{\cos\theta,\, \sin\theta}, \qquad \theta\in \ClsdIntvl0{\twopi} \] is the arclength parametrization of the unit circle $\cl{S}{S^1}$, starting at the point $\ivec{1,0}$ and traveling counterclockwise. Equivalently, $\ivec{\cos\theta,\sin\theta}$ is the $\ivec{x,y}$-coordinates of the point at angle $\theta$ from the origin. ::: Here's a graph to experiment with that. This completely defines $\cos$ and $\sin$, but doesn't tell us how to compute them. However, in just a few posts we'll derive an algorithm to compute these. You may be used to a definition of $\cos$ and $\sin$ in terms of ratios of right-angle triangles; I'll review that interpretation [below](#triangle-interpretation). That interpretation is often useful, but it doesn't work for angles larger than $90^\circ$. ## Animation Let's say more about animation. So far, $\cos$ and $\sin$ tell us how to parametrize the unit circle, i.e. the circle of radius $1$ centered at the origin $\O=(0,0)$. What about other circles? Let's do this in steps. First, let \[ \cl S{S^1}(r) = \{v\in\VecR2 \mathrel: \|v\| = r \} \] be the circle of radius $r$ centered at the origin. We have \[\begin{align*} \cl S{S^1}(r) &\phantom:= r \cl S{S^1}\\ &\Defeq \{rv \mid v\in \cl S{S^1}\} \end{align*}\] so can parametrize this by \[ r\ivec{\cos t,\sin t} = \ivec{r\cos t,r\sin t}, \qquad t\in\CIntvl0\twopi. \] Next, let's consider circles centered at other points. For a point $P\in\AffR2$ and a radius $r>0$, let \[ \cl S{S^1}(P,r) \Defeq \{Q \in \AffR2 \colon \|P-Q\| = r \} \] be the circle of radius $r$ centered at $P$. Note that $\cl S{S^1}(r)$ lives in the _vector_ space $\VecR2$, while $\cl S{S^1}(P,r)$ lives in the _affine_ space $\AffR2$; recall that "the origin" is a feature of _vector_ space. We can get $\cl S{S^1}(P, r)$ by **translating** $\cl S{S^1}(r)$ to the point $P$: in other words, \[\begin{align*} \cl S{S^1}(P, r) &\phantom:= P + \cl S{S^1}(r)\\ &\Defeq \{P + v \mid v \in \cl S{S^1}(r) \} \end{align*}\] Therefore, a parametrization of $\cl S{S^1}(P, r)$ is given by \[ P+r\ivec{\cos t,\sin t} = \ipt{\cl{p}{p_1}+r\cos t,\cl{p}{p_2}+r\sin t}, \qquad t\in\CIntvl0\twopi, \] where $P=\ipt{\cl{p}{p_1},\cl{p}{p_2}}$. That does everything we need if we want to draw a circle (or a part of a circle). Often though, we want to **animate** something moving in a circle. This means we need to further take into account its **speed** (or **angular velocity**) and its **starting position**. By default, $(\cos t,\sin t)$ starts at $(1,0)$ and goes around the circle one every $\Twopi$ units of time, going counterclockwise. To have it start at a different angle $\cl{θ}{\theta_0}$, we just add that on to $t$: \[ \ivec{\cos(\cl{θ}{\theta_0} + t), \sin(\cl{θ}{\theta_0} + t)} \] To change the speed, we multiply $t$ by a constant. For example, if $t$ is measured in seconds and we want to go around the circle once every two seconds, we'd use \[ \ivec{\cos\left(\cl{θ}{\theta_0}+\frac{\Twopi t}2\right), \sin\left(\cl{θ}{\theta_0}+\frac{\Twopi t}2\right)} \] since going around the circle once every two seconds is the same as going halfway around the circle every second. We can also scale by a negative number to go clockwise instead of counter-clockwise. To summarize: :::proposition The parametrization of a particle travelling: - on a circle of radius $r$ - centered at the point $P=\ipt{\cl{p}{p_1},\cl{p}{p_2}}$ - starting from angle $\cl{θ}{\theta_0}$ - making $k$ (counter-clockwise) rotations per unit of time $t$ is given by \[ P + r\ivec{\cos(\cl{θ}{\theta_0}+\Twopi kt), \sin(\cl{θ}{\theta_0}+{\Twopi}kt)} \] which is the same as \[ \ipt{\cl{p}{p_1}+r\cos(\cl{θ}{\theta_0}+\Twopi kt), \cl{p}{p_2}+r\sin(\cl{θ}{\theta_0}+\Twopi kt)}. \] ::: Here's some code to try that out: ```tsx // !interactive import { useEffect, useRef } from "react"; /** Point in 2-dimensional (affine) space */ type Pt2 = [number, number]; type Circle = { /** Measured in [0, 100] x [0, 100] and mapped onto the actual screen later */ center: Pt2; radius: number; }; const SECONDS = 1000, MINUTES = 60 * SECONDS; const CIRCLE = 2 * Math.PI; // scene setup export default function Graph() { const items: MovingProps[] = [ { children: "👻", circle: { center: [50, 50], radius: 25, }, rpm: 45, }, { children: "😈", circle: { center: [25, 25], radius: 20, }, // negative to go clockwise rpm: -30, }, { children: "😍", circle: { center: [75, 40], radius: 10, }, rpm: 15, }, { children: "😡", circle: { center: [30, 60], radius: 20, }, rpm: -60, }, { children: "😡", circle: { center: [70, 60], radius: 20, }, // so it will collide with the other one initialAngle: CIRCLE / 2, rpm: 60, }, ]; return (

{items.map((props) => ( ))}

); } // moving divs interface MovingProps { children: React.ReactNode; circle: Circle; /** * Initial angle. * @default 0 */ initialAngle?: number; /** Revolutions per minute. */ rpm: number; } function Moving({ children, circle, initialAngle = 0, rpm }: MovingProp) { const ref = useRef(null); useEffect(() => { const start = performance.now(); let cancelId: number; // update handler const update = (t: number) => { if (!ref.current) return; const angle = initialAngle + ((CIRCLE * (t - start)) / MINUTES) * rpm; const [x, y] = toScreenCoords(getCoords(circle, angle)); // we want to position the center rather than the top-left corner const rect = ref.current.getBoundingClientRect(); ref.current.style.transform = `translate( ${x - rect.width / 2}px, ${y - rect.height / 2}px )`; cancelId = requestAnimationFrame(update); }; // start animation loop cancelId = requestAnimationFrame(update); // cancel animation loop on unmount return () => cancelAnimationFrame(cancelId); }, []); return (

{children}

); } /** Get the coordinates of a point on a circle. */ function getCoords(circle: Circle, angle: number): Pt2 { const { center: [cx, cy], radius: r, } = circle; // we subtract in the second coordinate because screen y-axis // goes down while math y-axis goes up return [cx + r * Math.cos(angle), cy - r * Math.sin(angle)]; } /** Map [0, 100] x [0, 100] onto the actual screen dimensions */ function toScreenCoords([x, y]: Pt2) { return [(window.innerWidth * x) / 100, (window.innerHeight * y) / 100]; } ``` ## Triangle interpretation You may be more used to a definition of $\cos$ and $\sin$ in terms of ratios of angles of right-angle triangles.

\begin{aligned} \cos\theta &= \frac{\text{adjacent}}{\text{hypotenuse}}\\ \sin\theta &= \frac{\text{opposite}}{\text{hypotenuse}} \end{aligned}

This perspective is often useful, but it doesn't work for angles larger than $90^\circ$. How does this relate to coordinates of points on the unit circle? First, note that for any point on a circle, we can form a right-angle triangle whose hypotenuse is the line segment from the center of the circle to that point (see below). In the case of the unit circle, ## Special angles Although we don't yet have a general algorithm for computing $\cos$ and $\sin$, we can read off the values of the coordinates of East $(0)$, North $(90^\circ=\frac\Twopi4)$, West $(180^\circ=\frac\Twopi2)$, and South $(270^\circ=\frac{3\Twopi}4$). \[\begin{align*} \ivec{\cos0,\,\sin0} &= \ivec{1,0} & \ivec{\cos\frac\Twopi2,\,\sin\frac\Twopi2} &= \ivec{-1,\, 0}\\[.5em] \ivec{\cos\frac\Twopi4,\,\sin\frac\Twopi4} &= \ivec{0,\, 1} & \ivec{\cos\frac{3\Twopi}4,\,\sin\frac{3\Twopi}4} &= \ivec{0,\, -1} \end{align*}\] With a bit more work, we can calculate the coordinates of the point at $45^\circ$, using the triangle interpretation above. Since the angles of a triangle add up to $180^\circ=\Twopi/2$, the remaining angle is also $45^\circ=\Twopi/8$. This implies that the two side lengths $\cos45^\circ$ and $\sin45^\circ$ are equal; let's call that $x$. By the Pythagorean theorem, \[\begin{align*} \cos(45^\circ)^2 + \sin(45^\circ)^2 &= 1\\ 2x^2 &= 1\\ x^2 &= \frac12\\ x &= \sqrt{\frac12}\\ &= \frac1{\sqrt2}\\ &= \frac{\sqrt2}2 \end{align*}\] Therefore, we have \[ \cos45^\circ = \sin45^\circ = \frac{\sqrt2}2. \] These are some old videos on $\cos$ and $\sin$. 1. Find $\cos$ and $\sin$ of $30^\circ$ and $60^\circ$. 2. Consider the following diagram: ::embed[{epiplexis-content}/gng/02-trigonometry/04-cos-sin/exc-minus]{aspect-ratio=2.5 source inline} By calculating the length of the green line segment in two different ways, establish the identity $$ \begin{equation}\htmlId{eq-sin-pyth}{} 2\sin\left(\frac{\alpha - \beta}2\right) = \pm\sqrt{ (\cos\alpha - \cos\beta)^2 + (\sin\alpha - \sin\beta)^2 } \end{equation} $$ :::popup{trigger=Solution} The horizontal distance between the two points is $(\cos\alpha-\cos\beta)$, while the vertical distance is $(\sin\alpha-\sin\beta)$. Applying the Pythagorean theorem, we see that the length of the green segment is $$ (\cos\alpha-\cos\beta)^2 + (\sin\alpha-\sin\beta)^2. $$ ::embed[{epiplexis-content}/gng/02-trigonometry/04-cos-sin/exc-minus?rightAngle]{aspect-ratio=2.5 inline} On the other hand, we can get a right angle triangle by drawing a line from the center of the circle to the midpoint of the green line: ::embed[{epiplexis-content}/gng/02-trigonometry/04-cos-sin/exc-minus?bisect]{aspect-ratio=2.5 inline} Now the angle between the red line and the dashed green line is $\frac{\alpha-\beta}2$, and so the side opposite to it has length $\sin\left(\frac{\alpha-\beta}2\right)$. But this side is exactly half of the length of the green line, so the green line has length $$ 2\sin\left(\frac{\alpha-\beta}2\right). $$ Putting these together, we have $$ 2\sin\left(\frac{\alpha-\beta}2\right) = (\cos\alpha-\cos\beta)^2 + (\sin\alpha-\sin\beta)^2 $$ ::: 3. Consider a regular $n$-gon inscribed in a circle of radius 1: ::embed[{epiplexis-content}/gng/02-trigonometry/04-cos-sin/exc-polygon]{aspect-ratio=2 source inline} 1. Show that its perimeter is given by $2n\sin\frac\Twopi{2n}$. :::popup{trigger=Hint} Use the angle-bisection trick from the previous exercise. ::: 2. Show that its area is given by $\frac n2\sin\frac\Twopi n$. 4. Once we've established [$(1)$](#eq-sin-pyth), we can derive all the usual trigonometric identities using algebraic manipulations, with no further geometric insight required. 1. Use [$(1)$](#eq-sin-pyth) to derive the "half-angle formulas" $$ \begin{align} \htmlId{eq-cos-half}{}\cos(\theta/2) &= \pm\sqrt{\frac{1+\cos\theta}2}\\[1em] \htmlId{eq-sin-half}{}\sin(\theta/2) &= \pm\sqrt{\frac{1-\cos\theta}2} \end{align} $$ 2. Use [$(2)$](#eq-cos-half) and [$(3)$](#eq-sin-half) to derive the "double-angle formulas" $$ \begin{align*} \cos(2\theta) &= \cos^2(\theta)-\sin^2(\theta)\\ &= 2\cos^2(\theta) - 1\\ &= 1 - 2\sin^2(\theta)\\ \sin(2\theta) &= 2\cos(\theta)\sin(\theta) \end{align*} $$ 3. Derive the "angle-difference" formulas $$ \begin{align*} \cos(\alpha-\beta) &= \cos(\alpha)\cos(\beta) + \sin(\alpha)\sin(\beta)\\ \sin(\alpha-\beta) &= \sin(\alpha)\cos(\beta) - \cos(\alpha)\sin(\beta) \end{align*} $$ and the "angle-sum" formulas $$ \begin{align*} \cos(\alpha+\beta) &= \cos(\alpha)\cos(\beta) - \sin(\alpha)\sin(\beta)\\ \sin(\alpha+\beta) &= \sin(\alpha)\cos(\beta) + \cos(\alpha)\sin(\beta) \end{align*} $$ These are sometimes stated in combined form $$ \begin{align*} \cos(\alpha\pm\beta) &= \cos(\alpha)\cos(\beta) \mp \sin(\alpha)\sin(\beta)\\ \sin(\alpha\pm\beta) &= \sin(\alpha)\cos(\beta) \pm \cos(\alpha)\sin\beta) \end{align*} $$ This is not the best way to derive these formulas, but it works; the point is mainly that you can get them from each other using pure algebra. We'll see a more enlightening explanation of and in a future lesson, and then the rest will follow by algebra in a similar way (in the opposite order as you derived them here).

Trigonometry

Distance #

Trig functions #

Distance

Trig functions