Lesson goal: Drawing circles with the mouse

Previous: Drawing lines with the mouse | Home | Next: The slope of a line

In a previous lesson, you learned how to use the mouse() function to draw lines between two mouse click positions. Let's keep going and see if can draw circles with the mouse. How about we'll use the first click as the center of the circle, and the second click as a point through which the circle should pass?

Remember that drawing a circle takes three numbers, as outlined in this lesson. The first two are the $(x,y)$ coordinate of the center of the circle. The third number is the radius of the circle. Since the second click position should be on the circle, the radius of the circle should be the distance between the two mouse-click points. Ah ha! A chance to use the distance formula.

Now you try. Run this code several times, clicking on two points. Create a simple drawing!

Type your code here:


See your results here:

This code will not run. You have to fix the d=sqrt( ) line to compute the distance between the two mouse-click points, $(x_1,y_1)$ and $(x_2,y_2)$. Next, you have to complete the circle( ) line to properly draw the circle centered at $(x_1,y_1)$ with a radius of $d$. Can you do it? Dismiss.
Show a friend, family member, or teacher what you've done!

Here is a share link to your code:

Does your code work? Want to run it on your iPhone?

Here's your code:

  1. Use [Control]-[C] (Windows) or [⌘]-[C] (MacOS) to copy your code.

  2. Paste it using [Control]-[V] (Windows) or [⌘]-[V] (MacOS) into this page

  3. Then click the "Use on iPhone" button that you'll see.