Bouncing Circle

Tags

p5.js

Date

Class

Explore: Coding & Computer Science

Author

Miles

Class Section

Documentation Type

tutorial

Taking it further

There’s a myriad of ways you can modify this code to make it yours! You can…

• Make the bounce angles change with each bounce
• Change the circle’s color according to direction
• Create a trail of color behind the circle
• Turn this into a game of tennis (Pong anyone?)

Key Concepts

Variables

Variables are like boxes which can store a value to be used or changed later.

let apple = 3;
let pen = 5;

let pineapple = apple + pen;

print(pineapple); // 8

Incrementation

We can increase or decrease a value over time using incrementation! The basic pattern for incrementation is very simple:

let banana = 0; // First, create a variable

function draw() {
	banana = banana + 1; // Now let's increase it by 1 each frame
	
	print(banana); // If we print banana's value, we can see it increase over time
}

Want the variable to increase faster?

banana = banana + 10

Want the variable to decrease, not increase?

banana = banana - 4