Bounce Coding - Step 1 - Ellipse

If this is your first time reading about Bounce Coding, I recommend you start from the beginning.

Draw an ellipse

The first step to making balls bounce around the screen is to first draw a ball! We'll use the ellipse function to do the drawing. There are four pieces of information that we need to draw an ellipse: the x coordinate of the center point of the ellipse, the y coordinate of the center point of the ellipse, the width of the ellipse and the height of the ellipse. We provide these four pieces of information in the form of a list of arguments that we pass to the ellipse function. By default, the center of the ellipse is at (200,200) and the width and height are both 40 to make it a circle with radius 20. Try modifying the numbers to see how they affect how the ellipse is drawn.

Things to note

  • Notice how the upper left corner is the origin of our coordinate system, (0,0).
  • The positive x-axis goes to the right as a standard coordinate system does, but the positive y-axis goes down the screen. In your math class, you may be used to y going up, but in programming the y-axis is often down.
  • To get a circle, the width and height need to be the same.
  • For more on drawing basics, check out Khan Academy's tutorial.