Bouncy Ball

Basic Animation

with p5.js

Prereqs:  shapes,  variables,  animation

ZippyCoder

Setup Project Folder & Library

  • 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

Bouncy Ball (p5.js)

By Tâm Nguyen

Made with Slides.com

Bouncy Ball (p5.js)

  • 190

More from Tâm Nguyen