Fading Circles

Step 1
We are going to make the following project
Step 2
Create the mousePressed function()

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

Step 3
Add the if statement inside the function

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

Step 4
Next make a circle with mouseX, mouseY and diameter 50
Check Your Work
Step 5
Save and Run!

You should now see white circles appear when you left click the screen!

Step 6
Steps 7-12

The following steps will not visually change a lot, but they are necessary to make our circles move and fade properly later

Step 7
Make an empty array called circles
Step 8
Initialize the drawCircles function after the mousePressed function
Step 9
Now add a for loop inside the drawCircles function

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.

Step 10
Call the ellipse() inside of our for loop

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

Step 11
Now add in the draw function

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

Step 12
Update the mousePressed function

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

Check Your Work
Step 13
Your project should look something like this when you make clicks on the screen
Step 14
We're now going to make each circle be a random color.
Step 15
Add a new variable into the mousePressed function

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

Step 16
Add 2 new properties!

Add a property g and b that is equal to a random number from 0 to 255

Step 17
In the drawCircles function we will color each circle

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

Check Your Work
Step 18
You should now see each circle with a random color when you click
Step 19
Add xSpd & ySpd

add the xspd and yspd properties in mousePressed

Step 20
Create the move function()

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

Step 21
Add the following to move()

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

Step 22
Now call move() in the draw function

this will execute the code we just wrote now

Check Your Work
Step 23
Circles move!

Your circles should now move diagonally off the screen
And they actually continue to move off the screen

Step 24
Add the following if statement

if a circle touches the right edge rebound

Step 25
Now rebound the left side

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

Check Your Work
Step 26
Your circles should now rebound on the left and right sides!
Step 27
Now make the circles REBOUND from the top and bottom as well!

Hint: We used circle.x and circle.xspd to rebound off of the right and left edges.
So what determine's a circle's y position and y speed?

Step 28
OPTIONAL: make the `size`, `xspd` and `yspd` randomized

random(10, 100) makes a random number between 10 and 99.999..
random(-2,2) makes a random number between -2 and 1.999..

Step 29
For the last steps we make the circles disappear over time using opacity
Step 30
Add one last property

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.

Step 31
Edit our fill() in drawCircles()

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

Step 32
Create the fadeOut function

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

Step 33
Decrease each circle's opacity

We want to go through each circle in our circles array and decrease its o property

Hint: check out how we go through every circle in move()

Step 34
Call fadeOut() in our draw function
Step 35
Add this final step to move()

This will remove circles whose opacity or o is 0

Check Your Work
Step 36
Congrats! You have now finished Fading Circles
Fading Circles Info



Created By




Access Level


For Teachers and Schools

Teach coding to your students with MVCode Teach

MVCode offers an integrated product designed to teach coding to students.

Learn more about MVCode Teach