I have been trying to make this ball bounce for a day. Why doesnt it work?

Question

I am making a ball class, and in that class i want to make the ball bounce off the wall, but it remains stuck.

I have tried making the ball bounce in the draw function, but then it didnt even stopped at the wall. I tried setting the this.x and this.y away from the limit so it doesnt loop, but no succes. I am left without choises. I dont know what to do. I am just starting out and im quite enjoying coding, but this is giving me a headache.

let r;
let g;
let b;

let xpos;
let ypos;

let size;

let xlimit;
let ylimit;
let x_limit;
let y_limit;

let xspeeddir;
let yspeeddir;

function setup() {
    
    createCanvas(800, 450);
    xpos = random(20, width);
    ypos = random(20, height);
    ball = new Ball(xpos, ypos);
    
    xlimit = width-15;
    ylimit = height-15;
    x_limit = 15;
    y_limit = 15;
    
    r = random(0, 255);
    g = random(0, 255);
    b = random(0, 255);
    
    xspeeddir = random(-5,5);
    yspeeddir = random(-5,5);
    
}

function draw() {
    
    background(255, 238, 112);
    
    ball.appear(r, g, b);
    ball.move(xspeeddir, yspeeddir);
}

class Ball {
    constructor(x, y) {
        this.x = x;
        this.y = y;
        this.size = 30;
    }
    
    appear(r, g, b) {
        this.r = r;
        this.g = g;
        this.b  = b;
        fill(this.r, this.g, this.b);
        noStroke();
        ellipse(this.x, this.y, this.size, this.size);
    }
    
    move(xspeed, yspeed) {
        this.speedx = xspeed;
        this.speedy = yspeed;
        
        if (this.x > xlimit) {
            this.speedx = -Math.abs(this.speedx);
            this.x = xlimit-1;
        }
        if (this.x < x_limit) {
            this.speedx = Math.abs(this.speedx);            
            this.x = x_limit + 1;
        }
        if (this.y > ylimit) {
            this.speedy = -Math.abs(this.speedy);
            this.y = ylimit - 1;
        }
        if (this.y < y_limit) {
            this.speedy = Math.abs(this.speedy);
            this.y = ylimit + 1;
        }
        
        this.x = this.x + this.speedx;
        this.y = this.y + this.speedy;
        
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js"></script>

No errors in the console

It'll help people provide an answer if you update your question with a runnable [mcve] demonstrating the problem using Stack Snippets (the `[<>]` toolbar button; [here's how to do one](https://meta.stackoverflow.com/questions/358992/)). (You can include external libs in a snippet, including [p5 from cdnjs](https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js).) — T.J. Crowder, Jul 07 '19 at 10:17
@Akhilesh - No, not off-site. **On**-site with stack snippets. — T.J. Crowder, Jul 07 '19 at 10:17
You should use better variable names. Choosing almost the same names `ylimit` and `y_limit` has boomeranged back to you: `this.y = ylimit + 1;` should be `this.y = y_limit + 1;`. Maybe call these `topLimit`, `bottomLimit` instead... — trincot, Jul 07 '19 at 10:21
@Rabbid76 its because it is. i didnt get any response and i thought i tried today too, but with more of the code. — Stefan122GG, Jul 07 '19 at 10:26
@trincot i see. I fixed it, i renamed them, but with no succes. I still get the same result — Stefan122GG, Jul 07 '19 at 10:27
@Stefan122GG *"its because it is. i didnt get any response"* The delete on of the 2 questions. — Rabbid76, Jul 07 '19 at 10:30

score 4 · Accepted Answer · answered Jul 07 '19 at 10:26

The speed of the ball is continuously "reset", when .move() is called. Set the speed in the constructor and use the attributes this.speedx and this.speedy in .move():

xspeeddir = random(-5,5);
yspeeddir = random(-5,5);
ball = new Ball(xpos, ypos, xspeeddir, yspeeddir);

function draw() {

    background(255, 238, 112);

    ball.appear(r, g, b);
    ball.move();
}

It is not sufficient to invert the speed, you've to limit the position of the ball to the bounds of the window, too. If the ball exceeds the limit, then clamp the position in bounds.

move() {
    if(this.x >= xlimit) {
        this.x = xlimit; // limit to xlimit
        this.speedx = -(this.speedx)
    }

    if (this.x <= this.size/2) {
        this.x = this.size/2; // limit to this.size/2
        this.speedx = -(this.speedx)
    }

    if (this.y >= ylimit) {
        this.y = ylimit; // limit to ylimit
        this.speedy = -(this.speedy)
    }

    if (this.y <= this.size/2) {
        this.y = this.size/2; // limit to this.size/2
        this.speedy = -(this.speedy)
    }

    this.x = this.x + this.speedx;
    this.y = this.y + this.speedy;
}

let r, g, b;
let xpos, ypos;
let size;
let xlimit, ylimit;
let x_limit, y_limit;
let xspeeddir, yspeeddir;

function setup() {

    createCanvas(500, 250);
    xpos = random(20, width);
    ypos = random(20, height);

    xlimit = width-15;
    ylimit = height-15;
    x_limit = 15;
    y_limit = 15;

    r = random(0, 255);
    g = random(0, 255);
    b = random(0, 255);

    xspeeddir = random(-5,5);
    yspeeddir = random(-5,5);
    ball = new Ball(xpos, ypos, xspeeddir, yspeeddir);
}

function draw() {

    background(255, 238, 112);

    ball.appear(r, g, b);
    ball.move();
}

class Ball {
    constructor(x, y, xspeed, yspeed) {
        this.x = x;
        this.y = y;
        this.size = 30;
        this.speedx = xspeed;
        this.speedy = yspeed;
    }

    appear(r, g, b) {
        this.r = r;
        this.g = g;
        this.b  = b;
        fill(this.r, this.g, this.b);
        noStroke();
        ellipse(this.x, this.y, this.size, this.size);
    }

    move() {
        if(this.x >= xlimit) {
            this.x = xlimit; // limit to xlimit
            this.speedx = -(this.speedx)
        }

        if (this.x <= this.size/2) {
            this.x = this.size/2; // limit to this.size/2
            this.speedx = -(this.speedx)
        }

        if (this.y >= ylimit) {
            this.y = ylimit; // limit to ylimit
            this.speedy = -(this.speedy)
        }

        if (this.y <= this.size/2) {
            this.y = this.size/2; // limit to this.size/2
            this.speedy = -(this.speedy)
        }

        this.x = this.x + this.speedx;
        this.y = this.y + this.speedy;
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js"></script>

Thank you so much. I would have never thought of that – Stefan122GG Jul 07 '19 at 10:37 — Stefan122GG, Jul 07 '19 at 10:37

I have been trying to make this ball bounce for a day. Why doesnt it work?

1 Answers1

Linked