Drawing Circles with Sine & Cosine.

An illustration of how sine and cosine combine to draw a circle.

The blue line shows a sine wave travelling along the x axis. For values of i between 0 and τ, the wave starts in the middle left of the canvas, sweeps to the top, then the bottom and returns to the middle at the right edge - a classic sine wave shape.

The red line shows how (for the same values of i, and when plotted on a vertical instead of a horizontal axis) a cosine wave starts at the top left corner of the canvas, sweeps across to the right edge and then back to the bottom left corner.

The purple line combines the x position of the cosine wave, with the y position of the sine wave, and thus naturally draws a circle.

This demo uses the HTML Canvas, CSS and JavaScript.