Rabbit Creative

We’re going to use Ruby, Gosu and some trigonometry to create a graphical clock. Specifically, we will be programming the behavior and graphics for the second, minute and hour hands of an analog clock; the face of the clock will be represented by a simple graphic file (a .png, in our case). Following this exercise from start to finish should grant you a beginner’s understanding of some basic trigonometric concepts.

As we talk and learn about trigonometry, keep one thing in mind: trigonometry is easy. In fact, I’d argue that the portion of trigonometry that we will cover in this article can be understood intuitively. And soon you shall.

We begin our task by considering the following standard Cartesian coordinate system.

Place a circle with radius 1 at the center of the graph, such that the circle’s center is aligned with the origin of the coordinate plane. This circle is called the unit circle.

Let’s see this circle in greater detail by zooming in on it.

The line that we draw is called the terminal side of our angle. All angles are measure from their initial side (the x-axis) to their terminal side. The angle created in the diagram below is 45 degrees. The green line below intersects the circumference of our circle at a specific point on the coordinate system.

This is true for any line drawn from the origin through any position on the circumference of the circle, as illustrated in the next diagram.

The upshot of all this is that, no matter the angle, given a point along the circumference of a unit circle, we can construct a right triangle, like so.

The terminal side of our angle forms the hypotenuse of our right triangle, and is always equal to 1, as mentioned earlier. The point at which our line crosses the circumference of the circle actually gives us the lengths of the remaining two legs. The x-value of our point equals the length of the leg that lies along the x-axis (“side x”). The y-value of our point corresponds to the length of the leg that lies parallel to the y-axis (‘”side y”).

Armed with the lengths of each leg of our triangle, it’s time to learn about two trigonometrical functions, sine and cosine. These functions will allow us to extract the information necessary to draw objects moving at any angle we want. Both functions take as their argument an angle, but in practice this can be any real number.

Side x of the triangle indicates how much horizontal distance is composed within the hypotenuse. This value is given to us by the cosine function, abbreviated in algebra as “cos”. The y side of the triangle indicates how much vertical distance is composed within the hypotenuse. This value is given to us by the sine function, abbreviated in algebra as “sin”. Together, these values tell us the amount of vertical movement needed and the amount of horizontal movement needed to move at the desired angle for 1 unit. “1 unit” in our case is “1 pixel”.

The sine and cosine functions return numbers between -1 and 1, inclusive. Because of this, using sine and cosine gives us the core of what matters in all this — the direction of the angle without any significant distance (we can’t well represent 77% of one pixel!). Once we have our direction, we can multiply the factors given to us by sine and cosine functions to draw lines.