This is a special function that is called whenever the user clicks on either mouse buttons.

This if statement checks whether the user has made a left click with the mouse

The for loop will execute the code based on how many circles we have!

So if we have 5 circles it will run 5 times, if 0 circles then it runs 0 times.

This function will now draw each circle that is inside of our circles array.

Lets make the draw() function and call the following inside of it

REMOVE ellipse(mouseX, mouseY, 50, 50)

THEN add in circles.push({ ..

this will add a new circle to our circles array every time we left click on the canvas

This code makes the property r equal to a random number from 0 to 255

Now we will color each circle using their r, g and b properties

add the xspd and yspd properties in mousePressed

for (var circle of circles) is another way of going through every circle in our circles array

We change our circle.x & circle.y positions by their speeds!

this will execute the code we just wrote now

if a circle touches the right edge rebound

This now means: if the circle touches the right edge OR the left edge of the screen REBOUND

This will stand for the opacity of our circles. If a circles opacity is 255 it is solid, as we decrease it the circle will become more see through.

Add circles[i].o inside of fill( )

The if statement checks every other execution of the draw function.
So this function will only be called half of time in draw()

This will remove circles whose opacity or o is 0