EZ Math Movie, Tutorials, Designs, The Circle

What is a circle?

A circle is a set of points equidistant from a point called the center of the circle. Here our center is at the origin, and our drawing will form a circle around it.

The (x, y) points on the circle can be calculated using trigonometry. These coordinates are calculated using the angle and the radius along with the sine and cosine trig functions. Here is a diagram showing the mathematics:

Calculation for (x, y) circle point coordinates.

The example before loop code

Remember, this code always runs only once. Here we do all the setup work for the animation:

The example loop code

The loop code will run again and again. Here is what happens every cycle in this classic EZ Math Movie animation:

The example program

Angle measurement: Degrees Radians

Go on input

Sorry, apparently this browser does not support HTML 5 canvas tag graphics.

Edit: Runtime          View: Starter Suggestion

To runtime:


Editor width: Normal Wide








You can make the circle smaller or larger by changing the value for the radius. This would be done in the before loop code. For example, this would make the circle larger:

radius = 8;

You could make the number of points more or less by changing the way that the angle increases. For example, if you incremented angle by 5 degrees, rather than by 10 degrees, you would get twice as many points. You would do this in the loop code:

angle += 5;

You could draw half a circle by stopping at an angle of 180 degrees. In the loop code:

if(angle > 180)


Next tutorial: Drawing functions, Point by point

All contents of EZ Math Movie are copyrighted: Copyright 2011, Edward A. Zobel. All rights reserved.

Other sites you may find interesting

Zona Land Education Like Math and Physics?

Zona Land Education offers explanations, diagrams, and animations on these topics.
And it is all presented in a clear and casual manner.

Here is the link: zonalandeducation.com

EZ Programing Demos Want to learn about programing computers?

EZ Programing Demos has an animated, slow motion, interactive programing language demonstrator.
The site presents basic ideas at a beginner's level.

Here is the link: ezprogramingdemos.com

Custom Search