Conditional statement not activated for bouncing ball in p5.js

Question

I'm completely new to JavaScript and p5.js. I know this is not the most efficient code for bouncing ball, but I tried to write my own bouncing ball mechanic as self-learning.

function draw() {
    background (col); // background
    col = map(cir.x, 0, 600, 0, 255) // map function

    fill (350, 200, 200);
    ellipse (cir.x, cir.y, cir.diameter, cir.diameter);

    // Bounding ball mechanic
    var speed = 3;
    var hitRightWall = false;
    var hitLeftWall = false;

    if (cir.x >= 300) {
        hitRightWall == true;
        hitLeftWall == false;
    }
    else if (cir.x <= -50) {
        hitLeftWall == true;
        hitRightWall == false;
    }
    if (hitRightWall==true) {
        speed == -3;
    }
    else {
        speed == 3;
    }
    cir.x = cir.x + speed;
}

For some reason, the if (hitRightWall==True) condition is never activated even though if (cir.x >= 300) was activated. The ball keeps going to the right and off the screen.

In your code you never set `hitRightWall` value to `true`, I think this is the cause of why `hitRightWall==true` never satisfied. — dhilt, Jan 09 '19 at 04:07
But I thought I set the condition `if (cir.x >= 300)`, then hitRightWall will be true, no? — KubiK888, Jan 09 '19 at 04:08

score 1 · Accepted Answer · answered Jan 09 '19 at 04:09

There are a few things going on here. First off, you're resetting the value of hitRightWall and hitLeftWall to false every frame. Is that what you want?

Secondly, look at statements like this:

hitRightWall == true;

The == double equals is doing a comparison, not an assignment. You probably want something like this:

hitRightWall = true;

The = single equals assigns a value to a variable.

Finally, I'm not totally sure why you need these variables at all. Can't you modify the speed variable directly in your first if / else if statement?

Shameless self-promotion: here is a tutorial on collision detection. It's written for Processing, but the same ideas apply to P5.js.

Great thanks, I got it to work taking those variables out of the draw loop, and replace `==` with `=` for assignment. As mentioned, I want to create my own bouncing ball mechanic after learning if condition as a self-challenge. I am sure it's not the most efficient. I want to look at better examples (like your tutorials) after I tried mine first. BTW, your tut looks good, will check out later. — KubiK888, Jan 09 '19 at 04:16

Conditional statement not activated for bouncing ball in p5.js

1 Answers1