cos and sin

Radians #

We need to start by naming the length of the unit circle.

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.

cos and sin #

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. 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

be the circle of radius $r$ centered at the origin. We have

so can parametrize this by

Next, let's consider circles centered at other points. For a point $P\in\AffR2$ and a radius $r>0,$ let

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,

Therefore, a parametrization of $\cl S{S^1}(P, r)$ is given by

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:$

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

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:

Here's some code to try that out:

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 (
    <main>
      {items.map((props) => (
        <Moving key={JSON.stringify(props)} {...props} />
      ))}
    </main>
  );
}

// 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<HTMLDivElement>(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 (
    <div className="w-min text-3xl absolute" ref={ref}>
      {children}
    </div>
  );
}

/** 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.

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).$

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,

Therefore, we have