Bouncing Circle: Speed

Great! The circle is now flying along, except it flies too far and leaves our canvas. How could we make it bounce off the right wall and come back? We need it to change directions when it reaches the far right side. Hmmm.

We need to understand… speed!

How fast is the circle traveling?

image

👥💬  Discuss and try

  • The circle is traveling at 1 pixel per frame — can you make it go faster?
  • Can you make the circle travel backwards (right to left)?

To make our circle bounce back, we will need two things. The first will be a variable to remember the circle’s speed. The other piece will be a conditional statement to check if the y-position is greater than our canvas height.

Continue to the next page and find out how!

Next up...

Bouncing Circle: Make it bouncy, pt. 1