First, let's review a little basic trigonometry. If 'r' is the radius of a circle, and 'a' is an angle, r x cos(a) is the x coordinate of a point on the perimeter of that circle, and r x sin(a) is the y coordinate of that same point.
We can draw a circle, by drawing a bunch of short lines from the point at the angle 'a' to the point at 'a + a small change in angle' all of the angles between 0 and Π radians. For example, if you choose "a small change in angle" to be Π/6, the circle would look like a hexagon.
Anyway, the point is to make the lines around the edge of the circle numerous enough that the circle looks smooth. Since our maximum resolution on a computer screen is a pixel, the edge of the circle will never be completely smooth, but it can get close enough to fool your eye into seeing a circle.
These are the principals I used to render a circle, using java script, and a bunch of HTML "div" tags, below.
I will use small rectangles, from a previous hub, to draw lines.
I will use line drawing, from a previous hub, to render the circle on the screen.
I will use coordinate mapping, also from a previous hub, so that I can make the simplifying assumption that I am drawing a unit circle (radius of one unit).
Programming is like that, small steps accumulate until you have enough tools to do something bigger.
There are many ways to interpolate the points on a curve in order to render the curve on graph, or simply to provide some other computer processable representation of the curve. The method I chose is obvious, and straight forward. I simply compute two adjacent points on the curve, and draw a line between them. This usually works well enough when the adjacent points are reasonably close on the screen. I did optimize this slightly. I compute an adjacent point further down the curve until I find two with different screen coordinates, before drawing a line.
The actual formula for the path requires me to recall some trigonometry. The projection of an angle along the x axis is cos(x), and sin(x) for the projection onto the y axis.
With that, here goes!
Links to previous hubs in this series
Computer programming constantly uses encapsulation; someone else figures out how to do something, and you just use it without having to worry about the details. Functions are one mechanism for encapsulation,...
More by this Author
- 0Chinese idioms - Suyu and Chengyu - explained, Chengyu are a cultural phenomena particular to Chinese
A brief explanation of different kinds of Chinese idioms written for non-Chinese speakers.
x squared, integrated, differentiated and re-integrated. This hub builds on work done in previous hubs and uses some powerful techniques from both mathematics and programming. If you recall calculus, derivatives and...
A brief introduction to some techniques and principals for leaving the dock under sail in a sailboat.
No comments yet.