Bouncy Ball

Basic Animation

Prerequisites:  shapes,  variables,  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

Made with Slides.com