Hi,
i have the below code. Inspite of giving the bounceoff(edges) instruction to the ball, why is it that it disappers from the screen.
var ball= createSprite(200,200,10,10);
ball.velocityX=20;
ball.velocityY=20;
function draw() {
if(ball.x>400||ball.x<0||ball.y>400||ball.y<0)
{
}
background(“white”);
drawSprites();
createEdgeSprites();
ball.bounceOff(edges);
}
A little hard to tell without being able to test it myself. Can you perhaps click on the share link and share a link to your project rather than just pasting the code?
Off the top of my head, it appears that there is no code inside the conditional blocks right now and that the ball.bounceOff(edges) isn’t being triggered right when the ball leaves the screen. Also, another potential observation … the createEdgeSprites() would probably be more effective if done at the very beginning of the program … I could see a case where the ball is headed off the screen and then you catch it doing that, but by the time the createEdgeSprites command is executed, the ball is already well off the screen and can’t bounce …
Just a few things to look at, but share the link if you are still having some issues.
Good luck!
Mike
this is how the ball behaves, the ball.bounceoff(edges) is not getting triggered
The code for the above is very simple
var ball= createSprite(200,200,10,10);
ball.velocityX=20;
ball.velocityY=20;
function draw() {
background(‘white’);
createEdgeSprites();
ball.bounceOff(edges);
drawSprites();
}
You may have found a bug in the way the createEdgeSprites() and ball.bounceOff(edges) commands work. When I change your velocity to a speed lower than 15, it appears to work great. It bounces just fine and appears to do so indefinitely. However, at a higher velocity, the ball is somehow escaping the screen at the corners. This happens almost every time when the X and Y velocity are the same (as that causes it to perfectly hit the corner), but if you change one of them to a different number, such as 18 or 19, the ball bounces around the screen for a while, but any time there is a near direct hit on the corner, it escapes.
I don’t know exactly for for sure why, but I’m guessing the “edge sprites” that are created, although invisible, are thinner in the corner and at high velocities, the ball skips just enough pixels that it jumps over the border. Same thing happens when I remove the ball.velocityY command and set the ball.velocityX command to a high number (over 400). The ball skips over the edge and disappears from the screen.
If you need to use that high of a velocity in your program, you may manually have to create some sprites the top, bottom, left and right of your screen that are fairly tall and wide so the ball won’t skip over them or use a conditional block to check the x and y positions of the ball.
Let us know if we can help.
Mike
Hello
Any update about this issue? I am facing the issue even with velocity 2, 3! The number of balls is 4 though!
Also, I would like to know how the velocity of the ball is affected in a bounceOff function (tried to print the same)
My code for reference
/creating the balls at the four corners.
var ball1 = createSprite(5,5,10,10);
var ball2 = createSprite(395,5,10,10);
var ball3 = createSprite(395,395,10,10);
var ball4 = createSprite(5,395,10,10);
//coloring the balls with different shades.
ball1.shapeColor = “red”;
ball2.shapeColor = “blue”;
ball3.shapeColor = “lightgreen”;
ball4.shapeColor = “orange”;
//setting the velocity of the balls to
//trigger movement towards the centre.
ball1.velocityX = 2;
ball1.velocityY = 2;
ball2.velocityX = -2;
ball2.velocityY = -2;
ball3.velocityX = 3;
ball3.velocityY = 3;
ball4.velocityX = 2;
ball4.velocityY = -3;
function draw() {
//clearing the screen
background(“white”);
//creating the edges
createEdgeSprites();
//making the balls bounceoff the edges.
ball1.bounceOff(edges);
ball2.bounceOff(edges);
ball3.bounceOff(edges);
ball4.bounceOff(edges);
//ball1 bouncing off the other balls.
ball1.bounceOff(ball2);
ball1.bounceOff(ball3);
ball1.bounceOff(ball4);
//ball2 bouncing off the other balls.
ball2.bounceOff(ball3);
ball2.bounceOff(ball4);
//ball3 bouncing off ball4
ball3.bounceOff(ball4);
text(“Ball1.VelocityX=”+ball1.velocityX,50,20);
text(“Ball1.VelocityY=”+ball1.velocityY,50,40);
text(“Ball2.VelocityX=”+ball2.velocityX,50,60);
text(“Ball2.VelocityY=”+ball2.velocityY,50,80);
text(“Ball3.VelocityX=”+ball3.velocityX,50,100);
text(“Ball3.VelocityY=”+ball3.velocityY,50,120);
text(“Ball4.VelocityX=”+ball4.velocityX,50,140);
text(“Ball4.VelocityY=”+ball4.velocityY,50,160);
drawSprites();
}
I don’t know that this issue is one that code.org has flagged officially. It appears that the balls can still escape at the corners at a higher velocity. In your case, you start at a velocity of 2 and 3, however, when they escape, the velocity is much higher. The two that keep their low velocity stay on the screen even when it appears they hit the corners.
To be honest, I can’t explain the velocity increase after the balls bounce off each other. It would seem like that shouldn’t happen, but it obviously does. I’ll alert a few others and see if anyone has an explanation for that.
Mike
Hi!
Regarding the bounceOff behavior: bounceOff is meant to recreate a strong repelling behavior, like a basketball bouncing off the floor. It makes the most sense to think of this with moving object bouncing off a stationary object, but the behavior gets complicated when you have multiple moving objects. This link shows some different examples of how bounceOff behaves (the animation at the bottom with the note and the guitar). Behind the scenes, the general behavior is: if you have sprite1.bounceOff(sprite2), then sprite1 will keep it’s same velocity and add twice sprite2's velocity to it. You can see this behavior in the link above. If you wanted the velocities to all stay the same but just change direction, try using bounce instead of bounceOff.
Regarding disappearing objects: this has to do with how velocity and collisions work behind-the-scenes. velocity is really just the counter pattern - whenever you put sprite1.velocityX = 10, GameLab secretly translates this into sprite1.x = sprite1.x + 10 at the top of the game loop you can see that in this video here.
Similarly, when we type ball1.bounceOff(edges), GameLab secretly translates that into an if-statement that looks something like
if (ball1.isTouching(edges)) {
//bounce off
}
So, the heart of the problem is: what happens when the counter pattern updates so much that the ball moves past the edge without ever touching it?
In this example, the velocity is so high that the counter-pattern makes the ball goes completely beyond the edge without ever touching it, which means the if-statement with isTouching never becomes true. Fun fact: this is also how glitches in modern video games happen too where your character can get “stuck” in the environment or access secret areas they’re not supposed to. Here’s an example from an old video game - you can see the character try and activate the glitch by going ‘so fast’ that the game doesn’t detect that it hit the water.
There are several ways to fix this:
Option 1: Make the ball bigger so it has a greater chance of impacting the wall:
Option 2: Don’t use the default edges in GameLab and instead made your own with a wider width so they’re more likely to detect collisions. You can still place these just outside the visible area so players won’t see them.
Option 3: Add an if-statement to your code to check the velocity values for your objects, and make sure they never go above a certain amount. This makes sure you never reach a speed that’s “too fast” and can glitch your game.
This was fun - thanks for asking this question.
Dan - Code Curriculum Writer
First of all, thank you so much for the detailed explanation…it has cleared quite a few things for me!
Second, I had a suggestion for bounceOff
if (ball1.isTouching(edges) || ball1.isBeyond(edges)) {
//bounce off
}
I guess isTouching(edges) must checking for overlapping positions of ball1 and edges??
Would it be possible to check if the ball has gone past and then bounce it back??
Let me know either ways.
Thanks again for your help!
-Sowmya Manohar
