Adding animations with Javascript

Draw a circle

We'll see more and more functions don't be afraid of them. They're here to help! In the following example there is:

• ellipse (draw an ellipse/circle at your mouse-x-position, mouse-y-position, with-width-in-pixels, with-height-in pixels)... where X and width are horizontal, Y and height are vertical.

Click on play to get started. Move your mouse over the preview. Try changing the values (you can also replace mouseX and mouseY with numbers).

Drawing circles without a trail

How about if we added a background before every animation (draw function)? Would the circle trail disappear? Let's try resetting the view before each circle is drawn. Try it out! If you feel super advanced try and change the background color too.

Hint: The order in which you run things matter.

For the advanced try changing the color of the circle with the function fill.