Tags
p5.js
Date
Class
Explore: Coding & Computer Science
Author
U
UntitledClass 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