Why does the Ball get stuck on canvas?

randomqweasdzxc

On this project of a ball bouncing at the canvas.... I came across this interesting "bug" that sometimes will make the ball be stuck at the canvas, or even leave it...

As in other projects such as the brick ball game, sometimes the brick/ball interactions "bug" each other and make the ball leave the canvas... I written this code in a way that it will "bug" right after starting the code, so you can see what I'm talking about...

I want to understand what is causing this and to know for sure how to properly write the move or the bounce functions.

Because this only happens with certain starting positions and/or corners of the canvas "Ball(height/2, width/2)"

Noticed if the bounce function line is changed to "this.y > height || y <=0;" it would fix this without changing the starting position.... but I want a general solution ... wonder if I add another ball(b2) to bounce with b1 and they do strange interactions I don't want those objects to run off the canvas or do this strutting/ semi stuck or leaving the canvas...; Isn't there a ultimate way I can say "if (ball.position >or= canvas.size) {speed*-1}" Also the problem could be at ball.speed or ball.update...? :s or is this all solved with some line saying that "when the object leaves the canvas then reset it" .. thanks

function setup() {
  createCanvas(600, 400);
  b1 = new Ball(height/2, width/2);
}
function draw() {
  background(0);
  b1.update();
  b1.bounce();
  b1.display();
}
function Ball(x, y) {
  this.x = x;
  this.y = y;
  this.r = 22;
  this.xspeed = 4;
  this.yspeed = -3;
  this.display = function() {
    stroke(255);
    fill(255);
    ellipse(this.x, this.y, this.r * 2, this.r * 2);
  }
  this.update = function() {
    this.x = this.x + this.xspeed;
    this.y = this.y + this.yspeed;
  }
  this.bounce = function() {
    if (this.x > width || this.x <0) {
      this.xspeed = this.xspeed * -1;
    } else if (this.y > height || this.y <0) {
      this.yspeed = this.yspeed * -1;
    }
  }
}

github.link

koogs

Please format your code. Edit post, highlight code, press Ctrl-o. What you've done is to quote your code and you've lost all the newlines and indentation so it's a mess

if (this.x > width || this.x <0) { 
  this.xspeed = this.xspeed * -1; 
}

This is never a good idea. Split it into two tests. If it's 0 then make the speed positive, if width then make it negative. Same with y.

Lord_of_the_Galaxy

And why? Because it may sometimes stay beyond the width for two frames, and negative times negative is positive, leading the speed to oscillate.

quark

This particular logic error is discussed in some detail here

randomqweasdzxc

hi @koogs so there iwas a " github.link " on the op bellow the quoted code in case you wanted to see writing with color, I quoted the code for a reason, that being, when I tried to format it to show as highlighted js it would not show the complete code... So thanks you helped me as well because I didn't knew CTRL+O was a short-key for highlighting code, I was trying to do it with < pre lang="javascript"> __ < /pre>

hi @quark thank you that was exactly what I was looking for, very well explained and centers on the problem of the op, as it is written on processing I can see there are some differences in the way the code is written, but I think I understood the solutions and will try to change the code accordingly.