Example 0:

https://editor.p5js.org/clarexuepkitty/full/ILV8ZJgkV

Example 1:

https://editor.p5js.org/clarexuepkitty/full/DBpBJqSyq

Why does the color keep changing:

The draw() function continuously runs here. It chooses a new random color to present each time it runs using the fill() function. What do the setup() and draw() functions do?

The setup() function makes the canvas in 400*400 pixels. All the drawings happen on the canvas. So once the size and the color of the background is decided, the following program starts here.

The draw() function runs then it draws on the screen from scratch.

Example 2:

https://editor.p5js.org/clarexuepkitty/full/Kw_8TUOIA

Why does the circle that moves leave a ‘trail’? Try to remove this trail

The circle moves with a “trail” because the background function only appears once in the setup(), so the canvas is set to gray only at the beginning. Then in the draw(), the ellipse is drawn at a new position of x every time, while the previous drawings of ellipses remain. I added the background(100) to the draw() so that it will redraw the background every time, so the previous drawings of ellipses will be replaced then we won’t see the trail.

Try changing the speed of the circle as it moves across the screen

I increased the number for x = x+ 1, so now it is +7. causing the ellipse to move on the x-axis horizontally faster.

Example 3:

https://editor.p5js.org/clarexuepkitty/full/GudRXa7kr

Example 4: