Bouncing Rainbow Squares!

About this lesson

Use JavaScript to make fun bouncing patterns

Concepts Introduced:

Object Property Access

Concepts Reviewed:

Object Property Access
Step 1
We'll create an Object variable for our block

This has 4 properties which describe it.

Step 2
Add a draw loop to put our main program in

The draw() function automatically repeats forever

Step 3
Call the rect() function to draw a rectangle for our block

We're using the block's properties to draw the rectangle.

Check Your Work
Step 4
If you press 'Run' you should see the block drawn to the screen
Step 5
Now we're going to make the square move

We need a way to say:

"Take the block's x-position and increase by some amount"

Step 6
We'll use the "increase by" operator

myValue += 5 means "increase myValue by 5"

Step 7
With block.x "increase it by" 4

block.x means "blocks's x"

Check Your Work
Step 8
Each frame a new rectangle is drawn to the screen at block.x (which is moving to the right)
Step 9
Try changing the number here to change the speed of the block
Step 10
We can think of this as adding a "speed" value to the blocks x-position
Step 11
First add a property called "xspeed" to the block

Set the value to 4

Step 12
Now we can add the block's xspeed to its xposition
Check Your Work
Step 13
Just like before you can change the value of the block's xspeed to change how fast it moves



Step 14
Now try to give the block a yspeed property and use it to change the y-position of the block

Your block should now move diagonally up or down:

Step 15
HSB color mode

We're going to use a type of colorMode called HSB Mode.

Move the sliders and note the color values:

Step 16
First set the colorMode to HSB

Hue, Saturation, and Brightness will all be values out of 100


  • 100 is max brightness
  • 50 is medium brightness
  • 0 is no brightness
Step 17
We'll need to change our block's hue- so let's give it a hue property

Add a hue property with a value of 0.

Step 18
Now we can fill based on the block's hue

We'll use full Saturation and Brightness (100 each)

Check Your Work
Step 19
Your block should be red now

Hue of 0 is red.

Step 20
Now let's have the block's hue increase every frame

What do you think this will look like?

Check Your Work
Step 21
Your block should now display rainbow colors as it moves!
Step 22
Add a noStroke() call which gets rid of outlines
Step 23
Next we'll make the block bounce against the edges

If the block goes out of the screen, it's speed flips to negative.

Step 24
Add an if-statement inside of "draw()" that flips the yspeed if the block goes off the bottom
Step 25
Similarly if the block goes off the top its yspeed should flip as well

You can either write this with a new if-statement...
You can use an or symbol ||

Check Your Work
Step 26
Your block should now bounce vertically but not horizontally

We'll get the hue to reset when it gets to 100 later- can you think of how we might do that?

Step 27
Now can you make the block flip its xspeed when it goes off the side of the screen?
Step 28
Let's go back and have the hue reset to 0 if it gets larger than 100
Step 29
As a finishing touch we can set the xspeed to a random number between 0 and 5

similarly let's also set the yspeed to a random number:

Step 30
Other things you can try:

You could:
- Try increasing or decreasing the size over time
- Make the speed increase or decrease
- Make it an ellipse
- Add another block

Here is what it looks like if you draw a second rect() with the x and y's reversed:

rect(block.x, block.y, block.w, block.h
rect(block.y, block.x, block.w, block.h

Bouncing Rainbow Squares! Info



Created By



Bouncing Rainbow Squares

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