3.2: The Bouncing Ball – p5.js Tutorial

This video continues the discussion of conditional statements and looks at a classic scenario — a circle that bounces off the edges of the canvas.

Next video:

Support this channel on Patreon:


Send me your questions and coding challenges!:

Link to code on Github:


For More p5.js Videos:






24 responses to “3.2: The Bouncing Ball – p5.js Tutorial”

  1. khawaja hamza Avatar

    Your jokes aren't funny and your way of demonstration waste a lot of time. So, it would be better if you concentrate more on the content and not make it fancy.

  2. Dave David Avatar

    If (x > width || x < 0) {
    Speed *= -1

  3. Wei-Heng Yen Avatar

    does anyone know how to make the ball bounce back again and again? The code could only make the ball bounce one time@@

  4. some one Avatar

    Hey how can I include acceleration to code ? Means like gravity…I need to know fps and include it in code…Help pls. 🙂 thnx

  5. Meidimax Avatar

    Thanks for the great video! I tried to solve it on my own before looking at your solution and i got a way involving a 2nd variable. This is my code:

    var x = 10;
    var a = 0;

    function setup() {
    createCanvas(600, 400);

    function draw() {

    rect(0, 0, 599, 399);
    x -= 3;
    if (a === 0) {
    x += 6;
    if (x > width – 10) {
    a += 1;

    if (x < 10) {
    a -= 1;

    ellipse(x, 200, 20, 20);

    function mousePressed() {
    x = 10;

  6. Tomáš Kosobud Avatar

    Hi, i have tried to improve the code, but i have a problem when the ball hits the edges. In the bounce function i tried to use else {} or else if (ball.x == && ball.y == 0 || ball.x == width && ball.y == 0 etc.), but it does not work either any suggestions? Also here the code does not recognize || Code: else if (ball.x == && ball.y == 0 || ball.x == width && ball.y == 0 etc.

    function setup() {
    createCanvas(800, 800);

    function draw() {

    var ball = {
    x: 400,
    y: 400,
    xSpeed: 10,
    ySpeed: 10

    function move() {
    ball.x += ball.xSpeed;
    ball.y += ball.ySpeed;

    // There is the problem part
    function bounce() {
    if (ball.x == width || ball.x == 0)
    ball.xSpeed = -ball.xSpeed;
    else if (ball.y == height || ball.y == 0)
    ball.ySpeed = -ball.ySpeed;
    // This does not work
    else {
    ball.xSpeed == -ball.xSpeed;
    ball.ySpeed == -ball.ySpeed;

    function display() {
    ellipse(ball.x, ball.y, 25, 25);

    Try to run it, you will see better what is happening.
    Thanks for any answer 🙂

  7. Tushar Sadhwani Avatar

    A little info:

    An If statement doesn't strictly require a boolean expression.
    You can give any variable inside the condition brackets, and as long as it's value is not zero, false, or undefined, the loop will execute.

    if it gets false, 0 or undefined, the statements inside the loop will not run.

    an interesting idea is to declare a variable but not assign a value to it. the default value is undefined.

    assign a value to it in another if statement, and have another if statement as:

    if (variable name){whatever}

    what this will do is, as soon as the variable is assigned a value (well, other than zero), the loop will start running.

  8. zoilo garingan Avatar

    the variable width doesnt work 🙁

  9. Topsoil Depletion Awareness Avatar

    Idk if this is the video I should ask this but how can I make it so that it bounces of a rectangle and edges of window? I have something like:

    var ball = {
    x: 300,
    y: 200,
    dx: 10,
    dy: -10

    function draw() {
    createCanvas(windowWidth, windowHeight);
    ellipse(ball.x, ball.y, 24, 24);


    ball.x += ball.dx;
    ball.y += ball.dy;

    //bouncing with wall
    if (ball.x < 0 || ball.x > width) { //if outside screen
    ball.dx *= -1;
    if (ball.y < 0 || ball.y > height) {
    ball.dy *= -1;

    //bouncing with box
    if (ball.y > 100 && ball.y < 300) { //if ball is inside left or right of box


  10. Random Code Avatar

    how do you make a brickbreaker gam

  11. Marcelo Pietragalla Avatar

    Hi, Daniel!

    I wonder if you could do as coding chalenge a simple 2D Inverse Kinematic solver.



  12. Affan Butt Avatar

    i making game for my school project like hoppy beaver game from khan academy using p5.js script but i am confused …how to import the code and make a canvas

  13. Red_Psy Avatar

    For anyone using the newest p5.js – println() doesn't seem to work. I checked the reference and print() is the right function!

  14. Random Avatar

    I'm trying to make that game where it bounces of a moving platform

  15. TechNerd01 Avatar

    Hey Daniel… I really love your vids… But what I'm currenly working on I want to make a ellipse splash like a ellipse starts and grows on mouseclick I can do that directly in draw… but that wont work… when I try a for loop the problem is there is no way to add a delay between every round of the for loop… so there's no animation at all…. so How can I fix that pls….

  16. Niyamul Ahsan Avatar

    You are great. I am very much glad for this video. It is work for me. I already use it setInterval and requestAnimationFram. May be it will also work in settimeout…..Thank you

  17. Peter Schmitt Avatar

    i get the following error: Uncaught ReferenceError: println is not defined
    Am I missing a library? The print command works.

  18. smokinvegastv Avatar

    At 6:13 when you explain adding{ speed = -3}, it is actually {speed = speed – 3}, otherwise it wont work.

  19. ch535 Avatar

    I love your tutorials! They have really got me committed to learning p5 javascript. I'm still having beginner problems though. I was doing this tutorial and at the end I decided to add a review exercise for the last few videos using map and random functions. So first I set a fill for the ellipse using r and b variables mapped to x to create a color gradient in the circle as it moved. Next I wanted to make a g variable that updated to a random value every cycle. When the g was a static number value the mapped r and b gradients worked just fine. When I set g=random(0,255); it updated every frame, which was no good. So I made an if(x==0) {g=random(0,255);} and something bizarre happened. It updated g every cycle like I wanted, but it stopped mapping my r and b variables. When I set if(x==width) {g=random(0,255);} the fill just defaulted to white until it updated at the end of the cycle. I just want my mapped color gradient with a random g variable that updates every cycle. How can I do that? Is this explained with something in a later tutorial?

    This is the whole code segment for my ellipse; everything else was the same as in the video:
    var r=map(x,0,600,255);
    var b=map(x,0,600,255,0);

    Thanks for making these videos! It's the most fun I've ever had learning to code 🙂

  20. william lee Avatar

    how would you make the box keep bouncing back and forth?

  21. Curiosity Avatar

    I don't have colored words ;(

  22. San Coca Avatar

    Hey daniel, I really like your tutorials. i've watched alot of the already but i've been stuck on something since the beginning. that is Easing in animation. I've seen some examples on the website. But for some reason I can't seem to understand how these cos() sin() stuff works. i tried making my own easing function. Which turned out to work pretty well 😛 but it's alot of code. what is the easiest way to make an object ease from one place to another?

  23. Ryan Scharfer Avatar

    awesome! loves these videos

  24. Chriss123 Avatar

    Thanks. Really useful tutorial.

Leave a Reply

Your email address will not be published. Required fields are marked *