Having trouble getting triangle to speed up?

I’m trying to get the triangle to speed up after it hits the wall, but I’m unsure how to do that.

//variables
float xa=30;float ya=75;float xb=58;float yb=20;
float xc=86;float yc=75;float xSpeed=10;float ySpeed=10;

void setup(){
  size(800,600);//set up screen size 800 pixels by 600 pixels
}

void draw (){
  background (0);//refreshing the background
  fill (225,225,225);
  textSize(18);
  text("Cliking the mouse on the background might slow down the object",110,20);
  Triangle();
}

void Triangle(){//user defined function for Triangle
 fill(random(255),random(255),random(255));//selects a radom mix of red, blue and green
 triangle (xa,ya,xb,yb,xc,yc); 
 //have all of the points moving
  xa=xa+xSpeed;
  xb=xb+xSpeed;
  xc=xc+xSpeed;
  ya=ya+ySpeed; 
  yb=yb+ySpeed; 
  yc=yc+ySpeed; 
  
  if (xa>width || xa<0 || xb>width || xb<0 || xc>width || xc<0){ //if any of the X values goes out of bounds, reverse the speed
    xSpeed=xSpeed*-1;
  }
  
  if (ya>height || ya<0 || yb>height || yb<0 || yc>height || yc<0 ){  //if any of the Y values goes out of bounds, reverse the speed
    ySpeed=ySpeed*-1;
  }

}

void mouseReleased() {//when mouse is released then pressed there is a radom chance that the triangle will slow down
  if (.5<random(1)){
    xSpeed=1;
    ySpeed=1;
  }
  else{
    xSpeed=10;
    ySpeed=10;
 }}
1 Like

Hi ant,

You almost already have all the code for that :slight_smile:
And you also almost have your answer in your question :slight_smile:

Since you want that event to appear after you hit the walls, you need to detect when the triangle hits the wall.

And you already have that!

if (xa>width || xa<0 || xb>width || xb<0 || xc>width || xc<0){ 
    xSpeed=xSpeed*-1;
 }
  
  if (ya>height || ya<0 || yb>height || yb<0 || yc>height || yc<0 ){  
    ySpeed=ySpeed*-1;
 }

Now, your new speed depends on the old one. So if the previous speed was slow, the new one will also be slow. But all you really care about the old speed is its direction so you can inverse it.

So let’s just keep the sign and put the speed we want instead:

  if (xa>width || xa<0 || xb>width || xb<0 || xc>width || xc<0){
    xSpeed = 10 * (xSpeed/abs(xSpeed)) * -1;
    ySpeed = 10 * (ySpeed/abs(ySpeed));
  }
  
  if (ya>height || ya<0 || yb>height || yb<0 || yc>height || yc<0 ){
    ySpeed = 10 * (ySpeed/abs(ySpeed)) * -1;
    xSpeed = 10 * (xSpeed/abs(xSpeed));
  }
1 Like

Would there be a way to continuously make it faster each time it hits the wall not just the initial hit of the wall?

Sure!

Here I put 10 as the speed but you can put any numbers that you want. And especially you can put here a variable. If so, you can increase the value of that variable every time you hit the wall and get the desired effect.

But I’ll leave it as an exercise for you :wink:

1 Like

Alright, I got the triangle to speed up and slow down when hitting different axis, but now my code for mouse released when you can stop the triangle sometimes the triangle gets stuck on the edges or disappears completely.

//variables
float xa=30;float ya=75;float xb=58;float yb=20;
float xc=86;float yc=75;float xSpeed=5;float ySpeed=5;

void setup(){
  size(800,600);//set up screen size 800 pixels by 600 pixels
}

void draw (){
  background (0);//refreshing the background
  fill (225,225,225);
  textSize(18);
  text("Cliking the mouse on the background might slow down the object",110,20);
  Triangle();
}

void Triangle(){//user defined function for Triangle
 fill(random(255),random(255),random(255));//selects a radom mix of red, blue and green
 triangle (xa,ya,xb,yb,xc,yc); 
 //have all of the points moving
  xa=xa+xSpeed;
  xb=xb+xSpeed;
  xc=xc+xSpeed;
  ya=ya+ySpeed; 
  yb=yb+ySpeed; 
  yc=yc+ySpeed; 
  
if (xa>width || xa<0 || xb>width || xb<0 || xc>width || xc<0){//if any of the X values goes out of bounds, reverse the speed
  //when the ball hit the x-axis it speeds up
  xSpeed = 17 * (xSpeed/abs(xSpeed)) * -1;
  ySpeed = 17 * (ySpeed/abs(ySpeed));
  }
if (ya>height || ya<0 || yb>height || yb<0 || yc>height || yc<0 ){//if any of the Y values goes out of bounds, reverse the speed
  //when ball hits the y-axis it slows down
  ySpeed = 11 * (ySpeed/abs(ySpeed)) * -1;
  xSpeed = 11 * (xSpeed/abs(xSpeed));
  }

}

void mouseReleased() {//when mouse is released then pressed there is a radom chance that the triangle stop
  if (.5<random(1)){
    xSpeed=0;
    ySpeed=0;
  }
  else{
    xSpeed=5;
    ySpeed=5;
 }}
1 Like

It is because of the way the logic is handled.

Let’s imagine we are in this case:

Step0

You triangle is moving toward the bottom right and the position is updated:

Step1

The bottom edge get below the screen so we enter your if statement and reverse the xSpeed. So if nothing happen, the following frame will look like this:

But instead, let’s imagine that the user clicked the mouse at the right time so we enter the mousePressed event. What happen is that your speed is override so the next frame will instead look like this:

Now the bottom edge is still below the screen so again we enter your if statement and reverse the xSpeed and in the next frame we update the triangle position. But because we went a bit lower that we should have to in the previous step, the up motion is not enough for the triangle to get above the screen edge:

So now, because we couldn’t get high enough to get above the screen, we still enter your if statement and we still reverse the xSpeed. This time it makes the triangle go down:

Then the speed is reverse again so you go up, then down again, then up, then down… in an endless loop.

2 Likes

So is there a way to make the triangle stop and start using mouseReleased or because of the reverse it’s not possible?

Everything is possible, and there are plenty of ways to overcome your problem. It really just depends on how you want to tackle the problem and which behavior you want to have.

For example, if you want a realistic bouncing, your logic is too simple and with big speed their might be some issues. The reason is that you are allowing the triangle to get out of the screen for a while. If the speed is too high (let’s say higher than the dimension of your triangle) then you might get some frame where the triangle is completely out of the screen.

One way to quickly solve your problem is to prevent the user to modify the speed if the triangle is outside of the screen. So you just need to copy your if statement inside the mousePressed event. (You can also use a global boolean variable to save some computation time but it’s not really useful here),

Sorry :cry: I’m a bit confused what if statement and where would it go in the mousePressed event.

What you want to do in mousePressed is:

if the shape is outside the screen:
    do nothing;
else:
   I can stop or change the speed of my triangles