This is Words and Buttons Online — a collection of interactive #tutorials, #demos, and #quizzes about #mathematics, #algorithms and #programming.

Sine and cosine

Anode and cathode, procaryote and eucaryote, epimorphism and monomorphism. For every pair, I think I know what the words mean from school but I can't always tell one from another. I can always tell sine from cosine but I didn't learn them at school. My father taught me.

He was not an educator but an engineer. He didn't tell me where these words come from, he didn't tell me about Greeks or Sumerians. He didn't even tell me about that circle thingy with a triangle. Nothing that math teachers somehow deem important. He only told me what do these functions look like and how to make them into other functions. I played with them on a computer for a while and that was it. Every piece of trigonometry I learned from then started to make sense.

Sine function

This is sine.

It's a continuous function that runs through all the x-axis. On the y-axis, it is constrained between -1 and 1.

Its most interesting values are:

It is smooth. It grows and declines but the magnitude of these changes is continuos.

It is periodic meaning that it consists of an infinite number of equal pieces 2Π-long.

It is antisymmetric meaning that it's x-negative half is exactly the opposite of the x-positive one: f(-x) = -f(x).

In 0 it grows exactly like y = x. For small x, we can even use f(x) = x as an approximation of sin(x).

It's all pretty easy to remember since it also looks like S.

Cosine function

This is cosine.

It is the sine's older cousin. It looks exactly like the sine but it runs Π/2 ahead of it.

It has the same interesting values but in reverse order:

Unlike the sine, it's symmetric. Its x-negative half is the mirrored copy of x-positive half: f(-x) = +f(x).

Around 0, it behaves like y = 1.

It's also easy to remember since it looks like C.

The moving illustrations you see are all made with sines and cosines. And now I'll show you how.

Rotation

Rotation is a spatial transformation. On a plane, this is a function that turns a pair of coordinates into another pair of coordinates. (x, y) → (x_r, y_r). Of course, it can be written down as a pair of functions used simultaneously.

The formula for rotation on a in radians is this:

x_r = -x cos(a) + y sin(a)
y_r = x sin(a) + y cos(a)

On this plot, I wanted the arrow to run clockwise so I negated the a. But you can do the same by altering your formula. And yes, it's your formula now, the code below is changeable, you can change things there and the plot will react.

“Natural” movement

If something starts moving gradually growing speed from the full stop and then stops completely by gradually losing speed, we consider its movement natural.

On the plot, the vertical line speeds up from 0 and stops smoothly at the end. That's because its movement is dictated by f(x) — the function that starts flat and ends flat, and we use the sine for that, and the sine itself is smooth.

Curves

A parametric curve is a function of a parameter resulting in a pair of coordinates: a → (x, y).

Of course, it's the same as a pair of separate functions for each coordinate.

TL&DR

Sine is like S and cosine is like C.

You can make things like O or 8 by using them both.