If this is your first time reading about Bounce Coding, I recommend you start from the beginning.
Animation
To make a circle move we need to draw it over and over again, moving it a little bit each time. In our live coding environment, if we define a function called draw, it will automatically be called for us about 30 times a second. We can use this function to animate our circle. We have our circle function from the last step, along with three variables x, y and r that represent the center point and radius of our circle. In the draw function, we set the background to white (255, 255, 255 represents the color white), which clears the screen, then we add one to the x position of the circle and then we redraw the circle.
Things to note
- Notice how the circle goes off the screen. We'll learn how to fix this in the next step, but you can reset the circle by changing the x variable.
- Try taking out the background line. This will stop clearing the screen, which can give you some interesting results!
- For more information on animation, check out Khan Academy's tutorial.