Example 0:
function setup() {
createCanvas(400, 400);
}
function draw() {
circle(30, 30, 20);
}
Example 1:
The color keeps changing because of the random fill function generating colors at random values.
The setup() function as the name suggests literally sets up the initial environment properties. In this example, it is setting up the 400x400 canvas.
Once setup() is initiated, the draw() function is a continuous function executing the code. Here it generates the ellipse with the random different colors.
Example 2:
The background(100) function is never being cleared since it is under setup(). As such, everytime the draw() function iterates, it creates a new ellipse without erasing previous one.
To fix things, we can simply take background(100) to the draw().
The speed of the circle moving is determined by the increments we set for x (in the line x = x + 1). Making the increment larger (for example x + 2) speeds up the movement and vice versa.
Example 4: