Planning
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
Step 5
Save and Run!

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

Information
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

Step 13
Your project should look something like this when you make clicks on the screen
Planning
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`

Challenge
Step 16

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

Step 18
You should now see each circle with a random color when you click
Step 19

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

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

Step 23
Circles move!

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

Step 24

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

Step 26
Your circles should now rebound on the left and right sides!
Challenge
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?

Planning
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..

Planning
Step 29
For the last steps we make the circles disappear over time using opacity
Step 30

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

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

Challenge
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

Step 36
Congrats! You have now finished Fading Circles

Account

MVCode

Created By

Course:

Snowflakes

Access Level

account

For Teachers and Schools

Teach coding to your students with MVCode Teach

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