Bouncy Ball

Basic Animation

with p5.js

Prereqs: shapes, variables, animation

ZippyCoder

Setup Project Folder & Library

Download p5projects.zip and unzip into the folder p5projects/

Copy the folder app-template/ into a new folder named bouncy-ball

ZippyCoder

Edit index.html

Change <title> and <h1> to the project name, such as Bouncy Ball and My Bouncy Ball
Save index.html and run it

ZippyCoder

<html>
  <head>
    <title>Bouncy Ball</title>
    <meta charset="UTF-8">
    <script src="../lib/p5.js"></script>
    <script src="sketch.js"></script>
  </head>
  <body style="padding:10px; margin:10px">
    <h1>My Bouncy Ball</h1>
    <div id="myContainer"></div>
  </body>
</html>

How to Animate

The draw() function gets called automatically and repeatedly
Put code inside the draw() function to draw each frame
To animate an object, change its properties such as position, rotation , shape, size, or color

function draw() { 

    ... 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

Move ball

Edit sketch.js

Declare & Assign Global Variables

// Global variables: ball properties
var x, y;             // ball position
var radius = 20;      // ball radius
var xVelocity = 2.5;  // x speed & direction
var yVelocity = 1.5;  // y speed & direction

function setup() {    // special Processing function
    // make canvas the full size of window, minus the border padding
    var myCanvas = createCanvas(windowWidth-40, windowHeight-100);
    myCanvas.parent('myContainer');

    main(); // invoke main
}

// Main function - run once before the "draw loop"
function main() {
    x = width/2;        // middle of stage
    y = height/2;       // middle of stage
}

Define global variables for ball properties (x, y position, radius, xVelocity, and yVelocity)
Variables x and y are declared outside of all functions but assigned inside function main(), because width and height are special Processing variables, visible only inside a function

sketch.js

Define Draw Ball Function

... global variables: ball properties
function setup() { ... }
function main() { ... }

function drawBall(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);
}

function draw() {
    drawBall(x,y);
}

Define function drawBall(x,y) to draw the ball at specified location
Call drawBall() inside draw()
Save sketch.js and reload/run index.html to see ball standing still

Note: Ellipsis (...) within code listing means that there's something that was either previously shown or is hidden because it's not relevant

Move Ball Left and Right

... global variables: ball properties
function setup() { ... }
function main() { ... }
function drawBall(x, y) { ... }

function draw() {
    drawBall(x,y);
    x += xVelocity;
    // check left & right boundaries
    if (x < 0 || x > width) {
        xVelocity = -xVelocity;  // reverse direction
    }
}

Change x position on each frame
Check x against left and right boundaries, and reverse direction if x is outside the boundaries

Set Background on Each Frame

... global variables: ball properties
function setup() { ... }
function main() { ... }
function drawBall(x, y) { ... }

function draw() {
    background(255,255,0);  // yellow
    drawBall(x,y);
    x += xVelocity;
    // check left & right boundaries
    if (x < 0 || x > width) {
        xVelocity = -xVelocity;  // 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
Draw objects again after calling background() in the same frame

Precise Bounce on Edge

... global variables: ball properties
function setup() { ... }
function main() { ... }
function drawBall(x, y) { ... }

function draw() {
    background(255,255,0);  // yellow
    drawBall(x,y);
    x += xVelocity;
    // check left & right boundaries
    if (x < radius || x > width-radius) {
        xVelocity = -xVelocity;  // 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)

Bounce Diagonally

... global variables: ball properties
var xVelocity = 2.5;  // x speed & direction
var yVelocity = 1.5;  // y speed & direction

function setup() { ... }
function main() { ... }
function drawBall(x, y) { ... }

function draw() {
    background(255,255,255);  // white
    drawBall(x,y);
    x += xVelocity;
    // check left & right boundaries
    if (x < radius || x > width-radius) {
        xVelocity = -xVelocity;  // reverse direction
    }
    y += yVelocity;
    // check top & bottom boundaries
    if (y < radius || y > height-radius) {
        yVelocity = -yVelocity;  // reverse direction
    }
}

Change x and y by xVelocity and yVelocity on each frame
Check x against left and right edges, y against top and bottom edge

Please enter Bouncy Ball P5js for Exercise Name