Bouncy Ball
Basic Animation
How to Animate
Function draw() gets called automatically and repeatedly
var draw = function() {
// change (x,y) position of circle
// change size of green rectangle
// change rotation angle of blue bar
// change color of ellipse
};
Change size
Rotate
Change color
Change ball position
To animate an object, change its properties such as position, rotation , shape, size, or color
Put code inside function draw() to draw each frame
Define Draw Ball Function
// ball position, size, and velocity
var x = width/2;
var y = height/2;
var radius = 20;
var velocity = 2; // speed & direction
var drawBall = function(x, y) {
// set colors
strokeWeight(2);
stroke(26, 0, 255); // dark blue
fill(0, 251, 255); // light blue
// set draw mode and draw the ball
ellipseMode(RADIUS);
ellipse(x, y, radius, radius);
};
var draw = function() {
drawBall(x,y);
};Call function drawBall() inside function draw() -- the ball stands still
Define and initialize variables, set (x,y) in the canvas center
Define function drawBall(x,y) to draw the ball at
specified location
Move Ball Left and Right
// ball position, size, and velocity
var x = width/2;
var y = height/2;
var radius = 20;
var velocity = 2; // speed & direction
var drawBall = function(x, y) {...}
var draw = function() {
drawBall(x,y);
x += velocity; // change x position on each frame
if (x < 0 || x > width) { // check left & right boundaries
velocity = -velocity; // reverse direction
}
};
Add code to change the
x position on each frame
Check x against left and right boundaries, and reverse direction if x is outside the boundaries
Pre-existing code, do not retype.
"..." means code is hidden to save space
Set Background on Each Frame
// ball position, size, and velocity
var x = width/2;
var y = height/2;
var radius = 20;
var velocity = 2; // speed & direction
var drawBall = function(x, y) {...}
var draw = function() {
background(255, 255, 0); // yellow
drawBall(x,y);
x += velocity; // change x position on each frame
if (x < 0 || x > width) { // check left & right boundaries
velocity = -velocity; // reverse direction
}
};
To remove the blue trail, call background() to set the background color on each frame
This effectively "erases" all drawn objects at the start of each frame
Drawing commands, such as drawBall(), must be done after calling background() to redraw the objects
Precise Bounce on Edge
// ball position, size, and velocity
var x = width/2;
var y = height/2;
var radius = 20;
var velocity = 2; // speed & direction
var drawBall = function(x, y) {...}
var draw = function() {
background(255, 255, 0); // yellow
drawBall(x,y);
x += velocity; // change x position on each frame
// check left & right boundaries
if (x < radius || x > width-radius) {
velocity = -velocity; // reverse direction
}
};
To get the ball to bounce precisely on the edge, take into account the ball radius on boundary checks
Instead of checking for (x < 0 || x > width),
check for (x < radius || x > width - radius)
"||" means "or",
"&&" means "and"
What to do? Fill in the Blanks
var draw = function() {
background(255, 255, 255); // white
drawBall(x,y);
x += _________;
if (x < radius || x > ________ - radius) {
xVelocity = -xVelocity; // reverse direction
}
};
This "_______" means to fill in the blanks with the correct code
It could be a variable, a constant value, or some other code snippets
If a solution is provided, hit the down arrow key to see it
Bounce Diagonally
// ball position, size, and velocity
var x = width/2;
var y = height/2;
var radius = 20;
var xVelocity = 2; // x speed & direction
var yVelocity = 1; // y speed & direction
var drawBall = function(x, y) {...}
var draw = function() {
background(255, 255, 255); // white
drawBall(x,y);
x += _________;
y += _________;
// check left & right boundaries
if (x < radius || x > ________ - radius) {
xVelocity = -xVelocity; // reverse direction
}
// check top & bottom boundaries
if (y < radius || y > ________ - radius) {
yVelocity = -yVelocity; // reverse direction
}
};
Replace variable velocity with 2 new variables xVelocity and yVelocity
Change x and y by xVelocity and yVelocity on each frame
Check y against top and bottom edges
Check x against left and right edges
See solution
Text
Bounce Diagonally
// ball position, size, and velocity
var x = width/2;
var y = height/2;
var radius = 20;
var xVelocity = 2; // x speed & direction
var yVelocity = 1; // y speed & direction
var drawBall = function(x, y) {...}
var draw = function() {
background(255, 255, 255); // white
drawBall(x,y);
x += xVelocity;
y += yVelocity;
// check left & right boundaries
if (x < radius || x > width-radius) {
xVelocity = -xVelocity; // reverse direction
}
// check top & bottom boundaries
if (y < radius || y > height-radius) {
yVelocity = -yVelocity; // reverse direction
}
};
Replace variable velocity with 2 new variables xVelocity and yVelocity
Change x and y by xVelocity and yVelocity on each frame
Check y against top and bottom edges
Check x against left and right edges
Congratulations
You have learned:
- Put code inside function draw() for animation
- Animate an object by change its properties such as position, rotation , shape, size, or color
- Motion is achieved by changing the (x,y) position of the object
- Call background() to clear the canvas to a given color, and put other drawing commands after calling background()
Please enter Bouncy Ball for Exercise Name
Bouncy Ball
By Tâm Nguyen
